// JavaScript Document

$(document).ready(function(){


var autoSlideshow = 1; //1 = slideshow is on. 0 = slideshow is off
/* ////////////////////////////////////////// SLIDESHOW CUSTOMIZATION //////////////////////////////////////////
Customise these values if you have "autoSlideshow" set to 1 (on) 
slideDelay 			:2000		:The time each slide is shown for in 100's of a second ie 1000 = 1 second
pauseOnHover 		:1 or 0		:Pauses the slideshow when the mouse is over the slidecontainer
slideControlsLoop	:1 or 0 	:Show the controls for left and right all the time or hides left and right at each respective end of the gallery so you can't manually loop
bounceSlide			:0 or 1		:Slides will loop in circles or with hit the end then start back in the other direction
slideDirection		:1 or -1	:Starts of heading right or starts off heading left
*/
var slideDelay = 5000; //time between slide changes (2000 is good for testing, 5000 is better for viewing)
var pauseOnHover = 1; //pause when mouse is over the slideshow
var slideControlsLoop = 1; //can loop through all the images
var bounceSlide = 0; //when gets to the end will start working back
var slideDirection = 1; //right or left scrolling initially

var fadeNotSlide = 1; //fade and swap the images or slide them over

/* ////////////////////////////////////////// OTHER CUSTOMIZATION ////////////////////////////////////////// */

var controlFadedOpacity = 0.5; //how faded the controls will fade to when the mouse is out
var currentPosition = 0; //starting slide

var slideWidth = 530;  //width of the slide
var slides = $('.slide'); //the slides class
var numberOfSlides = slides.length; //the number of slides


/* 
////////////////////////////////////////// HIDE THE SCROLL BARS //////////////////////////////////////////
*/

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
  .wrapAll('<div id="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);


/* 
////////////////////////////////////////// SETUP FOR MORE THAN ONE IMAGE //////////////////////////////////////////
*/
if (numberOfSlides != 1) {
	
	var inputDelayer=delayTimer(slideDelay); //how often the slides rotate without being clicked on
  // Insert left and right arrow controls in the DOM
  $('#controlHolder')
   // .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<div id="controlBar"></div>');

  // Hide left arrow control on first load
 	//manageControls(currentPosition);
	//fade the controls
	//$('#controlBar').stop().fadeTo('slow', controlFadedOpacity);
  // Create event listeners for .controls clicks
 }
 $('#controlBar')
 	.append('<div class="galleryitems"></div>');
	
	if($.browser.msie && $.browser.version=="6.0") {
		var controlWidth = 20 * (numberOfSlides) + 10;
	} else {
		var controlWidth = 20 * (numberOfSlides);
	}

$('#controlBar .galleryitems').css('width', controlWidth);

var g = 0;

while (g < numberOfSlides) {
 $('#controlBar .galleryitems')
  .append('<div class="galleryNavItem"></div>');
 if (g != currentPosition) {
	  $('#controlBar .galleryitems .galleryNavItem:last')
		  .addClass('inactiveItem');
 } else {
	  $('#controlBar .galleryitems .galleryNavItem:last')
		  .addClass('activeItem');
 }
 // alert("item added!");
 
 $('#controlBar .galleryitems .galleryNavItem:last').click(function() {
 	 var itemIndex = $('#controlBar .galleryitems .galleryNavItem').index(this);
	galleryItemClicked(itemIndex);
});

 
 	g++;
}
 
 $('#slideshow')
	.bind("mouseenter",function(){
					//	$('#controlBar').stop().fadeTo('fast', 1);
						if (pauseOnHover == 1) {
							clearTimeout(inputDelayer());
						}
					}).bind("mouseleave",function(){
					//	$('#controlBar').stop().fadeTo('slow', controlFadedOpacity);
						if (pauseOnHover == 1) {
							automator();
						}
});


	function galleryItemClicked(index) {
		
		 //var index = $('#controlBar .galleryitems .galleryNavItem').index(this);
  			//alert (index);
	currentPosition = index;
	moveSlide();
	updateGalleryIndex();
		clearTimeout(inputDelayer());
		automator();
	}
	
	 	function moveSlide() {
		if (fadeNotSlide) {
				//fade and swap the image
					$('#slideInner').fadeTo(300,0, function() {
						 $('#slideInner').css('marginLeft', slideWidth*(-currentPosition));
						$('#slideInner').fadeTo(300,1);
					});
					
			} else {
				//slide the image
						$('#slideInner').stop().animate({
					'marginLeft' : slideWidth*(-currentPosition)						 
    			});
			}
	}


function updateGalleryIndex() {
$('#controlBar .galleryitems .galleryNavItem').each(function(index) {
    $(this).removeClass('inactiveItem');
	$(this).removeClass('activeItem');
	
	 if (index != currentPosition) {
	  $(this)
		  .addClass('inactiveItem');
 		} else {
	  $(this)
		  .addClass('activeItem');
	}

  });



}

function changeSlide() {
				checkSlideDirection();
				currentPosition = currentPosition + slideDirection;
				checkSlidePosition();
				//manageControls(currentPosition);
				updateGalleryIndex();
				moveSlide();
				
				   	inputDelayer(function(){
          					changeSlide();//pass all details on to the next item
    				 });	
	}



	function delayTimer(delay){
     var timer;
     return function(fn){
          timer=clearTimeout(timer);
          if(fn)
               timer=setTimeout(function(){
               fn();
               },delay);
          return timer;
     }
} //end - more than one slide




function checkSlideDirection() {
		if (bounceSlide == 1) {
			if (currentPosition == 0) {
				slideDirection = 1;
			} else if (currentPosition == (numberOfSlides -1)) {
				slideDirection = -1;
			}
		}
	}
	
	function checkSlidePosition() {
		if (currentPosition < 0) {
			currentPosition = numberOfSlides-1;
		}
	
	//scroll to the last if left is clicked on the first slide
		if (currentPosition >= numberOfSlides) {
			currentPosition = 0;
		}
	}




	 function automator() {
	 	if (autoSlideshow == 1 ) {
	 	inputDelayer(function(){
          					changeSlide();//pass all details on to the next item
    				 });
		}
 	}
	
	
	 	//start the automatic loop
	automator();
});