/**
 * Event handlers and functions specific for the 'Switcher' module
 * @author Andres Pagella <andres@minorstudios.com>
 */

// Main Switcher class definition
var Switcher;
if (!Switcher) Switcher = {};
if (!Switcher.run) Switcher.run = {};
if (!Switcher.loop) Switcher.loop = {};

var IMAGE_PATH = '/r/i/buttons/';
var anmtSpeed = 'medium';
var trnstSpeed = 6500; // ms.
var currentSlide = 1;
var play = true;
var arrMyContent = new Array();


var arrBannerContent0 = new Array();
var arrBannerContent1 = new Array();
var arrBannerContent2 = new Array();
var arrBannerContent3 = new Array();
var bannerSpeed = 2000; // ms.
var play = true ;
var BannerHeight = 250; 

var first = 0;
var speed = 700;
var pause = 10000;

$('.banner ul.Bdisplay').html('');


/**
 * Switcher.load
 * @summary Preload images and content
 * @param void
 * @return void
 */
Switcher.load = function() {
	$('#switcher .display').html('');

	// Call the interceptor that will return the array with all the content.
	// I'm just calling "getSwitcherContent" to leave it with a relative path, but in reality it should be an 
	// absolute path to http://www.atmosphir.com/json/getSwitcherContent or something like that.
	
	$.getJSON('/getSwitcherContent',
	    function(data) {
	        try {
    	        for (var i = 0; i < data.length; i++) {
    	            arrMyContent.push({src: data[i].imageUrl, url: data[i].url});
    	        }
    	        
	        
    	        // Run the proposal
            	Switcher.run.prop3();
            	Switcher.run();
    	    } catch (e) { ;; }
	    }
	);
    
};

/**
 * Switcher.loop
 * @summary Play the slides
 * @param void
 * @return void
 */
Switcher.loop = function() {
	setInterval(function() {
		if (play) {
			Switcher.run.next();
		}
	}, trnstSpeed);
};

/**
 * Switcher.loop.switchOnOff
 * @summary Transition playing control
 * @param void
 * @return void
 */
Switcher.loop.switchOnOff = function() {
	if (play) {
		$('#playButton').val('Play');
		play = false;
	} else {
		$('#playButton').val('Stop');
		play = true;
	}
};

/**
 * Switcher.run
 * @summary Run the proposal
 * @param void
 * @return void
 */
Switcher.run = function() { 
	// Unhide the control buttons
	$('.controls').removeClass('dn');
	
	$('#transitionControl').removeClass('dn');
	
	// Start main loop
	Switcher.loop();
}

/**
 * Switcher.run.next
 * @summary Next slide
 * @param void
 * @return void
 */
Switcher.run.next = function() { 
	if (currentSlide < arrMyContent.length) {
		$('#img' + currentSlide).fadeOut( anmtSpeed );
	} else {
		for (var i = 0; i < arrMyContent.length; i++) {
			$('#img' + i).fadeIn( anmtSpeed );	
		}
	}
	
	currentSlide = (currentSlide < arrMyContent.length) ? (currentSlide + 1) : 1;
}

/**
 * Switcher.run.prev
 * @summary Previous slide
 * @param void
 * @return void
 */
Switcher.run.prev = function() { 
	if (currentSlide > 1) {
		$('#img' + (currentSlide - 1)).fadeIn( anmtSpeed );
	} else {
		for (var i = 0; i < arrMyContent.length; i++) {
			$('#img' + i).fadeOut( anmtSpeed );	
		}
	}
	
	currentSlide = (currentSlide > 1) ? (currentSlide - 1) : arrMyContent.length;
}

/**
 * Switcher.run.prop3
 * @summary Set initial conditions for proposal 3 (Fading)
 * @param void
 * @return void
 */
Switcher.run.prop3 = function() {
	$('#switcher .display').html('');
	
	var sHtml = '';	
	
	for (var i = 0; i < arrMyContent.length; i++) {
		sHtml = '<div class="image" id="img' + (i + 1) + '" style="left: 0px; position: absolute; z-index: ' + (10 - i) + '">'
			  + '	<a href="' + arrMyContent[i].url + '">'
			  + '		<img src="' + arrMyContent[i].src + '" alt="" />'
			  + '	</a></div>';
		
			
		$('#switcher .display').append(sHtml);
	}
};


