/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/
var i=1;
// Speed of the animation
var animationSpeed = 600;

// Type of easing to use; http://gsgd.co.uk/sandbox/jquery/easing/
var easing = "easeInOutCubic";

/*
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="${src_map}"></iframe>
*/
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"big_title" : "Joan as POLICE WOMAN",
		"big_tile_image" : "title_joan.png",
		"image_titolo" : "titolo_joan.png",
		"title" : "Anfiteatro Conchiglia\nsestri levante",
		"cssclass" : "joan",
		"image" : "bg_joan.jpg",
		"text" : "Nella sua carriera ha suonato con Lou Reed, Tanya Donelly, Sheryl Crow, Sparklehorse, Dave Gahan, Elton John, the Scissor Sisters, Antony and the Johnsons, Guillemots, Rufus Wainwright, per citarne alcuni, prima di iniziare una esaltante carriera solista, che l'ha portata al terzo disco, The Deep Field. ",
		"url" : 'javascript:mostraDiv("map_joan");',
		"urltext" : 'COME ARRIVARE',
		"link_prevendita" : "http://www.mojotic.it/?page_id=226",
		"src_map" : "http://maps.google.it/maps?hl=it&amp;safe=off&amp;client=firefox-a&amp;q=sestri+levante+via+salita+alla+penisola&amp;ie=UTF8&amp;hq=via+salita+alla+penisola&amp;hnear=Sestri+Levante+Genova,+Liguria&amp;ll=44.268805,9.391937&amp;spn=0.010756,0.018239&amp;z=15&amp;output=embed"
	}, {
		"big_title" : "Silent Disco - SHHHHHHH!!",
		"big_tile_image" : "title_silent.png",
		"image_titolo" : "titolo_silent.png",
		"title" : "BAIA DEL SILENZIO sestri levante",
		"cssclass" : "silent",
		"image" : "bg_silent.jpg",
		"text" : "Appuntamento fisso dell'estate a Sestri Levante, torna, puntuale come ogni anno, Shhhhhhh!! 2011, la festa più silenziosa dell'anno. Una spiaggia, 2000 cuffie, 2 dj che suonano musiche diverse, 2000 corpi che ballano. E non vola una mosca!",
		"url" : 'javascript:mostraDiv("map_silent");',
		"urltext" : 'COME ARRIVARE',
		"link_prevendita" : "http://www.mojotic.it/?page_id=226",
		"src_map" : "http://maps.google.it/maps?hl=it&amp;safe=off&amp;client=firefox-a&amp;q=sestri+levante+via+salita+alla+penisola&amp;ie=UTF8&amp;hq=via+salita+alla+penisola&amp;hnear=Sestri+Levante+Genova,+Liguria&amp;ll=44.268805,9.391937&amp;spn=0.007683,0.014977&amp;z=15&amp;output=embed" 
	}
];

// 0-based index to set which picture to show first
var activeIndex = 0;
var imageIndex;

