var SLIDE_INTERVAL = 5000;
var MAX_SLIDES = 4;

var current_slide = 0;
var slide_interval_object;
var is_paused = false;
var panel_on = false;

$(document).ready(function() {

	current_slide = 0;
	//$(".rotator-page0").hide();
	$(".rotator-page1").hide();
	$(".rotator-page2").hide();
	$(".rotator-page3").hide();
	$(".rotator-controls").html("<div class=\"rotator-nav\">1</div><div class=\"rotator-nav\">2</div><div class=\"rotator-nav\">3</div><div class=\"rotator-nav\">4</div><div class=\"rotator-pause-play rotator-pause\"></div></div>");
	setupPanelBtns();
	
	// setup slide change interval function
	slide_interval_object = setInterval('nextSlide()', SLIDE_INTERVAL);
	
	$(".rotator-btn").each(function(i){
		$(this).css("cursor","pointer").click(function(){
			if (current_slide!=($(this).attr("rel"))){
				
				navigateToPage($(this).attr("rel"));
				clearTimeout ( slide_interval_object );
			}
			is_paused= false;
		})
		.hover(function(){
        $(this).addClass("hover");if(i==0){$(".rotator-right .top").addClass("selected");}}, function() {
               $(this).removeClass("hover");if(i==0 && (!$(this).hasClass("active"))){$(".rotator-right .top").removeClass("selected");}
        })
			
	});
	
	
	$(".rotator-nav").each(function(i){
		$(this).click(function(){
			if (current_slide!=i){
				clearTimeout ( slide_interval_object );
				navigateToPage(i);
				slide_interval_object = null;
				slide_interval_object = setInterval('nextSlide()', SLIDE_INTERVAL);
				
			}
		})
	})
	
	
	$(".rotator-pause-play").click(function()
	{
		if(is_paused)
		{
			$(this).addClass("rotator-pause");
			$(this).removeClass("rotator-play");
			is_paused= false;
		}else
		{
			$(this).removeClass("rotator-pause");
			$(this).addClass("rotator-play");
			is_paused = true
		}
		
	});
	$(".rotator-pause-play").addClass("rotator-pause");

});

function nextSlide()
{
		
		if(!is_paused)
		{		
				navigateToPage(nextSlideNumber(current_slide));
				
		}
}


function nextSlideNumber(p_slide_number)
{
		if(p_slide_number>= MAX_SLIDES-1)
		{
			return 0;
		}
		
		return p_slide_number +1;
}

function setupPanelBtns()
{
	
	// setup the event for the slider toggle button
	$("#rotator-slider-toggle-bar").click(function(event){
		toggleSlide(this)
		$(".toggle-btn",this).toggleClass("down")
	})
	$(".rotator-slider-content").mouseenter(function(){
		if(!panel_on)
		{$("#rotator-slider-toggle-bar").parent().stop().animate({"top":"315"}, 200,function(){})}}
		)
		
	$(".rotator-slider-content").mouseleave(function(){
		if(!panel_on)	
{
			$("#rotator-slider-toggle-bar").parent().stop().animate({"top":"322"}, 500,function(){})
			}

})
}
   



function toggleSlide(el){	

if(panel_on)
		{
			// set panel off
			$(el).parent().animate({"top":"322"}, 1000, function(){});
			// set direction arrow
			$(el).addClass("icon_up");
			$(el).removeClass("icon_down");
			panel_on = false;
			is_paused = false;
		}else
		{
			
			// set panel on
			$(el).parent().animate({"top":"13"});	
			// set direction arrow
			$(el).addClass("icon_down");
			$(el).removeClass("icon_up");			
			panel_on = true;
			is_paused = true;
		}
}


	





/**
* this funciont changes the current slide to the slide number passed in as an argument
* this is where the transition takes place. It transisions out the current slide's div
* then takes the 'active' class from the sidebar buttons and then from the numbered nav buttons
* then applies the opposite procedure to the next slide
*/
function navigateToPage(p_page)
{
	// hide the current slide and remove active class
	$(".rotator-page"+current_slide).fadeOut('slow');
	$("#b"+current_slide).removeClass("active");
	$(".rotator-nav::eq("+current_slide+")").removeClass("active");
	
	// set the current slide to the slide in the argument
	current_slide = p_page;
		
	// give the new button the active class and set it to display
	$(".rotator-page"+current_slide).fadeIn('slow');
	$("#b"+current_slide).removeClass("hover").addClass("active");
	$(".rotator-nav::eq("+current_slide+")").addClass("active");
	//hide the slidepanel if its open
	panel_on = true;
	toggleSlide("#rotator-slider-toggle-bar")
	
	// now set the first panel btn to have a different top when selected
	if(p_page == 1)
	{
		$(".rotator-right .top").addClass("selected");
	}else
	{
		$(".rotator-right .top").removeClass("selected");
	}
	
}