//Slider Widget
var j = 1;
var a = 1;
var play = 1;
var pause = 0;
var timer;
var timeSlide = 2;
var animate = true;
var startPointSlide = "890px";

jQuery(function(){
	jQuery("div.csw").prepend("<p class='loading'>Loading...<br /><img src='images/widgets/ajax-loader.gif' alt='loading...'/ ></p>");
});

jQuery.fn.slider = function(){
	return this.each(function(){
		startTimer();
		
		var container = jQuery(this);
	
		container.find("p.loading").remove();
		
		container.removeClass("csw");
		
		container.find("div#panel_1").css("left");

		// count the number of panels in the widget
		var countPanel = container.find("div.panel").size();
		
		// Set the first panel to view within the window when page is refreshed
		$("#panel_1").css("left", "0px");
		
		if (play == 1) {
			img = '/images/widgets/pause_out.png';
		}
		
		// Display the play button
		jQuery(this).before("<div id='playPause' style='cursor: pointer;'><img id='playBtn' onmouseover='playBtnMouseOver();' onmouseout='playBtnMouseOut()' onclick='playPauseBtn(" + true + ");' src='"+ img +"' alt='' title='' /></div>");
		
		// Add the tabs to click for another article
		jQuery(this).before("<div id='tab'><ul><\/ul><\/div>");
		jQuery(this).find("div.panel").each(function(n){
			
			// Start the array with 1 not 0
			n = n+1;
			
			// Set the first tab to be selected
			var selected;
			if (n == 1) {
				selected = 'style="background: #EE820F"';
			} else {
				selected = '';
			}
			
			// Add the li tags to the div#tab
			jQuery("div#tab" + " ul").append("<li onclick='slide(" + n + ");' class='tab' id='tab_"+ n +"' " + selected +"></li>");
		});
	});
};

var slide = function(j)
{
	if (animate == true) {
		animation(j);
	} else {
		return false;
	}
}

var animation = function(j)
{	
	if (a == j) {
		return false;
	}
	
	animate = false;
	
	// Stop the timer function
	stopTimer(0);
	
	// count the number of panels in the widget
	var countPanel = jQuery("div#slider").find("div.panel").size();

	// Animate the previous article opacity from 1 to 0 
	$("#panel_" + a).animate(
			{opacity:0}, {
				duration: 800,
				complete: function(){
				
					// Set the previous selected tab to no background
					$("#tab_" + a).css("background", "none");
					
					// Set the selected tab with a background colour
					$("#tab_" + j).css("background", "#EE820F");
				}
			});

	// Animate the next article from right to left
	$("#panel_" + j).animate(
			{'left': '0'},{
				duration: 1000,
				ease: 'easeOutCirc',
				complete: function(){
					$("#panel_" + a).css("left", startPointSlide);
					$("#panel_" + a).animate({opacity:1}, 0);
					timeSlide = j;
					timeSlide++;
					if (timeSlide > countPanel) {
						timeSlide = 1;
					}
					
					// Start the timer function if the play button is active
					if (play) {
						startTimer();
					}
					a = j;
					animate = true;
				}
			});
};

// Change play button image
var playPauseBtn = function(attr)
{
	if (attr) {
		if (play) {
			play = 0;
			stopTimer();
			$("#playBtn").attr('src', '/images/widgets/play_over.png');
		} else {
			play = 1;
			startTimer();
			$("#playBtn").attr('src', '/images/widgets/pause_over.png');
		}
	}
}

var playBtnMouseOver = function()
{
	if (play) {
		$("#playBtn").attr('src', '/images/widgets/pause_over.png');
	} else {
		$("#playBtn").attr('src', '/images/widgets/play_over.png');
	}
};

var playBtnMouseOut = function()
{
	if (play) {
		$("#playBtn").attr('src', '/images/widgets/pause_out.png');
	} else {
		$("#playBtn").attr('src', '/images/widgets/play_out.png');
	}
};

// Stop timer function
var stopTimer = function(playPause)
{	
	clearTimeout(timer);
};

// Start timer function
var startTimer = function()
{
	timer = setTimeout("slide(timeSlide)", 8000); 
	return timer;
};