var ScrollerHolderWidth = 264;
var ScrollerSlideWidth = 88;
// 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').bind('click', function() {		
		var imageID = $(this).attr('id');
		var ProductID = 0;
		if( $('#' + imageID ).hasClass( 'Main' ) ) {
			ProductID = imageID.substr(12);;
		}
		imageID = imageID.substr(12); // remove prefix Image_Thumb_
		GetImage( imageID, ProductID );
	});

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

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

function GetImage( imageID, ProductID ) {
	var httpObject = getHTTPObject();
	var ScriptURL = AbsPath + 'includes/Templates/Producten/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 + "&ProductID=" + ProductID;
		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 = ScrollerHolderWidth;
	} else {
		var MoveX = ScrollerSlideWidth;
	}
	var position = $('#' + ScrollerID ).position();
	if( Direction == 'Left' ) {
		if( position.left < 0 ) {
			$( '#' + ScrollerID ).animate({
				left: '+=' + MoveX + ''
			}, ' + ScrollerSpeed + ', function() {
			    // Animation complete.
			});				
		}	
	} else {
		var ScrollerWidth = $('#' + ScrollerID ).width();
		if( ( position.left - ScrollerSlideWidth - ScrollerHolderWidth ) > ( 0 - ScrollerWidth - 1 ) ) {
			$( '#' + ScrollerID ).animate({
				left: '-=' + MoveX + ''
			}, ' + ScrollerSpeed + ', function() {
			    // Animation complete.
			});				
		}
	}		
}