/**
* Title: Dynamic JQuery Carousel
* Author: Joseph Shumbakwayo Munowenyu
* Copyright: VCSU Web Office , May 2010
*/
var mySlider = {}
//alert(navigator.userAgent);
//============================================================================
// Initialise parameters and set the stage
//============================================================================
function setSlider(myframe,thumbnails){
	mySlider.framewidth     = parseFloat($('#' + $('#' + myframe).parent().attr('id')).css('width'));
	mySlider.showthumbnails = thumbnails; // Whether to show thumbnails or not
	mySlider.frameName      = myframe;    // Name of the sliding frame
	mySlider.loopMe         = true;       // Whether loop is ready to or not
	mySlider.pause          = false;      // Loop is paused on mouse over of the frame or navigation arrows
	mySlider.loopgap        = 9000;       // How long to linger on a slide before looping again
	mySlider.speed          = 700;        // Slider animation speed
	mySlider.tnwidth        = 78;         // Default thumbnail width
	mySlider.tnheight       = 48;         // Default thumbnail height
	
   // Opacity for the thumbnails when dimmed...had to adjust for IE coz it was not obeying opacity rules properly
	if(navigator.userAgent.indexOf('MSIE') > -1){ mySlider.tndim = .7; } else { mySlider.tndim = .5; }
	
	mySlider.loopHold        = false;  // Set in order to hold the loop when manually scrolling 
	mySlider.toggling        = false;  // Set in order to hold the loop when manually scrolling 
	mySlider.toggledown      = true;   // Set in order to hold the loop when manually scrolling 
	mySlider.imgCount        = $("#" + myframe).find("img").length; // Determine number of images within the container
	mySlider.frameWidth      = $("#" + myframe).css({width: (mySlider.imgCount*mySlider.framewidth) + 'px'}); // Being fancy :) , dynamically setting width for the sliding div
	
	mySlider.position   = Number(0);   // This is where the slider will begin
	setTimeout("loopMe()",mySlider.loopgap); // Invoke the loop
	
	dimThumbnails(); // Dim all the thumbnails
	$('#thumbnails').fadeTo('fast',1);	
		
	//$('#thumbnails').animate({top: '-134px'},1000);
	
	if(mySlider.showthumbnails) {
		setTimeout("$('#thumbnailsFrame').animate({top: '-65px'},500);",1000);
	}
	
	$('#tn0').fadeTo('fast', 1);
	
	// Highlight initial thumbnail
	setTimeout("$('#litn0').css({border: '2px solid #E5FF00' }); " + 
	           "$('#litn0').css({width: '" + (mySlider.tnwidth -2) + "px' }); " +
	           "$('#litn0').css({height: '" + (mySlider.tnheight -2) + "px' });",
	           1490);
	
	// For IE...customize the thumbnails dimensions
	if(navigator.userAgent.indexOf('MSIE') > -1) { $('#tn' + mySlider.position).css({width: '76px',height: '46px'}); }
}

//============================================================================
// Slider activation
//============================================================================
function slideMe(mydirection){
	if(mydirection != 'loop') { mySlider.loopMe = false; mySlider.loopHold = true;}
	
	// This section takes care of custom clicks on particular thumbnails	
	if(!isNaN(parseFloat(mydirection))) {
		mydirection     = parseFloat(mydirection);		
		var myoffset    = (mydirection * mySlider.framewidth) - (mySlider.position * mySlider.framewidth);
		if(myoffset < 0) { animateSlider('+',(myoffset*(-1)),mySlider.speed); } else { animateSlider('-',myoffset,mySlider.speed); }

		mySlider.position = parseFloat(mydirection); // Reset position
		
	} else {	
		switch(mydirection){
			case 'left':
				mySlider.position--; //try {console.log(mySlider.position)} catch(e){}
			
				// If I am past the first element, then go back to the end
				if(mySlider.position == -1) {
					animateSlider('-',(mySlider.framewidth*(mySlider.imgCount-1)),mySlider.speed); // Slide to last image
					mySlider.position = (mySlider.imgCount-1);                     // Set count to the last image
				}  else { animateSlider('+',mySlider.framewidth,mySlider.speed);} // Slide over to the left
			break;
			case 'loop':
			case 'right':
				mySlider.position++; //try {console.log(mySlider.position)} catch(e){}
			
				// If I am past the last element, then go back to the beginning
				if(mySlider.position == mySlider.imgCount) {
					animateSlider('+',(mySlider.framewidth*(mySlider.imgCount-1)),mySlider.speed); // Slide back to first image
					mySlider.position = 0;                                          // Set count to the starting image
				}  else { animateSlider('-',mySlider.framewidth,mySlider.speed); } // Slide over to the right
			break;
		}
	}
	
	dimThumbnails();

	$('#tn' + mySlider.position).fadeTo('fast', 1);
	$('#litn' + mySlider.position).css({border: '2px solid #E5FF00' });
	$('#litn' + mySlider.position).css({width: (mySlider.tnwidth -2) + 'px' });
	$('#litn' + mySlider.position).css({height: (mySlider.tnheight-2) + 'px' });
	
	// For IE
	if(navigator.userAgent.indexOf('MSIE') > -1) { $('#tn' + mySlider.position).css({width: '76px',height: '46px'}); }
	
	// Loop Again
	if(mySlider.loopMe) { setTimeout("loopMe()",mySlider.loopgap); }
}

