// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
var delayLength = 6000;
function disableBut(){
	$( "#play-button" ).button('disable');
	$( "#prev-button" ).button('disable');
	$( "#next-button" ).button('disable');
};
function enableBut(){
	$( "#play-button" ).button('enable');
	$( "#prev-button" ).button('enable');
	$( "#next-button" ).button('enable');
};
function doMove(panelWidth, tooFar, dir) {
	disableBut();
	
	var leftValue = $("#mover").css("left");
	
	// Fix for IE
	if (leftValue == "auto") { leftValue = 0; };
	// определим текущий номер
	var curId = parseInt(-1 * parseInt(leftValue,10)/panelWidth,10)+1;
	
	if (dir == 'forward'){
		var movement = parseFloat(leftValue, 10) - panelWidth;
	}else{
		var movement = parseFloat(leftValue, 10) + panelWidth;
	};
	
	if (movement == tooFar) {
		movement = 0;
	}
	else if (movement > 0) {
		movement = tooFar + panelWidth;	
	};
	// определим следующий номер
	var nextId = parseInt(-1 * parseInt(movement,10)/panelWidth,10)+1;
	
	$("#img-"+curId).animate({
		"top": -200
	},function() {
					$("#img-"+nextId).animate({
						"top": -200
					},function() {
									$("#mover").animate({
										"left": movement
									},function() {
													$("#img-"+curId).animate({
														"top": 20
													},function(){
																	$("#img-"+nextId).animate({
																		"top": 20
																	},function(){
																					enableBut();
																				}
																	);
																}
													);
												 }
									);
								}
					);
				 }
	);
}

$(function(){
	
    var $slide1 = $("#slide-1");

	var panelWidth = $slide1.css("width");
	var panelPaddingLeft = $slide1.css("paddingLeft");
	var panelPaddingRight = $slide1.css("paddingRight");

	panelWidth = parseFloat(panelWidth, 10);
	panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
	panelPaddingRight = parseFloat(panelPaddingRight, 10);

	panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
	
	var numPanels = $(".slide").length;
	var tooFar = -(panelWidth * numPanels);
	var totalMoverwidth = numPanels * panelWidth;
	$("#mover").css("width", totalMoverwidth);

	var playStop = 'stop';
	
	$("#slider").append('<button id="prev-button">previous</button>');
	$("#slider").append('<button id="play-button">stop</button>');
	$("#slider").append('<button id="next-button">next</button>');
	
	$( "#prev-button" ).button({
            icons: {
                primary: "ui-icon-seek-prev"
            },
            text: false
        });
	$( "#play-button" ).button({
            icons: {
                primary: "ui-icon-pause"
            },
            text: false
        });
	$( "#next-button" ).button({
            icons: {
                primary: "ui-icon-seek-next"
            },
            text: false
        });

	sliderIntervalID = setInterval(function(){
		doMove(panelWidth, tooFar, 'forward');
	}, delayLength);
	
	function togglePlayStop(id){
		//var but = document.getElementById(id);
		if (playStop == 'stop'){
			clearInterval(sliderIntervalID);
			$( "#"+id ).button("option","icons",{primary: 'ui-icon-play'});
			playStop = 'start';
		}else{
			sliderIntervalID = setInterval(function(){
				doMove(panelWidth, tooFar,'forward');
			}, delayLength);
			$( "#"+id ).button("option","icons",{primary: 'ui-icon-pause'});
			playStop = 'stop';
		};
	}
	
	function turnOff(id){
		if (playStop == 'stop'){
			clearInterval(sliderIntervalID);
			$( "#"+id ).button("option","icons",{primary: 'ui-icon-play'});
			playStop = 'start';
		};
	}
	
	$("#next-button").click(function(){
		turnOff("play-button");
		doMove(panelWidth, tooFar, 'back');
	});
	$("#prev-button").click(function(){
		turnOff("play-button");
		doMove(panelWidth, tooFar, 'forward');
	});
	$("#play-button").click(function(){
		togglePlayStop("play-button");
	});
});