/*-------------------------------------------------------------
|
|	Slide-Customizer
|
|		by James Herriott
|
|	7/16/2010
|
|		Fully customizable slideshow-defaults are color
|		blocks.  Change the options and dimensions based
|		on the size of your images, change the dimensions
|		of the optional side tabs and bottom menu bar as
|		you want, and the slideshow will be automatically
|		resized for you.
|
|		Add as many pics as you want (nine slots have been
|		provided).  If you choose to include a bottom menu
|		bar, put as many items as you have pictures
|		into the list in the HTML file and
|		it will automatically be sized up.
|
|		The code only supports nine images, if you want
|		more, it shouldn't be too hard to change if
|		you're familiar with JQuery
|		
|		Also, if you want to include the slider, put any
|		image as the background of the slider.
|
--------------------------------------------------------------*/

//Slideshow Options (true or false):

	//TABS: inserts a tab on either side of the 
	//image which scroll through slides when
	//clicked:
	
var has_tabs = true;
var tab_width = 50;

	//BOTTOM BAR: inserts a bar along the bottom
	//of the slideshow which contains the index
	//of slides-- they can be clicked on to advance
	//to the specified slide
var has_bottom_row = true;
var bottom_row_height = 50;
	//SLIDER: this is an image that slides behind
	//the index options on the bottom bar when
	//hovering -- also stays behind currently 
	//selected menu item
var has_slider = true;

	//TIMER: if set to true, the slideshow will auto
	//scroll at the specified interval (milliseconds)
var has_timer = true;
var timer_interval = 5500;

	//IMAGE DIMENSIONS: specify the dimensions of the 
	//images--obviously, they must be uniform.
	//Also, if you are using a "frame" for the pictures
	//you can specify a top margin for the picture div
	//which will expose some of the main div which you
	//can use for the frame image
var img_width = 800;
var img_height = 300;
var img_top_margin = 10;

	//NUMBER OF SLIDES: Remember, if using the bottom
	//bar, ensure that you have the same number of items
	//in the list (HTML) as you do images
var num_of_slides = 5;


//STATIC VARIABLES -- DO NOT CHANGE
var bottom_bar_position;
var current_slide="menu1";
var stopped = 0;
var current_index = 1;

//-------------SLIDESHOW CODE-----------------------//
//
//  If you are familiar with JQuery, feel free
//	to mess with this as desired                    
//
//--------------------------------------------------//

