//------------------------------------
//	HOMEPAGE.JS
//	Author: 	Engage Interactive
//	Requires:	jquery 1.4.2
//				Cufon
//				Trade Gothic font
//	Version:	0.1
//------------------------------------

////////////////////////////
// CUFON

/*Cufon.replace('#promotions:not(.safari) h1, #promotions:not(.safari) .link');

Cufon.replace('#locate h2',{
	textShadow: '#0c223d 1px 1px'
});

Cufon.replace('.red h2',{
	textShadow: '#4c1612 1px 1px'
});*/


////////////////////////////
// BEGIN JQUERY

$(function(){

	// Ban the moose. BAD MOOSE!
	var mooseBan = false;
	
	// Add in the decorative lines
	//$('#introduction').addLines({side:'left', skyline: true});
	//$('#four_panels').addLines({side:'right', skyline: true});
	
	
	////////////////////////////
	// FIND MY NEAREST
	
	/*resultsOpen = false;
	
	var $nearestResults = $('#results');
		
	var nearestMsg = function(html) {

		$nearestResults.html(html);
			
		Cufon.replace('#results a, #results h4',{
			textShadow: '#000 1px 1px'
		});
			
		$nearestResults.delay(2000).removeClass('loading').children().animate({top:0},600,'easeOutExpo');
		
	};*/
	
/*	$('#locate form').submit(function(e){
		e.preventDefault();

		if(!googleMapsEnabled) return false;

		$nearestResults.addClass('loading').children().animate({top:-187});
		
		if( !resultsOpen ){
			$nearestResults.animate({width:233},600,'easeInOutExpo');
		}
		
		resultsOpen = true;
		examples = '<p class="examples"><span>&bull;</span> A full UK postcode<br/><span>&bull;</span> A UK city, town or village<br/><span>&bull;</span> A UK landmark (e.g. Big Ben)</p>';
		
		var searchTerm = $(this).find('input').val();
		
		setTimeout(function() {
		
			if( searchTerm == '' ){
				nearestMsg('<div class="error"><h4>Sorry, no results&hellip;</h4><p>Why not try searching using one of the following:</p>' + examples + '</div>');
				return false;
			}
			
			findmynearest(searchTerm, {
				searchTotal: 4,
				onLondon: function() {
					nearestMsg('<div class="error"><h4>Refine your search</h4><p>We have many restaurants in London so please try and be a bit more specific.</p><p>For example, try entering a London suburb such as &lsquo;Islington&rsquo;.</p></div>');
				},
				onNoResult: function() {
					nearestMsg('<div class="error"><h4>Sorry, no results&hellip;</h4><p>Why not try searching using one of the following:</p>' + examples + '</div>');
				},
				onResult: function(locations) {
					var htmlResults = '<ul>';				
					for(var key in locations) {
						var location = locations[key];
						htmlResults += '<li><a href="/location/' + location.slug + '">' + location.name + '</a> <em>' + location.miles + ' miles</em></li>';
					}
					htmlResults += '</ul>';
					nearestMsg(htmlResults);
				}			  
			});
			
		}, 600);
		
	});*/
	
/*	$('#locate form #search').focus(function(){
		if( resultsOpen ){
			resultsOpen = false;
			$nearestResults.stop([]).animate({width:0},600,'easeInOutExpo',function(){
				$nearestResults.children().css({top:-187});
			});
		}
	});
	
	$('#results li')
		.live('mouseover', function(){
			$(this).addClass('hover').find('a,em').stop([]).animate({paddingLeft:6},120);
		})
		.live('mouseout', function(){
			$(this).removeClass('hover').find('a,em').stop([]).animate({paddingLeft:0},120);
		});
	
	$('#results li').live('click', function(){
		window.location = $(this).children('a').attr('href');
	});*/
	
	
	////////////////////////////
	// MENUS
	
	function menus(){
	
		// Variables
		var $m = $('#menus');					// Container
		var $s = $('#menus_slider');			// Slider
		var t = $('#menus .menu').size() - 1;	// Total
		var h = 187;							// Height
		var navHtml = '';						// HTML
		var i = 0;								// Count
		var c = 0;								// Current
		var d = 5000;							// Delay
		
		// Nav html
		for( i = 0; i <= t; i++ ){
			navHtml += '<li><a href="#" title="View this menu">' + ( i + 1 ) + '</a></li>';
		}
		
		// Nav
		$('<ul/>',{
			'id':'menus_nav',
			'html': navHtml
		}).appendTo($m).find('li:eq(0) a').addClass('on');
		
		$('#menus_nav').css({marginLeft: 0 - Math.round( $('#menus_nav').width() / 2 ) }).hide();
			
		// Center the heading vertically based on size
		$('#menus .menu').each(function(){
			var $a = $(this).find('article');
			$a.show().css({marginTop: 0 - Math.round( $a.outerHeight() / 2 ) });
		});
		
		$('#menus .menu').click(function(){
			window.location.href = $(this).find('a').attr('href');
		});
		
		// Slideshow
		var menuTimer = {};
		
		$m.hover(function(){
			$('#menus_nav').fadeIn(100);
			$.clearTimer(menuTimer);
		},function(){
			slideshow();
			$('#menus_nav').fadeOut(100);
		});
		
		function slideshow(){
			menuTimer = $.timer(d,function(){
				$.clearTimer(menuTimer);
				
				var num = c + 1;
				if( num > t ) num = 0;
				
				$('#menus_nav').find('li:eq(' + num + ') a').click();
				slideshow();
			});
		}
		
		slideshow();
		
		// Slide about the place
		function goTo(num){

			// Ban the moose
			mooseBan = true;
			
			// Get new y
			var y = '-' + ( num * h );
			
			// Slide to new y
			$s.animate({top:y},800,'easeInOutExpo',function(){
				// Unban the moose
				mooseBan = false;
			});
		}
		
		// Nav click
		$('#menus_nav a').click(function(){
			if( !$(this).hasClass('on') ){
				c = $(this).html() - 1;
				goTo(c);
				$(this).addClass('on').parent('li').siblings('li').children('a').removeClass('on');
			}
			return false;
		});
		
	}
	
	menus();
	
	
	////////////////////////////
	// SLIDER
	
	function promotions(){

		// Some variables
		var $p = $('#promotions');
		var $arrows = $('#arrows'); //Original
		
		////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		
		//var $arrow-right = $('#arrow-right');
		var $dots = $('#dots');
		var t = $p.find('.promotion').length - 1;
		var c = 0;
		var d = 6000;
		var browser = $.getBrowser();
		var navHtml = '';
		
		$p.find('.promotion:first').addClass('active');
		
		$p.addClass(browser).find('.active').centerTitle();
		
		for( i = 0; i <= t; i++ ){
			navHtml += '<li><a href="#">' + ( i + 1 ) + '</a></li>';
			
			if( i == t ){
				$p.find('#dots').html(navHtml).children('a').addClass('on');
				//$('#dots').css({marginLeft:'-' + ( ( 22 * ( t + 1 ) ) / 2 ) + 'px'}).hide().find('li:first a').addClass('on'); ORIGINAL
				$('#dots').hide().find('li:first a').addClass('on');
			}
		}
		
		/*$p.find('.promotion').click(function(){
			if( !$(this).hasClass('external') ) window.location.href = $(this).find('a.link').attr('href');
		});*/

		// Nav click
		$p.find('ul a').click(function(){

			if( mooseBan == false && !$(this).hasClass('on') ){
	
				mooseBan = true;
				
				var dir = 'right';
				
				if( $(this).closest('ul').attr('id') == 'arrows' ){

					if( $(this).parent('li').hasClass('next') ){
						c++;
					}else{
						c--;
						dir = 'left';
					}
					
					if( c > t ){
						c = 0;
					}else if( c < 0 ){
						c = t;
					}
					
				}else{
					
					var newC = $(this).html() - 1;
					
					if( newC < c ){
						dir = 'left';
					}
					
					c = newC;
					
				}
				
				// Preload images
				var loaded = false;
				var url = $p.find('.promotion:eq(' + c + ')').css('background-image').replace('"','').replace('"','').replace('url(','').replace(')','');
				
				// If the image takes longer than .2s to load, show a loader.
				setTimeout('showLoader()',500);

				showLoader = function(){
					if( !loaded ){
						$('<div/>',{
							'class':'loading'
						}).appendTo($p).hide().fadeIn(200);
					}
				}
				
				// Loading
				$('<img/>').load(function(){
					loaded = true;
					$p.find('.loading').fadeOut(200,function(){
						$(this).remove();
					});
					goTo(c,dir);
				}).attr('src',url);
				
			}
			
			return false;
		});
				
		// Slideshow
		var promoTimer = {};
		
		$p.hover(function(){
			$.clearTimer(promoTimer);
			$('#dots,#arrows').fadeIn(100);
		},function(){
			slideshow();
			$('#dots,#arrows').fadeOut(100);
		});
		
		function slideshow(){
			promoTimer = $.timer(d,function(){
				$.clearTimer(promoTimer);
				$p.find('#arrows .next a').click();
				slideshow();
			});
		}
		
		slideshow();

		
		// Go to
		function goTo(num,dir){

			$dots.animate({opacity:0},100);
			$arrows.animate({opacity:0},100,function(){
				
				
				var $old = $p.find('.active');
				var $new = $p.find('.promotion:eq(' + num + ')');

				if( browser == 'chrome' ){
						
					/////////////////////////
					// CHROME (Firefox and opera will support this soon)
					
					var outListener = function(event){
						$p.addClass(dir);
						$new.addClass('new').centerTitle().bind(
							'webkitAnimationEnd',
							slideListener,
							false
						);
						$old.unbind(
							'webkitAnimationEnd',
							outListener,
							false
						);
					};
					
					var slideListener = function(event){
						$old.removeClass('old');
						$p.removeClass(dir);
						$new.unbind('webkitAnimationEnd', slideListener, false).bind(
							'webkitAnimationEnd',
							inListener,
							false
						);
					}
					
					var inListener = function(event){
						$new.removeClass('new').addClass('active').unbind(
							'webkitAnimationEnd',
							inListener,
							false
						);
						cleanUp();
					}
					
					$old.removeClass('active').addClass('old').bind(
						'webkitAnimationEnd',
						outListener,
						false
					);
					
				}else if( browser == 'safari' ){
				
					/////////////////////////
					// SAFARI (Chrome will support this soon)
	
					// Set direction
					$p.addClass(dir);
					$new.addClass('new');
					
					setClasses = function(){
						$p.addClass('flip');
						$old.addClass('old').removeClass('active');
						$new.addClass('active').centerTitle();
					}
					
					// Pause to let webkit set transforms
					setTimeout("setClasses()",100);
					
					var spinListener = function(event){
						$old.unbind('webkitTransitionEnd', spinListener, false);
						$p.removeClass('flip ' + dir);
						$new.removeClass('new');
						$old.removeClass('old');
						cleanUp();
					}
				
					$old.bind( 
						'webkitTransitionEnd',
						spinListener,
						false
					);
					
				}else{
					
					/////////////////////////
					// Everything else
					
					var $old = $p.find('.active');
					var $new = $p.find('.promotion:eq(' + num + ')');
					
					var e = 'easeInOutExpo';
					var s = 948;
					
					if( dir == 'right' ){
						var newStart = 500;
						var oldEnd = -474;
					}else{
						var newStart = -474;
						var oldEnd = 500;
					}
					
					$old.animate({left:oldEnd},s,e,function(){
						$(this).removeClass('active');
						cleanUp();
					});
					
					$new.addClass('active').centerTitle().css({left:newStart}).animate({left:0},s,e);
					
				}
				
			});
			
			function cleanUp(){
				mooseBan = false;
				$arrows.animate({opacity:1},100);
				$dots.animate({opacity:1},100).find('li:eq(' + c + ') a').addClass('on').parent('li').siblings('li').children('a').removeClass('on');
			}
			
		}
		
	}
	
	promotions();

});