//============================================================================
// Function use to loop the slider
//============================================================================
function loopMe(){
	// If the slider is paused wait six seconds before you try again.
	if(mySlider.pause) { setTimeout("loopMe()",mySlider.loopgap); return; }
	
	// If set to loop and there is no hold on the loop then loop
	// otherwise release loop hold and set loopMe to true
	if(mySlider.loopMe && !mySlider.loopHold) { 
		slideMe('loop'); 
	} else { 
		setTimeout("loopMe()",mySlider.loopgap); mySlider.loopHold = false; mySlider.loopMe = true;
	}
}

//============================================================================
// Function use to animate slide
//============================================================================
function animateSlider(mydirection,mydisplacement,myspeed){ 
	$("#" + mySlider.frameName).animate({'left': mydirection + '=' + mydisplacement + 'px'},myspeed); 
}

//============================================================================
// Function used to reset thumbnails
//============================================================================
function dimThumbnails(){
	
  // Dim all thumbnail images
	for(var i = 0 ; i < $("#thumbnails").find("img").length ; i++){ 
		$('#tn' + i).fadeTo('fast', mySlider.tndim); 
		$('#litn' + i).css('background-image','url(/templates/common/imx/black78x48.png)'); 
		//$('#tn' + i).css({border: '0px'});

		// For IE
		if(navigator.userAgent.indexOf('MSIE') > -1) { $('#tn' + i).css({width: '78px',height: '48px'}); }
	
		$('#litn' + i).css({border: '1px solid #FFFFFF' });
		$('#litn' + i).css({width: mySlider.tnwidth + 'px' }); 
		$('#litn' + i).css({height: mySlider.tnheight + 'px' }); 
		$('#litn' + i).css({border: '1px solid #ffffff'})
	}	
}

//============================================================================
// Function used to reset thumbnails
//============================================================================
function myMouseover(i,mode){	
	if(i!=mySlider.position){
		switch(mode){
			case 0:
				$('#tn' + i).fadeTo(1, mySlider.tndim);
			    $('#litn' + i).css({border: '1px solid #ffffff' }); 
		        $('#litn' + i).css({width: (mySlider.tnwidth) + 'px' });
		        $('#litn' + i).css({height: (mySlider.tnheight) + 'px' });
			break;
			case 1:
			    $('#tn' + i).fadeTo(1, 1);
				$('#litn' + i).css({border: '2px solid #ffffff' });
		        $('#litn' + i).css({width: (mySlider.tnwidth -2) + 'px' });
		        $('#litn' + i).css({height: (mySlider.tnheight -2) + 'px' });
		}
	}
}

function toggleFrame(mymode){

	if(mySlider.showthumbnails){	
		if(mySlider.toggling) { return; }
	
		if(mymode == 0 && !mySlider.toggledown){ return; }
	
		mySlider.toggling = true;
		switch(mymode){
			case 0: if(mySlider.toggledown) { mySlider.toggledown = false; $('#thumbnailsFrame').animate({top: '-12px'},250); } break;
			case 1: setTimeout("resumeToggle()",1000); $('#thumbnailsFrame').animate({top: '-65px'},300);
		}
	
		mySlider.toggling = false;
	}
}
function resumeToggle(){ mySlider.toggledown = true; }