$(function() {

	// Variable to store if the animation is playing or not
	var isAnimating = false;

	// Register keypress events on the whole document
	$(document).keypress(function(e) {
		
		// Keypress navigation
		// More info: http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed
		if (!e.which && ((e.charCode || e.charCode === 0) ? e.charCode: e.keyCode)) {
		    e.which = e.charCode || e.keyCode;
		}
		
		var imageIndex = e.which - 49; // The number "1" returns the keycode 49. We need to retrieve the 0-based index.
		startAnimation(imageIndex);
	});

	// Add the navigation boxes
	$.template("navboxTemplate", "<img class='img_title' src='images/${image_titolo}' alt='${big_title}'><div class='navbox ${cssclass}'><div id='map_${cssclass}' class='map_container'><iframe width=\"380\" height=\"380\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"${src_map}\"></iframe></div><img src=\"images/${big_tile_image}\" alt=\"${big_title}\"><ul></ul><h2>${title}</h2><p>${text}<br><br><a href='${link_prevendita}' title='Prevendite'>Prevendite</a><br><a href='${url}' title='${title}'>${urltext}</a></p><p class='bottom'></p><br><br><br><a style='float:left; margin:20px 0; border:0;' href='http://www.jagershot.it' title='Jager Music'><a style='float:left; margin:20px 0; border:0;' href='http://www.jagermusic.it/' title='Jager Music'><img src='images/jagerlogo.png' border='0'></a><a style='float:left; margin:20px 0; border:0;' href='http://www.opsstudio.com' title='Proudly made by Ops! Studio'><img src='images/ops.png' border='0'></a>&nbsp;&nbsp;<a style='float:left; margin:20px 0; border:0;' href='http://re-setyourspace.com/' title='Re-Set YourSpace'><img src='images/reset.png' border='0'></a></div>");
	$.tmpl("navboxTemplate", photos).appendTo("#navigationBoxes");

	// Add the navigation, based on the Photos
	// We can't use templating here, since we need the index + append events etc.
	var cache = [];
 	for(var i = 1; i < photos.length + 1; i++) {
		$("<a />")
			.data("index", i-1)
			.attr("title", photos[i-1].big_title)
			.attr("id", photos[i-1].cssclass)
			.click(function() {
				showImage($(this));
			})
			.appendTo(
				$("<li />")
					.appendTo(".navbox ul")
			);
			
		// Preload the images
		// More info: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
		var cacheImage = $("<img />").attr("src", "images/" + photos[i-1]);
		cache.push(cacheImage);
	}
	
	// Set the correct "Active" classes to determine which navbox we're currently showing
	$(".navbox").each(function(index) {
		var parentIndex = index + 1;
		$("ul li a", this).each(function(index) {
			if(parentIndex == (index + 1)) {
				$(this).addClass("active");
			}
		});
	});
	
	// Hide all the navigation boxes, except the one from current index
	$(".navbox:not(:eq(" + activeIndex +"))").css('left', '-650px');
	$(".img_title:not(:eq(" + activeIndex +"))").css('right', '4500px');
	
	// Set the proper background image, based on the active index
	$("<div />")
		.css({ 'background-image' : "url(images/" + photos[activeIndex].image + ")" } )
		.prependTo("#pictureSlider");
	
	//
	// Shows an image and plays the animation
	//
	var showImage = function(docElem) {
		// Retrieve the index we need to use
		var imageIndex = docElem.data("index");
		
		startAnimation(imageIndex);
	};
	
	//
	// Starts the animation, based on the image index
	//
	var startAnimation = function(imageIndex) {
		// If the same number has been chosen, or the index is outside the
		// photos range, or we're already animating, do nothing
		if(activeIndex == imageIndex ||
			imageIndex > photos.length - 1 ||
			imageIndex < 0 ||
			isAnimating) {
			return;
		}
		
		isAnimating = true;
		animateNavigationBox(imageIndex);
		slideBackgroundPhoto(imageIndex);
		bg_displayed();
		
		// Set the active index to the used image index
		activeIndex = imageIndex;		
	};
	
	//
	// Animate the navigation box
	//
	var animateNavigationBox = function(imageIndex) {
	
		// Hide the current navigation box
		$(".navbox").eq(activeIndex)
			.css({ 'z-index' : '998' }) // Push back
			.animate({ left : '-650px' }, animationSpeed, easing);
		$(".img_title").eq(activeIndex)
			.css({ 'z-index' : '998' }) // Push back
			.animate({ right : '4500px' }, 900, easing);
		
		// Show the accompanying navigation box
		$(".navbox").eq(imageIndex)
			.css({ 'z-index' : '999' }) // Push forward
			.animate({ left : '0px' }, animationSpeed, easing);
		$(".img_title").eq(imageIndex)
			.css({ 'z-index' : '999' }) // Push forward
			.animate({ right : '50px' }, 900, easing);
	};
	
	//
	// Slides the background photos
	//
	var slideBackgroundPhoto = function(imageIndex) {
		// Retrieve the accompanying photo based on the index
		var photo = photos[imageIndex];

		// Create a new div and apply the CSS
		$("<div />")
			.css(
				{ 	'left' : '-2000px',
					'background-image' : "url(images/" + photo.image + ")" } )
			.addClass(photo.cssclass)
			.prependTo("#pictureSlider");

		// Slide all the pictures to the right
		$("#pictureSlider div").animate({ left : '+=2000px' }, animationSpeed, easing, function() {
			// Remove any picture that is currently outside the screen, only the first is visible
			$("#pictureSlider div:not(:first)").remove();
			
			// Animation is complete
			isAnimating = false;
		});
	};
	
});
function mostraDiv(id){
	var altezza = $("#"+id).css('height');
	$(".map_container").animate({ height : '0px' }, animationSpeed, easing);
	if(altezza=="250px") return;
	$("#"+id).animate({ height : '250px' }, animationSpeed, easing);
}

function bg_displayed(){
	var ratio = (800/557);
	var altezzaBody = $(window).height();
	var larghezzaBody = $(window).width();
	var ratioBody = (larghezzaBody/altezzaBody);
	if(ratioBody>=ratio) $('#pictureSlider div').css('background-size', '100% auto');
	else if(ratioBody<ratio) $('#pictureSlider div').css('background-size', 'auto 100%');
}

function cambiaCanale(){
	if(i%2==0) $('a#silent').trigger('click');
	else $('a#joan').trigger('click');	
	i++;
}