/**
 * Bildanimation
 *
 * @author web@meteotest.ch>
 */

var play = 0;
var initialValue = 30;
var currentValue = initialValue;
var timer;
var imgsLeft = new Array();
var imgsRight = new Array();
var tooltipps = new Array();
var milliesToWait = 250;

var play2 = 0;
var currentValue2 = 0;
var timer2;
var imgsLeft2 = new Array();
var imgsRight2 = new Array();
var tooltipps2 = new Array();
var milliesToWait2 = 1000;

/**
 * Datepicker configuration
 */
$.datepicker.setDefaults({
    maxDate  : '0',
    duration : 'fast',
    hideIfNoPrevNext: true,
    dateFormat: 'yy.mm.dd'
});

/**
 * Ready function
 */
$(document).ready(function () {
    // Setup slider and click events
	$('#mtslider').slider({
		value: currentValue,
		min: 0,
		max: 144,
		step: 1,
		slide: sliderMoved
	});
	$('#mtbutton').click(togglePlay);
	
    // get images of today
    getImages(false);
	
	// set slider position to current image
	$('#mtslider').slider('option', 'value', 144);
    
    // Setup datePicker
	$("#chooseDate").datepicker({ minDate: new Date(2009, 9 - 1, 1) });
    
	// Get images of selected day when submitting form
	$("#submit_date").click(function() {
        getImages(true);
		togglePlay();
        return false;
    });
	
	/*
	 * Nachmittagbilder
	 */
    // Setup slider and click events
	$('#mtslider2').slider({
		value: 1,
		min: 0,
		max: 1,
		step: 1,
		slide: sliderMoved2
	});
	$('#mtbutton2').click(togglePlay2);
	
    // get images of today
    getImages2(false);
	
    
}); // END of document.ready

/**
 * Toggle the play functionality
 * 
 */
function togglePlay() {
	play = 1 - play;
	
	if(play) {
		$('#mtbuttonimg').attr('src', 'images/pause.png');
		timer = setInterval('showNextImage()', milliesToWait);
	} else {
		$('#mtbuttonimg').attr('src', 'images/play.png');
		clearInterval(timer);
	}
	$('#mtslider').slider('option', 'max', imgsLeft.length);
    $('#mtslider').slider('option', 'value', currentValue);
}
function togglePlay2() {
	play2 = 1 - play2;
	
	if(play2) {
		$('#mtbuttonimg2').attr('src', 'images/pause.png');
		timer2 = setInterval('showNextImage2()', milliesToWait2);
	} else {
		$('#mtbuttonimg2').attr('src', 'images/play.png');
		clearInterval(timer2);
	}
	$('#mtslider2').slider('option', 'max', (imgsLeft2.length - 1));
    $('#mtslider2').slider('option', 'value', currentValue2);
}

/**
 * Treat slider changes
 * 
 * @param event
 * @param ui
 */
function sliderMoved(event, ui) {
	if(play) {
		togglePlay();
	}
	
	showImage(ui.value);
}
function sliderMoved2(event, ui) {
	if(play2) {
		togglePlay2();
	}
	
	showImage2(ui.value);
}

/**
 * Show image 
 * 
 * @param int number
 */
function showImage(number) {
	var fileLeft = imgsLeft[number];
    var fileRight = imgsRight[number];
    var tt = tooltipps[number];
    $('#tt').empty().prepend(tt);
    $('#leftImage').attr('src', fileLeft);
    $('#rightImage').attr('src', fileRight);
    currentValue = number;
	$('#mtslider').slider('value', number);
}
function showImage2(number) {
	var fileLeft2 = imgsLeft2[number];
    var fileRight2 = imgsRight2[number];
    var tt = tooltipps2[number];
    $('#tt2').empty().prepend(tt);
    $('#leftImage2').attr('src', fileLeft2);
    $('#rightImage2').attr('src', fileRight2);
    currentValue2 = number;
	$('#mtslider2').slider('value', number);
}
 
 /**
  * Show next image and preload over-next
  */
function showNextImage() {
	var nextValue = calcNextValue(currentValue);	
	showImage(nextValue);
	
	// Preload next image
	nextValue = calcNextValue(nextValue);
	var preloadedImage = new Image();
	preloadedImage.src = imgsLeft[nextValue]; 
}
function showNextImage2() {
	var nextValue2 = calcNextValue2(currentValue2);	
	showImage2(nextValue2);
	
	// Preload next image
	nextValue2 = calcNextValue2(nextValue2);
	var preloadedImage2 = new Image();
	preloadedImage2.src = imgsLeft2[nextValue2]; 
}

/**
 * Calculate next value
 * 
 * @param int value
 * @return int nextValue
 */
function calcNextValue(value) {
	var nextValue = value + 1;
	if(nextValue == imgsLeft.length) {
		nextValue = 0;
	}
	
	return nextValue;
}
function calcNextValue2(value) {
	var nextValue2 = value + 1;
	if(nextValue2 == imgsLeft2.length) {
		nextValue2 = 0;
	}
	
	return nextValue2;
}

/**
 * Fetch image names from server
 * 
 *  @param boolean dateFromFormField
 */
function getImages(dateFromFormField)
{
	myDayToShow = 'heute';
	if (dateFromFormField == true) {
		myDayToShow = $("#chooseDate").val();
	}
	if(play) {
        togglePlay();
    }
    $.getJSON("getImages.php", 
                   { dayToShow: myDayToShow, side: 'left' },
                   function(data) {
                    imgsLeft = new Array();
                    $.each(data.items, function(i,item){
                        imgsLeft[i] = item.filepath;
                    });
                   });
    $.getJSON("getImages.php", 
                   { dayToShow: myDayToShow, side: 'right' },
                   function(data) {
                    imgsRight = new Array();
                    $.each(data.items, function(i,item){
                        imgsRight[i] = item.filepath;
                        tooltipps[i] = item.tooltipp;
                    });
                    var myNum = imgsRight.length - 1;
        			showImage(myNum);
                   });
    currentValue = initialValue;
}
function getImages2()
{
	myDayToShow2 = 'heute';
	if(play2) {
        togglePlay2();
    }
    $.getJSON("getImages2.php", 
                   { dayToShow: myDayToShow2, side: 'left' },
                   function(data) {
                    imgsLeft2 = new Array();
                    $.each(data.items, function(i,item){
                        imgsLeft2[i] = item.filepath;
                    });
                   });
    $.getJSON("getImages2.php", 
    		{ dayToShow: myDayToShow2, side: 'right' },
    		function(data) {
    			imgsRight2 = new Array();
    			$.each(data.items, function(i,item){
    				imgsRight2[i] = item.filepath;
                    tooltipps2[i] = item.tooltipp;
    			});

    			// set slider position to current image
    			var myNum = imgsRight2.length - 1;
    			showImage2(myNum);
    			$('#mtslider2').slider('option', 'max', myNum);
    			$('#mtslider2').slider('option', 'value', myNum);
    		});
    currentValue2 = (imgsRight2.length - 1);
}