/*
 * This script hooks up all carousels on a page. The basic carousel
 * HMTL layout is:
 *
 * <div class="carousel">
 *    <div class="imagesContainer">
 *       <div class="image">
 *          <img ... />
 *          <div class="rollover">
 *             ...
 *          </div>
 *       </div>
 *		 ... [more <div class="image"> elements]
 *    </div>
 *    <div class="controls">
 *       <img class="leftButton" ... />
 *       <div class="skipButtons>
 *          <img ... />
 *          ... [more <img /> elements]
 *       </div>
 *       <img class="rightButton" ... />
 *    </div>
 * </div>
 */

$j(document).ready(carouselHookup);

function carouselHookup()
{
	// Loop through all carousel elements setting up the events and data
	// the carousel root is very important as it stores the current slide
	// position and is passed to most of the methods, this allows multiple
	// carousels on the same page.
	var carouselRoots = $j('.sys_carousel');
	var r = 0;
	
	while(r < carouselRoots.length)
	{
		var carouselRoot = $j(carouselRoots[r]);
		var rootWidth = carouselRoot.innerWidth(false);
		var imageWidth = 400;

		if (carouselRoot.data('sys_currentSlide') <= 0 || carouselRoot.data('sys_currentSlide') == undefined)
		{
			carouselRoot.data('sys_currentSlide', 0);
		}

		// Add mouseover events to image elements
		var imageElements = $j('.sys_imagesContainer > .sys_image', carouselRoot);

		i = 0;
		
		while(i < imageElements.length)
		{
			var imageElement = $j(imageElements[i]);
			
			// Store image width
			imageWidth = imageElements.outerWidth(true);
			
			// This is for when JS is turned off.
			imageElement.css('float', 'left');
			
			// Hook up events
			imageElement.bind("mouseenter", {element: imageElement}, imageMouseOver);
			imageElement.bind("mouseleave", {element: imageElement}, imageMouseOut);
			
			// more fixes for non-JS users
			$j('.sys_rollover', imageElement).css('margin-top', '85px');
			
			i = i + 1;
		}
		
		// Calculate movement parameters and store on the root
		carouselRoot.data('animOffset', (rootWidth - imageWidth) / 2);
		carouselRoot.data('animImageWidth', imageWidth);
		
		// Add skipButton events
		var skipButtons = $j('.sys_skipButtons > img.sys_greyButton', carouselRoot);
		i = 0;
		
		while(i < skipButtons.length)
		{
			var skipButton = $j(skipButtons[i]);
			
			skipButton.bind("click", {index: i, root: carouselRoot}, moveToSlide);

			i = i + 1;
		}
		
		// Show the controls (hidden for non JS users)
		$j('.sys_controls', carouselRoot).css('display', 'block');
		
		// Next and previous buttons
		var leftButton = $j('.sys_controls > .sys_leftButton', carouselRoot);

		leftButton.bind("click", { root: carouselRoot }, moveToPreviousSlide);

		var rightButton = $j('.sys_controls > .sys_rightButton', carouselRoot);

		rightButton.bind("click", { root: carouselRoot }, moveToNextSlide);
	
		moveToCurrentSlide(carouselRoot);

		r = r + 1;
	}	
};

function imageMouseOver(e)
{
	var rolloverElement = $j('.sys_rollover', e.data.element);
	
	rolloverElement.stop(true, false);
	rolloverElement.animate({marginTop: '0px'}, 500);
};

function imageMouseOut(e)
{
	var rolloverElement = $j('.sys_rollover', e.data.element);

	rolloverElement.stop(true, false);
	rolloverElement.animate({marginTop: '85px'}, 500);
};

function moveToSlide(e)
{
	e.data.root.data('sys_currentSlide', e.data.index);

	moveToCurrentSlide(e.data.root);
};

function moveToPreviousSlide(e)
{
	var currentSlide = e.data.root.data('sys_currentSlide');
	var maxIndex = $j('.sys_skipButtons > img.sys_greyButton', e.data.root).length  - 1;
	
	currentSlide = currentSlide - 1;
	
	if(currentSlide < 0)
	{
		// currentSlide = 0;
		currentSlide = maxIndex;
	}
	
	e.data.root.data('sys_currentSlide', currentSlide);
	
	moveToCurrentSlide(e.data.root);
};

function moveToNextSlide(e)
{
	var currentSlide = e.data.root.data('sys_currentSlide');
	var maxIndex = $j('.sys_skipButtons > img.sys_greyButton', e.data.root).length  - 1;
	
	currentSlide = currentSlide + 1;
	
	if(currentSlide > maxIndex)
	{
		// currentSlide = maxIndex;
		currentSlide = 0;
	}
	
	e.data.root.data('sys_currentSlide', currentSlide);
	
	moveToCurrentSlide(e.data.root);
};

function moveToCurrentSlide(carouselRoot) {
	var currentSlide = carouselRoot.data('sys_currentSlide');
	var imageWidth = carouselRoot.data('animImageWidth');
	var offset = carouselRoot.data('animOffset');
	
	// Move the image container to centre the correct slide
	var left = (currentSlide * imageWidth) - offset;
	var containerElement = $j('.sys_imagesContainer', carouselRoot);

	if (isNaN(left))
	{
		left = 0;
	}
	
	containerElement.stop(true, false);
	containerElement.animate({ left: -left }, 500);
	
	// Update the skip button images to highlight the new one
	var i = 0;

	var images = $j('.sys_skipButtons > img.sys_greyButton', carouselRoot);
	
	while(i < images.length)
	{
		var skipImage = images[i];
	
		if(i == currentSlide)
		{
			skipImage.src = '/clicsargent_images/carousel/buttonDarkGrey.gif';
		}
		else
		{
			skipImage.src = '/clicsargent_images/carousel/buttonGrey.gif';
		}
		
		i = i + 1;
	}

	if ($j(carouselRoot).attr('class') != 'sys_carousel sys_lightBoxContent' && $j(carouselRoot).parent('#carouselLightBoxContainer').size() > 0) {
		
		var lightboxParent = $j(carouselRoot).parent('#carouselLightBoxContainer').get(0);

		var lightboxRoot = $j('.sys_lightBoxContent', lightboxParent);
		lightboxRoot.data('sys_currentSlide', currentSlide);
		
		moveToCurrentSlide(lightboxRoot);
	}
};