var ScrollerHolderHeight = 360;
var ScrollerSlideHeight = 83;
// Slider: to move one slide at a time
// Holder: to move by all slides that fit in one holder
var ScrollerMoveBy = 'Holder';

var ScrollerID = 'Scroller';
var ScrollerSpeed = 7500;

var LargeImageHolder = 'ImageLarge';

$(document).ready(function() {

	$('div.Scroller div.Thumb').bind('mouseenter', function() {		
		var imageID = $(this).attr('id');
		imageID = imageID.substr(12); // remove prefix Image_Thumb_
		displayID = 'Enlarge_Thumb_' + imageID;
		$('#' + displayID ).show();
	});
	
	$('div.Scroller div.Thumb').bind('mouseleave', function() {		
		var imageID = $(this).attr('id');
		imageID = imageID.substr(12); // remove prefix Image_Thumb_
		displayID = 'Enlarge_Thumb_' + imageID;
		$('#' + displayID ).hide();
	});
	
	$('div.Scroller div.Thumb div.Enlarge').bind('click', function() {
		var imageID = $(this).attr('id');

		imageID = imageID.substr(14); // remove prefix Enlarge_Thumb_
		GetImage( imageID );
	});
	
	$('div.Scroller div.Thumb').bind('click', function() {	
	
		var imageID = $(this).attr('id');
		$('.Thumb').removeClass('Active')
		$(this).addClass( 'Active' );
		imageID = imageID.substr(12); // remove prefix Image_Thumb_
		GetImage( imageID );
	});

	$('div.ScrollerBody div.GoUp').bind('click', function() {
		MoveScroller( 'Up' );		
	});

	$('div.ScrollerBody div.GoDown').bind('click', function() {
		MoveScroller( 'Down' );		
	});
		
});

function GetImage( imageID ) {
 
	var httpObject = getHTTPObject();
	var ScriptURL = AbsPath + 'includes/SpecialPages/Shop/Product/ImageAjax.php';
	if ( httpObject != null) {
		//Opening the connection
		httpObject.open( "POST", ScriptURL, false );
		httpObject.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
		
		//Setting up params and sending them
		var Params = "ID=" + imageID;
		httpObject.send( Params );
		
		//Based on the ajax response we will determin if it went ok or not.
		var response = httpObject.responseText;

		if ( response !== 'false' ) {			
			var ImageDiv = document.getElementById( LargeImageHolder );
			ImageDiv.innerHTML = response;
		} else {
			throw 'Not a valid image';
		}		
	} else {
		throw 'HttpObject was not set!';
	}
	return false;
}

function MoveScroller( Direction ) {

	if( ScrollerMoveBy == 'Holder' ) {
		var MoveX = ScrollerHolderHeight;
	} else {
		var MoveX = ScrollerSlideHeight;
	}
	var position = $('#' + ScrollerID ).position();
 
	if( Direction == 'Up' ) {
	
		if( position.top < 0 ) {
			$( '#' + ScrollerID ).animate({
				top: '+=' + MoveX + ''
			}, ' + ScrollerSpeed + ', function() {
			    // Animation complete.
			});				
		}	
	} else {
	 
		var ScrollerHeight = $('#' + ScrollerID ).height();
 
		if( ( position.top - ScrollerSlideHeight - ScrollerHolderHeight ) > ( 0 - ScrollerHeight - 1 ) ) {
			$( '#' + ScrollerID ).animate({
				top: '-=' + MoveX + ''
			}, ' + ScrollerSpeed + ', function() {
			    // Animation complete.
			});				
		}
	}		
}