//GLOBAL VARIABLES

var dim = .4; //thumbnail inactive opacity
var highlight = 1.0; //thumbnail active/hover opacity
var slideshow_speed = 5000; //slideshow rotation speed in milliseconds


//DO NOT EDIT BELOW THIS POINT

//SUB NAVIGATION
$(function(){  

	$('#header').hover(
		function() {
			$('.sub_link').stop().animate({
				opacity: 1.0
			},{queue:false, duration:100})
		},
		function() {
			$('.sub_link').stop().animate({
				opacity: 0.0
			},{queue:false, duration:500})
		}
	);
	x=setTimeout( function () {
		$('.sub_link').stop().animate({
			opacity: 0.0
		},{queue:false, duration:500})
	},1000); 

});

//MAIN SLIDSHOW WINDOW
$(function(){
	if ($('#button').length) {
		var number_of_slides = $('#content_ids > li').size();
		var sliderison = 0;
		if (number_of_slides > 1) {
			
			function pause() {
				if (timer_is_on) {
					clearTimeout(t);
					timer_is_on = 0;
					$('#play').text('play')
				}
			}
			
			function rotateimage() {
				if($('.currentImage').next().length) {
					var source = $('.currentImage').next().html();
					$('.currentImage').removeClass('currentImage').next().addClass('currentImage');
				}
				else {
					var source = $('.firstImage').html();
					$('.currentImage').removeClass('currentImage');
					$('.firstImage').addClass('currentImage');
				}
				var id = $('.currentImage').attr("id");
				setmainimage(source, id);
			}
			
			function setmainimage(source, id) {
				var orig_source = $('#button').attr('src')
				if(source != orig_source) {
					$('.slide_nav').fadeOut(250);
					$('#button').fadeOut(250, function () {	
						
						startSpinner();
						$('#button').attr('src', source);
					});
					if(sliderison) {
						$('.currentClass').stop().animate({
							opacity: dim
						},{queue:false, duration:250});
						$('.currentClass').removeClass('currentClass');
						
						$('#thumb_' + id).addClass('currentClass');
						$('.currentClass').stop().css("opacity",highlight);
					};
				}
			}
			
			function startSpinner() {
				if (!spinner_is_on) {
					spinner_is_on = 1;
					s=setTimeout( function () {$('#spinner').fadeIn(100);},200);
				}
			}
			
			function stopSpinner() {
				if (spinner_is_on) {
					clearTimeout(s);
					spinner_is_on = 0;
					$('#spinner').fadeOut(0);
				}
			}
			
			if($('#slider').length) {
				sliderison = 1;
				$('.hover_img').css("opacity","0.3");
				$('#my-list').children(':first').addClass('currentClass').css("opacity",highlight);
				
				$('.hover_img').hover(
					function () {
						$(this).stop().animate({
							opacity: highlight
						},{queue:false, duration:250});
					},
					function () {
						if( $(this).hasClass('currentClass')) {
						}
						else {
							$(this).stop().animate({
								opacity: dim
							},{queue:false, duration:500});
						}
					}
				).click(
					function() {
						pause();	
						var thumb_id = $(this).attr("id");
						var id = thumb_id.replace("thumb_", "")
						$('.currentImage').removeClass('currentImage');
						$('#' + id).addClass('currentImage');
						var source = $('#' + id).html();
						setmainimage(source, id);
					}
				);				
				
			};
			
			$('#content_ids').children(':last').addClass('lastImage');
			$('#content_ids').children(':first').addClass('firstImage');
			
			$('.slide_nav').css("opacity","0.0");
			var t;
			var s;
			var spinner_is_on = 1;
			stopSpinner();
			var timer_is_on = 1;
			var timer_is_paused = 0;		
			$('#button').load(function () { 
				$('.slide_nav').fadeIn(); 
				$('#button').fadeIn(); 
				stopSpinner(); 
				if (timer_is_on) {
					$('#play').text('pause')
					t=setTimeout( function () {rotateimage();},slideshow_speed); 
				}
			});
						
			$('#next').hover(
				function () {
					$('#next').css("color","#cc3333");
				},
				function () {
					$('#next').css("color","#999999");
				}
			).click(function () { 
				pause();
				if($('.currentImage').next().length) {
					var source = $('.currentImage').next().html();
					$('.currentImage').removeClass('currentImage').next().addClass('currentImage');	
				}
				else {
					var source = $('.firstImage').html();
					$('.currentImage').removeClass('currentImage');
					$('.firstImage').addClass('currentImage');
				}
				var id = $('.currentImage').attr("id");
				setmainimage(source, id);
			});
			
			$('#prev').hover(
				function () {
					$('#prev').css("color","#cc3333");
				},
				function () {
					$('#prev').css("color","#999999");
				}
			).click(function () { 
				pause();
				if($('.currentImage').prev().length) {
					var source = $('.currentImage').prev().html();
					$('.currentImage').removeClass('currentImage').prev().addClass('currentImage');
				}
				else {
					var source = $('.lastImage').html();
					$('.currentImage').removeClass('currentImage');
					$('.lastImage').addClass('currentImage');
				}
				var id = $('.currentImage').attr("id");
				setmainimage(source, id);
			});
				
			if ($('.slide_nav').length) {
				function change() {
					if (timer_is_on) {
						clearTimeout(t);
						timer_is_on = 0;
						$('#play').text('play')
					}
					else {
						rotateimage();
						timer_is_on = 1;
						$('#play').text('pause')
					}
				}

				$('#page').hover(
					function() {
						$('.slide_nav').stop().animate({
							opacity: 1.0
						},{queue:false, duration:500})
					},
					function() {
						$('.slide_nav').stop().animate({
							opacity: 0.0
						},{queue:false, duration:500})
					}
				);	
				
				$('#button').hover(
					function () {
						$('#play').css("color","#cc3333");
					},
					function () {
						$('#play').css("color","#999999");
					}
				).click( function () {
					change();
				});	
				
				$('#playpause').hover(
					function () {
						$('#play').css("color","#cc3333");
					},
					function () {
						$('#play').css("color","#999999");
					}
				);
				$('#play').click(function () { 
					change();
				});
			};
		}
		else {
			if($('#slider').length) {
				$('#slider').css("display","none");
			}
			$('.slide_nav').css("display","none");
			$('#spinner').css("display","none");		
		}
	}
});