$(document).ready(function() {

	$.getJSON('/getBanner0Content',
		    function(data) {
				if(data !=''){
			        try {
		    	        for (var i = 0; i < data.length; i++) {
		    	            arrBannerContent0.push({src: data[i].imageUrl, url: data[i].url});
		    	        }
		    	        // fill the list with the content
		    	        $('#banner0.banner ul.Bdisplay').html('');
		    	    	var newHtml0 = '';	
		    	    	for (var i = 0; i < arrBannerContent0.length; i++) {
		    	    		newHtml0 = '<li class="image">'
		    	    			  + '	<a href="' + arrBannerContent0[i].url + '">'
		    	    			  + '		<img src="' + arrBannerContent0[i].src + '" alt="" />'
		    	    			  + '	</a></li>';
		    	    		$('#banner0.banner ul.Bdisplay').append(newHtml0);
		    	    	}
		    	    } catch (e) { ;; }
				}
		    }
	);
	

	$.getJSON('/getBanner1Content',
		    function(data) {
				if(data !=''){
			        try {
		    	        for (var i = 0; i < data.length; i++) {
		    	            arrBannerContent1.push({src: data[i].imageUrl, url: data[i].url});
		    	        }
		    	        // fill the list with the content
		    	        $('#banner1.banner ul.Bdisplay').html('');
		    	    	var newHtml1 = '';	
		    	    	for (var i = 0; i < arrBannerContent1.length; i++) {
		    	    		newHtml1 = '<li class="image">'
		    	    			  + '	<a href="' + arrBannerContent1[i].url + '">'
		    	    			  + '		<img src="' + arrBannerContent1[i].src + '" alt="" />'
		    	    			  + '	</a></li>';
		    	    		$('#banner1.banner ul.Bdisplay').append(newHtml1);
		    	    	}
		    	    } catch (e) { ;; }
				}
		    }
	);
	
	$.getJSON('/getBanner2Content',
		    function(data) {
				if(data !=''){
			        try {
		    	        for (var i = 0; i < data.length; i++) {
		    	            arrBannerContent2.push({src: data[i].imageUrl, url: data[i].url});
		    	        }
		    	        // fill the list with the content
		    	        $('#banner2.banner ul.Bdisplay').html('');
		    	    	var newHtml2 = '';	
		    	    	for (var i = 0; i < arrBannerContent2.length; i++) {
		    	    		newHtml2 = '<li class="image">'
		    	    			  + '	<a href="' + arrBannerContent2[i].url + '">'
		    	    			  + '		<img src="' + arrBannerContent2[i].src + '" alt="" />'
		    	    			  + '	</a></li>';
		    	    		$('#banner2.banner ul.Bdisplay').append(newHtml2);
		    	    	}
		    	    } catch (e) { ;; }
				}else{
					//console.log('no data')
				}
		    }
	);
	

	
	$.getJSON('/getBanner3Content',
		    function(data) {
				if(data !=''){
			        try {
		    	        for (var i = 0; i < data.length; i++) {
		    	            arrBannerContent3.push({src: data[i].imageUrl, url: data[i].url});
		    	        }
		    	        // fill the list with the content
		    	        $('#banner3.banner ul.Bdisplay').html('');
		    	    	var newHtml3 = '';	
		    	    	for (var i = 0; i < arrBannerContent3.length; i++) {
		    	    		newHtml3 = '<li class="image">'
		    	    			  + '	<a href="' + arrBannerContent3[i].url + '">'
		    	    			  + '		<img src="' + arrBannerContent3[i].src + '" alt="" />'
		    	    			  + '	</a></li>';
		    	    		$('#banner3.banner ul.Bdisplay').append(newHtml3);
		    	    	}
		    	    } catch (e) { ;; }
				}else{
					//console.log('no data')
				}
		    }
	);
	
	// Reset the banner slide count
	//currentBanner = 1;
	setInterval("removeFirst('#banner0')", pause);
	setInterval("removeFirst('#banner1')", pause);
	setInterval("removeFirst('#banner2')", pause);
	setInterval("removeFirst('#banner3')", pause);


	Switcher.load();

	// Reset the slide count
	
	currentSlide = 1;
	
	// Detect clicks on the prev/next buttons
	$('#switcher .next').click(function() { Switcher.run.next(); });
	$('#switcher .prev').click(function() { Switcher.run.prev(); });
	
	// Detect mouseover on the prev/next buttons
	$('#switcher .next').mouseover(function() { $(this).attr('src', IMAGE_PATH + 'arrow-right-hover.png'); });
	$('#switcher .prev').mouseover(function() { $(this).attr('src', IMAGE_PATH + 'arrow-left-hover.png'); });
	
	// Detect mouseouts on the prev/next buttons
	$('#switcher .next').mouseout(function() { $(this).attr('src', IMAGE_PATH + 'arrow-right.png'); });
	$('#switcher .prev').mouseout(function() { $(this).attr('src', IMAGE_PATH + 'arrow-left.png'); });
});


function removeFirst(number){
	first = $(number+'.banner ul.Bdisplay li:first').html();
	$(number+'.banner ul.Bdisplay li:first').animate({marginTop: '-250px'}, speed, function() {$(this).remove();});
	addLast(first, number);
}
function addLast(first, number){
	$(number+'.banner ul.Bdisplay ').append('<li class="image">'+first+'</li>');
	$(number+'.banner ul.Bdisplay li:last').animate({marginTop: '0px'}, speed)
}