//------------------------------------
//
//	HOME.JS
//	Requires:	jquery 1.5.x
//
//------------------------------------

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

Cufon.replace('#slider .slide h2', { 
	fontFamily: 'gillsans'
});

Cufon.replace('#slider .slide h2 em', { 
	fontFamily: 'garamond'
});

Cufon.replace('#slider .slide p, #slider .slide a', { 
	fontFamily: 'gillsans'
});

Cufon.replace('.bordered_panel h3', {  //Light text dark background, dark shadow 
	fontFamily: 'garamond',
	textShadow: '2px 2px rgba(0,0,0,0.5)'
});


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

$(function(){
	
	//////////////////////////
	// SELECTS
	
	$('#book_a_table select, #our_locations select').simpleSelect({
		'defaultText':	'Choose a location',
		'before':		function(){
			$(this).next('button').remove();
		}
	}).change(function(){
		document.location = $(this).val();
	});
	

	//////////////////////////
	// MAIN PROMOTION AREA

	function slider(){

		// Objects
		var $s = $('#slider');
		var $slide = new Array();
		var $a = $('#slider .arrow, #slider ul a');
		var $n;

		// Variables
		var t = $s.find('.slide').length;
		var nav = '';
		var timer = {};
		var c = 1;
		var open = true;

		// Plugins
		$.fn.loadBg = function(callback) {

			return this.each(function(){

				$this = $(this);

				// Create image object
				var img = new Image();

				// Get the url
				var url = $this.data('image');

				// Load the image
				$(img).load(function(){

					// Set loaded to true from now on
					$this.data('loaded',true);

					// Callback
					if( callback ) callback.apply($this);

				}).attr('src', url);

			});

		};

		// Thumbnail plugin
		$.fn.thumbnail = function(callback) {
		
			return this.each(function(){
				
				// Objects
				var $this = $(this);
				var $ts = $s.find('.slide:eq(' + ( $this.text() - 1 ) + ')');
				var $thumb;
				
				var url = $ts.data('image');
				var id = 'slide_thumb';
				
				//console.log(x + ' ' + y + ' ' + url);
				
				$this.hover(function(){
					
					if( !$this.hasClass('on') ){
						
						var x = $this.offset().left - 83 + ( $this.width() / 2 );
						var y = $this.offset().top - 102;
						
						$thumb = $('<div/>',{
							'id':   id,
							'css':  {
								'top':  y,
								'left': x
							},
							'html': '<span class="image"><img src="' + url + '" height="80" alt="Thumbnail"/></span><span class="arrow"></span>'
						}).appendTo('body');
						
						if( !$ts.data('loaded') ){
							
							setTimeout(function(){
								if( !$ts.data('loaded') ) $thumb.addClass('loading');
							},200);
							
							$ts.loadBg(function(){
								$thumb.removeClass('loading').find('img').fadeIn(100);
							});
						
						}else{
							
							$thumb.find('img').show();
							
						}
						
					}
					
				},function(){
					$('#' + id).remove();
				});
				
				$this.click(function(){
					$('#' + id).remove();
				});
				
			});
			
		};
		
		// Create backgrounds
		$.fn.background = function(classes) {
			
			var $this = $(this);
	
			return $('<div/>',{
				'class':	'background ' + classes,
				'css':		{
					'background-image':	'url(' + $this.data('image') + ')'
				}
			}).appendTo('#slider_backgrounds');
			
		}

		// Create array of slide objects and the nav
		for( i = 1; i <= t; i++ ){

			// Add to the array
			$slide[i] = $s.find('.slide:eq(' + ( i - 1 ) + ')');
			
			if( i == 1 ){
				var liClass = ' class="first"';
			}else if( i == t ){
				var liClass = ' class="last"'
			}else{
				var liClass = '';
			}

			// Generate HTML
			nav += '<li' + liClass + '><a href="#" title="View this slide">' + i + '</a></li>';

			// Finished the loop
			if( i == t ){

				// Create the nav
				$n = $('<ul/>',{
					'html': nav
				}).appendTo($s);

				$n.css({
					'margin-left':	0 - Math.round( $n.outerWidth() / 2 )
				}).find('li:first a').addClass('on');
				
			}
		}

		// Mouse
		var mooseBan = true;

		// Settings
		var pause = 4;
		var s = 800;
		var e = 'easeInOutQuart';

		// Set up thumbnail hover
		$s.find('ul a').thumbnail();

		// Go to function
		function goTo(dir){
		
			mooseBan = true;
			
			//console.log('Going ' + dir + ' to slide ' + c);
			
			var $old = $s.find('.slide:visible');
			var $new = $slide[c];
			
			// Show the new slide
			$new.background(dir).css({
				'width':	0
			}).animate({
				'width':	1508
			},1200,'easeInOutExpo',function(){
				$(this).prev('.background').remove();
			});
			
			// Get the width and height
			$new.css({
				'display':	'block',
				'opacity':	0
			});
			
			var w = $new.outerWidth();
			var h = $new.outerHeight();
			
			var sCss = $new.hasClass('left') ? {'margin-top':0 - Math.round( h / 2 ),'left':'20%'} : {'margin-top':0 - Math.round( h / 2 ),'right':'20%'};
			var eCss = $new.hasClass('left') ? {'opacity':'1','left':'14%'} : {'opacity':'1','right':'14%'};
			
			if($new.hasClass('no_text')) eCss.opacity = 0;
			
			$new.css(sCss).delay(200).animate(eCss,800,'easeInOutExpo',function(){
				// Un ban the moose
				mooseBan = false;
			});
			
			// Hide the old one
			$old.fadeOut();
			
			// Set nav on state
			$n.find('a.on').removeClass('on');
			$n.find('li:eq(' + ( c - 1 ) + ') a').addClass('on');
		}


		//////////////////////////
		// THE CLEVER BIT
		
		// Load the first slide
		$slide[1].loadBg(function(){
			
			// Stop loading
			$s.removeClass('loading');
			
			// Show the first slide
			$(this).css({
				'margin-top':	0 - Math.round( $(this).outerHeight() / 2 )
			});
			
			if($(this).hasClass('no_text')) {
				mooseBan = false;
				$(this).background('left').fadeIn(100);
			}
			else {
				$(this).fadeIn(100,function(){
					mooseBan = false;
				}).background('left').fadeIn(100);
			}
			
			auto();
			
		});


		// Automatically slide
		function auto(){

			var p = $slide[c].data('pause');

			if( p == undefined ){
				p = pause;
			}

			timer = $.timer( ( p * 1000 ),function(){

				$.clearTimer(timer);

				if( !$s.hasClass('loading') && open ) $s.find('a.right').click();
				
				auto();

			});

		}

		// Hovering
		$s.bind({
			'mousemove':	function(){
				$.clearTimer(timer);
				$s.unbind('mousemove');
			},
			'mouseenter':   function(){
				$.clearTimer(timer);
			},
			'mouseleave':   function(){
				auto();
			}
		});


		// Clicking of links
		$a.live('click',function(e){

			if( !mooseBan && !$(this).hasClass('on') ){

				var dir = null;

				if( $(this).hasClass('arrow') ){

					if( $(this).hasClass('right') ){
						c++;
						dir = 'right';
					}else{
						c--;
						dir = 'left';
					}

					if( c > t ){
						c = 1;
					}else if( c < 1 ){
						c = t;
					}

				}else{

					var num = $(this).text();
					var dir = c > num ? 'left' : 'right';
					c = num;

				}

				// Check if we are all loaded
				if( $slide[c].data('loaded') == true ){

					goTo(dir);

				}else{

					// Set loading
					setTimeout(function(){
						if( !$this.data('loaded') ) $s.addClass('loading');
					},200);

					$slide[c].loadBg(function(){
						goTo(dir);

						// Stop loading
						$s.removeClass('loading');

					});
				}

			}

			e.preventDefault();

		});
		
		
		//////////////////////////
		// SHOW HIDE BANNER
		
		$('#slider_toggle').click(function(e){
		
			if( !mooseBan ){
		
				mooseBan = true;
			
				if( open ){
			
					open = false;
					
					$(this).text('Maximise');
				
					// Hide the content
					$('#slider_content').fadeOut(400);
					
					// Hide the nav
					$n.animate({
						'left':	'-10%'
					},600,'easeInExpo',function(){
					
						$s.animate({
							'height': 100
						},600,'easeInOutExpo',function(){
							
							mooseBan = false;
							
						});
						
					});
				
				}else{
				
					open = true;
					
					$(this).text('Minimise');
					
					$s.animate({
						'height': 350
					},600,'easeInOutExpo',function(){
						
						$n.animate({
							'left':	'50%'
						},400,'easeOutExpo');
						
						// Hide the content
						$('#slider_content').fadeIn(400,function(){
							
							mooseBan = false;
							
						});
						
					});
				
				}
			
			}
			
			e.preventDefault();
			
		});
		
	}
	
	slider();

});