//SLIDE OVERFLOW
$(function() {
	if ($('#slider').length) {
		var $this = $('#my-list');
		var listctnr = $this.parent();
		var ctnr = listctnr.parent();
		var size = 0;
				
		$this.children().each(function() {	
			size += $(this).outerWidth();
		});
	
		$this.width(size);
		
		size = ctnr.outerWidth();
				
		var zone = {
			1: { action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 22 },
			2: { action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 14 },
			3: { action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 9 },
			4: { action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 4 },
			5: { action: 'stop', from: 0.4 * size, to: 0.6 * size },
			6: { action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 4 },
			7: { action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 9 },
			8: { action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 14 },
			9: { action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 22 }
		}
		
		ctnr[0].isChanging = false;
		ctnr[0].direction  = 0;
		ctnr[0].speed      = 1;
		
		function checkMouse(x) {
			x = x - ctnr.offset().left;
			for (i in zone) {
				if (x >= zone[i].from && x < zone[i].to) {
					if (zone[i].action == 'move') { startMoving(zone[i].direction, zone[i].speed); }
					else { stopMoving(); }
				}
			}
		}
				
		function startMoving(direction, speed) {
			if (ctnr[0].direction != direction) {
				
				stopMoving();
				ctnr[0].direction  = direction;
				ctnr[0].isChanging = true;
				move();
			}
			if (ctnr[0].speed != speed) {
				ctnr[0].speed = speed
			}
		}
		
		function stopMoving() {
			if (ctnr[0].isChanging) {
				
				ctnr[0].isChanging = false;
				ctnr[0].direction  = 0;
				ctnr[0].speed      = 1;
				clearTimeout(ctnr[0].timer);
			}
		}
		
		function move() {
			if (ctnr[0].isChanging == false) { return; }
						
			var scrollSide = 'scrollLeft';
			
			listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
			ctnr[0].timer = setTimeout(function() { move(); }, 50);
		}
		
		ctnr.mousemove(function(e) { checkMouse(e.pageX); }).mouseleave(function() { stopMoving(); });
	}
});