var HEADER = {};
var timediff;

HEADER.makeHeader = (function () {
	
	var images = new Array();
	images[0] = new Array('new york',	'images/banner/NEW_YORK_1.png');
	// images[1] = new Array('new york',	'images/banner/NEW_YORK_2.png');
	images[1] = new Array('shanghai',	'images/banner/SHANGHAI_1.png');
	//images[3] = new Array('shanghai',	'images/banner/SHANGHAI_2.png');
	images[2] = new Array('paris',		'images/banner/PARIS_1.png');
	images[3] = new Array('singapore',	'images/banner/SINGAPORE_1.png');
	images[4] = new Array('toyko',		'images/banner/TOKYO_1.png');
	//images[7] = new Array('toyko',		'images/banner/TOKYO_2.png');
	var curlocation = 'random';
	
	
	function init(){
		// hide all content
		hideAll();
		// show nav & image
		showHeader();
		// make nav
		makeNav();
		
		// click to current
	    var pathname = window.location.href;
	    if(pathname.indexOf("#/")>1){
		var id = pathname.substring(pathname.indexOf("#/")+2, pathname.length-1);
	    }else{
		var id = pathname.substring(pathname.indexOf("#")+1);
	    }	
	    if(id.length > 1 &&  id.length < 15){
		$(document).ready(function(){
		    	$('nav ul li a[href=#'+id+']').click();
		});
	    } 
	}
	
	function hideAll(){
		$('h1').hide();
		$('nav').hide();
		$('#headerImage').css('height','3px');
		$('#main>div').hide();
		$('#main div h2.firstHeader').hide();
	}
	
	function showHeader(){
		$('h1, nav').fadeIn(2000);
		$('#headerImage').animate({'height':'90px'},1000,showHeaderImages);
	}
	
	function animateCrossair(fromPosX, fromPosY, toPosX, toPosY, text){
		text = text.toUpperCase();
		if(toPosX && toPosY){
			$('#mapLocations #locationLabel').remove();
			toPosX = parseInt(toPosX.replace(/px/g,''))+2;
			toPosY = parseInt(toPosY.replace(/px/g,''))+3;

			// set pos values
			if(fromPosX){
				fromPosX = fromPosX;
			}else{
				fromPosX = '10px';
			}
			if(fromPosY){
				fromPosY = fromPosY;
			}else{
				fromPosY = '60px';
			}
			// animate to positions
			// move cursor to location:
			$('#mapLocations').css({backgroundPosition: fromPosX+' 0px'}).delay(100).queue(function(){
				$(this).stop().animate({backgroundPosition: toPosY+'px 0px'}, 1000);
			});
			$('#mapLocations_x').css({backgroundPosition: '0px '+fromPosY}).delay(100).queue(function(){
				$(this).stop().animate({backgroundPosition: '0px '+toPosX+'px'}, 1000,function(){
					$('#mapLocations ').append($('<span id="locationLabel">'+text+'&nbsp;<span id="clock"></span></span>').hide());
					var zone = new Array();
					zone['SINGAPORE'] = 'Asia\/Singapore';
					zone['TOKYO'] = 'Asia\/Tokyo';
					zone['PARIS'] = 'Europe\/Paris';
					zone['NEW YORK'] = 'America\/New_York';
					zone['SHANGHAI'] = 'Asia\/Shanghai';
					getTime(zone[text]);
					$('#locationLabel').css({'top':toPosX+2,'left':toPosY+4}).fadeIn(200);
				});
			});
		}
	} 
	
	
	function showHeaderImages(location){
		// get rand location if none set
		if(!location){
			for( var max = images.length; !location; null){
				var randPos = Math.floor(Math.random() * 11);
				if(randPos < max){
					location = images[randPos][0];
				}
			}
		}
		curlocation = location;	
		
		// add rand Image
		$('#randImage').remove();
		// show header images & maybee time
		if($('#main div').is(':visible')){			
			// set crossair pos
			if($('#mapLocations, #mapLocations_x').is(':not(:visible)')){
				$('#mapLocations_x').css('backgroundPosition','50% 0px');
				$('#mapLocations').css('backgroundPosition','0px 50%')
				$('#mapLocations, #mapLocations_x').fadeTo(2000,0.9); 
			}	
			var fromPosY;
			var fromPosX;
			if($.browser.mozilla){
				fromPosY = $('#mapLocations_x').css('backgroundPosition').split(' ')[1];
				fromPosX = $('#mapLocations').css('backgroundPosition').split(' ')[0];
			}else{
				fromPosY = $('#mapLocations_x').css('background-position-y');
				fromPosX = $('#mapLocations').css('background-position-x');	
			}
			
			if(fromPosX == '50%' || !fromPosX){
				fromPosX = 0;
			}else{
				fromPosX = fromPosX;
			}
			if(fromPosY == '50%' || !fromPosY){
				fromPosY = 0;
			}else{
				fromPosY = fromPosY;
			}
			animateCrossair(fromPosX,fromPosY,$('#mapLocations a[href="#'+curlocation+'"]').css('top'), $('#mapLocations a[href="#'+curlocation+'"]').css('left'),curlocation);
			
			$('#mapLocations a').unbind('click').bind('click',function (){
				showHeaderImages($(this).attr('href').replace('#',''));				
			});

			
			// -      end crossair 
			
			// show header image 
			var showImage;
			// show the location image
			for(pos in images){
				if(curlocation && images[pos][0] == curlocation){
					if(images[pos][0] == curlocation){
						showImage = images[pos][1];
					}
				}else if(!showImage){
					showImage = images[pos][1];
				}
			}
			// add rand image 
			$('#headerImage ').append(
				$('<img id="randImage" src="'+showImage+'">').hide().delay(3000).fadeIn(1000)
			);
			$('#randImage, #mapLocations').unbind('mouseenter').unbind('mouseleave');

			$('#randImage, #mapLocations').hover(function(){
				$('#randImage').stop(false,true).fadeOut(1000);
				$('#headerImage').unbind('mouseenter').unbind('mouseleave');
				$('#headerImage ').hover(null,function(){
					$(this).parent().find('#randImage').stop().fadeIn(1000);
				});
			});

		}
		
	}
	
	function makeNav(){
		$('nav ul li a, h1 a').bind('click',function(){
			$('nav ul li a, h1 a').removeClass('active');
			$(this).addClass('active');
			var showId = $(this).attr('href');
			if($('#main div').is(':visible')){
				$('#main div:visible').fadeOut(100);
			}
			window.location.hash = showId;
			// on click, fade in and load rand header
			$('#main '+showId).fadeIn(800,function(){
				if($('#headerImage img#randImage').is(':not(:animated)') || $('#headerImag img#randImage').length == 0){					
					showHeaderImages();
				}	
			});
			
			return false;
		});
		$('#main #dummy').show();
		$('#mapLocations, #mapLocations_x').css('backgroundPosition','-20px -20px').show();
		$('#mapLocations a').unbind('click').bind('click',function (){
			showHeaderImages($(this).attr('href').replace('#',''));				
		});
	}
	
	function redrawClock(){
		var time = new Date().getTime();
		time -= timediff;
		time = new Date(time);
		$('#clock').text(time.getHours()+':'+time.getMinutes()+':'+time.getSeconds());

		var t = setTimeout ( 'HEADER.makeHeader.redrawClock()', 1000 );
	}
	
	function getTime(zone) {
		$.ajax({
		    url: 'http://json-time.appspot.com/time.json',
		    data: 'tz='+zone,
		    dataType: "jsonp",
		    success: function(data){
				   var userTime = new Date().getTime();
				   var worldTime = new Date();
				   worldTime.setHours(data['hour']);
				   worldTime.setMinutes(data['minute']);
				   worldTime.setSeconds(data['second']);
				   timediff = userTime-worldTime;
				   redrawClock();
			}
		});
	}

	return {
	    init: init,
	    redrawClock: redrawClock
	};
})();

function imageOnHover(){
	if($('a.imageOnHover')){
		if (Modernizr.touch){
		   // bind to touchstart, touchmove, etc and watch `event.streamId`
			// click event for pads
			$('a.imageOnHover').bind('click',function(){
				// mouse enter
				var img = $('<img id="bigImage" src="'+$(this).attr('href')+'" border="0">').hide();
				$(this).parent().append(img);
				$('#bigImage').fadeIn(500).live('click',function(){
					$(this).fadeOut(500,function(){
						$('#bigImage').remove();
					});
							
				});
				return false;
			});
		} else {
		   // bind to normal click, mousemove, etc

			// hover for non pads
			$('a.imageOnHover').hover(function(){
				// mouse enter
				var img = $('<img id="bigImage" src="'+$(this).attr('href')+'" border="0">').hide();
				$(this).parent().append(img);
				$('#bigImage').fadeIn(500).hover(null,function(){
					// mouse leave
					$('#bigImage').fadeOut(500,function(){
						$(this).remove();	
					});
					
				});
			});
		}
		
		
		
	}
}