$(document).ready(function() {
	
	init();
	$('#ss_slider').animate({"left": $(".current").position().left + 
								bottom_bar_position}, 0);


	//MENU ITEM CLICKED
	if(has_bottom_row){
		$("#ss_bottom_row ul li").click(function(){
			if(this.id != current_slide){
				stopped = 1;
				current_slide = this.id;
				$(".current").removeClass("current");
				$(this).addClass("current");
				clickChangeImage(this);
			}
		});
			//SLIDER ANIMATION
			if(has_slider){

				$("#ss_bottom_row ul li").hover(
						
						function (){
							if(this.id != current_slide){
								$('#ss_slider').stop();
								$('#ss_slider').animate({"left": $(this).position().left + 	
							bottom_bar_position}, 400);}},
						
						function (){
							if(this.id != current_slide){
								$('#ss_slider').stop();
								$('#ss_slider').animate({"left": $(".current").position().left + 
							bottom_bar_position}, 300)};
						}
				);
			}
				
		
		//LEFT TAB CLICKED
		if(has_tabs){
			
			
			$("#tab_left").click(function(){
			
				current_index = $(".img_active").attr('id').charAt(5);
				
				//CHANGE IMAGE
				current_index--;
				if(current_index < 1){
					current_index=num_of_slides;
				}

				$(".img_last").addClass("img_inactive");
				$(".img_last").removeClass("img_last");
				
				$(".img_active").addClass("img_last");
				$(".img_active").removeClass("img_active");
				
				$("#slide" + current_index).addClass("img_active");
				$(".img_active").removeClass("img_inactive");
				
				//ANIMATE LEFT SLIDE		

				$(".img_active").css({"margin-left": img_width + "px"});
				$(".img_active").animate({"marginLeft": "0px"}, 400);	
				
				//CHANGE MENU SELECTED
				$(".current").removeClass("current");
				$("#menu" + current_index).addClass("current");
				$('#ss_slider').animate({"left": $(".current").position().left + 
								bottom_bar_position}, 400);
								
				current_slide = "menu" + current_index;
				stopped = 1;
			});
			
			$("#tab_right").click(function(){
			
				current_index = $(".img_active").attr('id').charAt(5);
				
				//CHANGE IMAGE
				current_index++;
				if(current_index > num_of_slides){
					current_index=1;
				}

				$(".img_last").addClass("img_inactive");
				$(".img_last").removeClass("img_last");
				
				$(".img_active").addClass("img_last");
				$(".img_active").removeClass("img_active");
				
				$("#slide" + current_index).addClass("img_active");
				$(".img_active").removeClass("img_inactive");
				
				//ANIMATE LEFT SLIDE		
				animateSlide();
				
				//CHANGE MENU SELECTED
				$(".current").removeClass("current");
				$("#menu" + current_index).addClass("current");
				$('#ss_slider').animate({"left": $(".current").position().left + 
								bottom_bar_position}, 400);
				current_slide = "menu" + current_index;				
				stopped = 1;
			});
		}
		
		$.timer(timer_interval, function (timer) {
   			if (stopped == 0){
				autoSlide();
			}
			else
			{
				timer.stop();
			}
   		});

	}
	
function autoSlide() {
				
				current_index = $(".img_active").attr('id').charAt(5);
				
				//CHANGE IMAGE
				current_index++;
				if(current_index > num_of_slides){
					current_index=1;
				}

				$(".img_last").addClass("img_inactive");
				$(".img_last").removeClass("img_last");
				
				$(".img_active").addClass("img_last");
				$(".img_active").removeClass("img_active");
				
				$("#slide" + current_index).addClass("img_active");
				$(".img_active").removeClass("img_inactive");
				
				//ANIMATE LEFT SLIDE		
				animateSlide();
				
				//CHANGE MENU SELECTED
				$(".current").removeClass("current");
				$("#menu" + current_index).addClass("current");
				$('#ss_slider').animate({"left": $(".current").position().left + 
								bottom_bar_position}, 400);
								
				current_slide = "menu" + current_index;
}
	
	
});

function init() {
	
	//Initialize picture
	$("#ss_picture").width(img_width);
	$("#ss_picture").height(img_height);
	$("#ss_picture").css("margin-top",img_top_margin);
	
	//Set Up the Tabs/Slideshow Width
	if(!(has_tabs)){
		$('div').remove('.ss_tabs');
		$("#slideshow").width(img_width);
		tab_width = 0;
	}
	else{	
		$(".ss_tabs").width(tab_width);
	}
	
	//Set Up the Bottom Bar
	if(!(has_bottom_row)) {
		$('div').remove('#ss_bottom_row');
		$("#slideshow").height(img_height);
		bottom_row_height = 0;
	}
	else{
		$("#ss_bottom_row").height(bottom_row_height);
		$("#ss_bottom_row").width(img_width);
		$("#ss_bottom_row ul li").width(img_width/num_of_slides);
		$('#ss_bottom_row ul').css("width",img_width);

		//Set Up Slider
			if(!(has_slider)){
				$('div').remove('#ss_slider');
			}
			else{
				$("#ss_slider").width(img_width/num_of_slides);
				$("#ss_slider").height(bottom_row_height);
			}
				
	}
	
	
	
	//Finalize Tab Height
	
	
	$("#slideshow").width(img_width + (2*tab_width));
	$("#slideshow").height(img_height + bottom_row_height + img_top_margin);
	$(".ss_tabs").height($("#slideshow").height());
	bottom_bar_position = $("#ss_bottom_row").position().left;
}

function clickChangeImage(control){
	
	var str = control.id.charAt(4);
	$(".img_last").addClass("img_inactive");
	$(".img_last").removeClass("img_last");
	
	$(".img_active").addClass("img_last");
	$(".img_active").removeClass("img_active");
	
	$("#slide" + str).addClass("img_active");
	$(".img_active").removeClass("img_inactive");
	
	animateSlide();	
}

function animateSlide(){

	//ANIMATE RIGHT SLIDE		

	$(".img_active").css({"margin-left": "-" + img_width + "px"});
	$(".img_active").animate({"marginLeft": "0px"}, 400);

}