$(function() {

	$('#global_search_search').hover(
	
	function(){
	
		$(this).css({"background-position":"bottom"});
	
	},
	function(){
	
		$(this).css({"background-position":"top"});
	
	});

	var pageWidth = 1000;
	var currentPage = 1;
	
	var startPage = 1;
	var finalPage = $('#slider').children().size();
	
	var currentlySliding = false;
	var autoplay = true;
	var firstLoad = true;
	var playEnabled = false;
	
	var imageLoaded = [false, false, false];
	
	var timer = "";
	var time;
	
	loadImage (currentPage);
	holdPage();
	
	$('.search_textbox').focus();
	
  	$('#global_search').keypress(function(e) {
    	
    	if (e.keyCode == 13) {
    	
    		    if ($('#global_search').val() == "") {
    		    	e.preventDefault();
    		    } else {
    		    
    		    }
    		
    	}
    	
    	if (e.keyCode == 32) {
				    		
    	}
    	
    	if (event.keyCode == 37) {
    		
    		slide("back", currentPage, (currentPage - 1));
			$('.play_pause').css({"background-image":"url('./images/slider/play.png')"});
			playEnabled = false;
			e.preventDefault();
  		
  		}
    	
    	if (event.keyCode == 39) {
    		
    		slide("forward", currentPage, (currentPage + 1));
    		e.preventDefault();
    		
  		}
  		
  	});
  	
  	
  	function loadImage(){
  	var img = new Image();
  
  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();
    
      // with the holding div #loader, apply:
      $('#loader')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);
    
      // fade our image in to create a nice effect
      $(this).fadeIn();
    })
    
    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })
    
    // *finally*, set the src attribute of the new image to our image
    .attr('src', 'images/slider/classes.png');
	}
	//function setImage(src){
	
		//$('#slider .panel' + src).children(':nth-child(1)').hide();
		//$('#slider .panel' + src).html("<div class=\"panel_image_loading\"><img src=\"../images/ajax-loader.gif\"></div>");
		
	//}
	
	function setImage(src){
		var loadingImg = $('#slider .panel' + currentPage).children(':nth-child(1)').attr('src', '../images/ajax-loader.gif');
		$('#slider .panel' + currentPage).children(':nth-child(1)').html(loadingImg);
		var img = $(this).attr({src: src + '?random=' + (new Date()).getTime()}).load(function (){
		$('#slider .panel' + currentPage).fadeOut('fast', function(){
			$('#slider .panel' + currentPage).html(img).fadeIn();	
		})
	});
}
	
	function holdPage () {
	
		$('#slider').children().each(function(){
		
			$(this).children().each(function(){
			
				$(this).children().each(function(){
			
					if ($(this).attr("class") == "tabs"){
					
						$(this).children().each(function(){
							
							$(this).hover(
							
								function(){
									stopTimer();
								},
								function(){
									startTimer(4000);
								}
							
							);
							
						});
					
					}
			
				});
			
			});
		
		});
	
	}
	
	function loadImage(){
	
		
		
		//$('#slider .panel' + page).children(':nth-child(1)').hide();
		//$('#slider .panel' + page).append("<div class=\"panel_image_loading\"><img src=\"../images/ajax-loader.gif\"></div>");
		//var img = new Image();
		//var className = ($('#slider .panel' + page).children(':nth-child(1)').attr('name'));
		//$(img).load(function () {
			
			//$('#slider .panel' + page).children(':nth-child(1)').hide();
			//$('#slider .panel_image_loading').remove();
			//$('#slider .panel' + page).children(':nth-child(1)').append(this);
			//$('#slider .panel' + page).children(':nth-child(1)').fadeIn();
			//imageLoaded = true;
		//}).attr('src', '../images/slider/new/'+className+'.png');
			
	}
	
	
    function startTimer(time) {
	    
	    if (timer == "") {
		    
		    timer = window.setInterval(function(){
		    	
		    	play();
		    
		    },time);
		    
	    }
	    
    }

    function stopTimer(){
		
		if ( timer != "") {
			
			window.clearInterval(timer);
			timer = "";
			
		}
		
    }
	
	setupPage(currentPage);
	
	if (autoplay == true){
	
		playEnabled = true;
		startTimer(7000);
	
	} else {
	
	}
	
	function play() {
    	
    	if (playEnabled == true) {
    	
    		if (imageLoaded == false) {
    		
    		} else {
		    	
		    	if (firstLoad == true) {
		    		
		    		firstLoad = false;
		    		stopTimer();
		    		startTimer(0);	    		
		    	
		    	} else {
		    		
		    		slide("forward", currentPage, (currentPage+1));
		    		stopTimer();
		    		startTimer(7000);
		    	
		    	}
		    	
		    	
	    	
	    	}
    	
    	} else {
    	
    		stopTimer();
    	
    	}
    	
	}
	
	function setupPage (page) {
	
		if (page == startPage) {
			
			$('#slider .panel' + finalPage).css({'margin-left':'-' + pageWidth + 'px', opacity:0});
			$('#slider .panel' + startPage).css({'margin-left':'0px', opacity:1});
			$('#slider .panel' + (page+1)).css({'margin-left':pageWidth + 'px', opacity:0});
			
		}
		
		else if (page == finalPage) {
			
			$('#slider .panel' + (page-1)).css({'margin-left':'-' + pageWidth + 'px', opacity:0});
			$('#slider .panel' + startPage).css({'margin-left':pageWidth + 'px', opacity:0});
		
		} else {
		
			$('#slider .panel' + (page-1)).css({'margin-left':'-' + pageWidth + 'px', opacity:0});
			$('#slider .panel' + (page+1)).css({'margin-left':pageWidth + 'px', opacity:0});
			
		}
	
	}
	
	
	function slide(direction, startingPage, finishingPage) {
		
		if (currentlySliding == false){
			currentlySliding = true;
			setupPage (startingPage);
			stopTimer();
			
			if (direction == "forward"){
				
				if (startingPage == finalPage){
				
					finishingPage = startPage;
					currentPage = startPage - 1;
									
				} else {
					loadImage(finishingPage);
				}
				
				
				
				$('#slider .panel' + startingPage).animate({'opacity':0}, { duration: 1200, queue: false });
				$('#slider .panel' + startingPage).animate({marginLeft:'-' + pageWidth + 'px'}, 800);
				$('#slider .panel' + finishingPage).animate({'opacity':1}, { duration: 1400, queue: false });
				$('#slider .panel' + finishingPage).animate({marginLeft:'0px'}, 800, function(){
				
					currentlySliding = false;
					
					if (playEnabled == true) {
						startTimer(6000);
					}
				
				});
				currentPage++;
				setupPage (startingPage);
				
			} 
			
			else if (direction == "back") {
				loadImage(finishingPage);
				if (startingPage == startPage){
				
					finishingPage = finalPage;
					currentPage = finalPage + 1;
					loadImage(finishingPage);
				
				}
				
				$('#slider .panel' + startingPage).animate({marginLeft:pageWidth + 'px', 'opacity':0}, 800);
				$('#slider .panel' + finishingPage).animate({marginLeft:'0px', 'opacity':1}, 800, function(){
				
					currentlySliding = false;
				
				});
				currentPage--;
			
			}
			
		} else {
		
			//Do Nothing
		
		}
	
	}	
	
	$('#slider_nav .slider_next').click(function(){
	
		slide("forward", currentPage, (currentPage + 1));

	});
	
	$('#slider_nav .slider_back').click(function(){
	
		slide("back", currentPage, (currentPage - 1));
		$('.play_pause').css({"background-image":"url('./images/slider/play.png')"});
		playEnabled = false;
	
	});

	
	$('.play_pause').hover(
	
		function(){
		
			$(this).css({"background-position":"bottom"});
		
		},
		function(){
		
			$(this).css({"background-position":"top"});
		
		}
	
	);
	
	
	$('.play_pause').click(function(){
	
		if (playEnabled == true) {
			stopTimer();
			playEnabled = false;
			$(this).css({"background-image":"url('./images/slider/play.png')"});
		} else {
			firstLoad = true;
			startTimer(6000);
			playEnabled = true;
			$(this).css({"background-image":"url('./images/slider/pause.png')"});
		}
			
	});

});