/*
 * 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>
 */

var enableScrolling = true;

var scrollRight = false;

$(document).ready(carouselHookup);

//The auto-scrolling function
//var timeoutID = window.setTimeout($('.car-rightButton').click(), 5000);

function carouselSlide() {
    var imageElements = $('.car-imagesContainer > .car-image');
    var carouselRoot = $('.car-carousel');
    var currentSlide = carouselRoot.data('sys_currentSlide');


    if (enableScrolling) {
        if (currentSlide == (imageElements.length - 1)) {
            carouselRoot.data('sys_currentSlide', 0);
            moveToCurrentSlide(carouselRoot);
        }
        else {
            $('.car-rightButton').click();

        }
    }
}//Launch the scroll every 5 seconds
var intervalId = window.setInterval(carouselSlide, 5000);


    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 = $('.car-carousel');
	var r = 0;
	
	while(r < carouselRoots.length)
	{
		var carouselRoot = $(carouselRoots[r]);
		var rootWidth = carouselRoot.innerWidth(false);
		var imageWidth = 217;

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

		// Add mouseover events to image elements
		var imageElements = $('.car-imagesContainer > .car-image');

		i = 0;

		while (i < imageElements.length) {
		    var imageElement = $(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
		    $('.car-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 = $('.car-skipButtons > a');
		i = 0;
		
		while(i < skipButtons.length) {
			var skipButton = $(skipButtons[i]);
			
			skipButton.bind("click", {index: i, root: carouselRoot}, moveToSlide);

			i = i + 1;

        }
        //stop scrolling when on focus
        //$('.slide2 > a').focus(function() {
        
        //enableScrolling = false;
            
        //});
        //$('.slide1 > a').focus(function() {
           // enableScrolling = false;
        //});
		
		// Show the controls (hidden for non JS users)
		$('.car-controls').css('display', 'block');

		
		// Next and previous buttons
		var leftButton = $('.car-controls > .car-leftButton');

		leftButton.bind("click", { root: carouselRoot }, moveToPreviousSlide);
		
		var rightButton = $('.car-controls > .car-rightButton');

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

		r = r + 1;
	}	
};

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

function imageMouseOut(e)
{
	var rolloverElement = $('.car-rollover', e.data.element);

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

function moveToSlide(e) {
    enableScrolling = false;

	e.data.root.data('sys_currentSlide', e.data.index);

	moveToCurrentSlide(e.data.root);
};

function moveToPreviousSlide(e)
{
	var currentSlide = e.data.root.data('sys_currentSlide');
	
	currentSlide = currentSlide - 1;
	
	if(currentSlide < 0)
	{
		currentSlide = 0;
	}
	
	e.data.root.data('sys_currentSlide', currentSlide);

	moveToCurrentSlide(e.data.root);
	
};

function moveToNextSlide(e) {
    
	var currentSlide = e.data.root.data('sys_currentSlide');
	var maxIndex = $('.car-skipButtons > a', e.data.root).length  - 1;
	
	currentSlide = currentSlide + 1;
	
	if(currentSlide > maxIndex)
	{
		currentSlide = maxIndex;
	}
	
	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 = $('.car-imagesContainer');

	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 = $('.car-skipButtons > a > img');
	
	while(i < images.length) {
		var skipImage = images[i];
	
		if(i == currentSlide)
		{
		    skipImage.src = 'Media/Images/CSS/Home/carousel/btn-white.gif';
		}
		else
		{
		    skipImage.src = 'Media/Images/CSS/Home/carousel/btn-grey.gif';
		}
		
		i = i + 1;
	}
};