/*
* Nag user panel
* 
*/
(function($) { 
$.ti.nag = {
    
    nag: true,
    
	times: {
		between: 5000, // Time between shows
		fade: 2000, // Time for fades
		slide: 2000, // Time for slides
		rest: 5000 // Time that we rest at the end of the animation for the the user to read
	},
    
	html:	$(['<div id="howTo" style="left:-9999px">',
				'<ul class="how-to">',
					'<li class="explore">',
						'<div id="cover0"></div>',
						'<h3> 1: Explora Turismo de Irlanda</h3>',					
						'<p> Pincha en las pestañas de tu plan de viaje para añadir a tu lista </p>',
					'</li>',
					'<li class="add">',
						'<div id="cover1"></div>',
						'<h3> 2: Crea tu viaje</h3>',					
						'<p> Abre el plan y mete elementos de tu lista </p>',
					'</li>',
					'<li class="expand">',
						'<div id="cover2"></div>',
						'<h3> 3: Guardar; Compartir</h3>',
						'<p> Planifica tu viaje con amigos e inspira a otros</p>',
					'</li>',
				'</ul>',
			'</div>'].join('')),
	
	init: function() {
		var delay;
		if(this.nag) {
			this.list.items = $('li', this.html);
			this.list.length = this.list.items.length;			
			delay = setTimeout(function() {$.ti.nag.show();}, $.ti.nag.times.between);
			$('#itPanel').click($.ti.nag.kill);
		}
	},
	
	list: {
		items: null,
		length: 0
	},
	
	setCovers: function() {
		var count;
		for (count = 0; count < this.list.length; count += 1) {
			$('#cover' + count, this.html).css({
				"height": $(this.list.items[count]).outerHeight(),
				"opacity": 0.6
			});	
		}		
	},
	
	show: function() {
		if(this.nag) {
			$(this.html).appendTo('#bagContainer');
			$.ti.nag.setCovers();
			$(this.html).height($('ul', '#howTo').outerHeight())
				.hide()
				.css({"left":"0"})
				.fadeIn(this.times.fade, function() {
					$.ti.nag.animInit();				
				});
            //IE6 bug fix
            $('select#showMe').fadeOut('slow');
		}
	},
	
	// Covers the first stage of the nag animation - the initial slide down over the first list item
	animInit: function() {				
		$('#howTo').append('<div id="animatedBg"></div>');
		
		$('#animatedBg').animate({
			"height": $(this.list.items[0]).outerHeight()
		}, this.times.slide, 'easeInExpo', function(){
				$.ti.nag.clearCover(0);
			}
		);
	},
	
	// Fade out and remove the "cover" div for the list item
	clearCover: function(index) {
		$('#cover' + index).animate({
				"opacity": 0
			}, this.times.fade, function() {
					index = (index + 1);
					if(index < $.ti.nag.list.length) {
						$.ti.nag.animate(index);
					} else {
						$.ti.nag.animEnd(index);
					}
				}
		);
	},
	
	// Second step of animation - slide down over 2nd and remaining list items
	animate: function(index) {
		var css = {
			top: parseInt($('#animatedBg').css('top'), 10) + $(this.list.items[(index -1)]).outerHeight(),
			height: $($.ti.nag.list.items[index]).outerHeight()
		};
		
		$('#animatedBg').animate(css, this.times.slide, 'easeInExpo', function() {
				$.ti.nag.clearCover(index);
			});
	},
	
	// Final animation step.
	animEnd: function(index) {
		var top = parseInt($('#animatedBg').css('top'), 10) + $(this.list.items[(index -1)]).outerHeight();
		$('#animatedBg').animate({
				"top": top
			}, this.times.slide, 'easeInExpo', function() {
				var wait = setTimeout(function(){$.ti.nag.hide();}, $.ti.nag.times.rest);
			});
	},
	
	// Hide the panel
	hide: function() {		
		var css = {
			"top": 0,
			"height": $(this.list.items[0]).outerHeight()
		};		
		
		$('#howTo').fadeOut(this.times.fade, function(){
				$('#animatedBg').css(css).remove();
				$('#howTo').remove().show();
			});
            
      	//this fixes an IE6 bug 
		$('select#showMe').fadeIn('slow');
		this.goAgain();		
	},
	
	goAgain: function() {
		var delay = setTimeout(function() {$.ti.nag.show();}, $.ti.nag.times.between);			
	},
	
	kill: function() {
		if($.ti.nag.nag === true) {
			$.ti.nag.nag = false;
			$.ti.nag.hide();	
		}		
	}
};
})(jQuery);