// Hello there.

// what is our window's height?
function windowHeight() {
	if(!window.innerHeight)
	{	
		//if this is internet explorer
		return document.documentElement.clientHeight;
	}else{
		return window.innerHeight;
	}
}

// detect screen resolution
function detectscreen() {
	padViewer();
}

// what is the height of our viewer?
function viewerHeight() {
	return $(".viewer").height();
}

// pad the viewer
function padViewer() {
	if (viewerHeight()<windowHeight()){
		var padding = (windowHeight()-viewerHeight())/2;
		$(".viewer").css("marginTop",padding);
	}else{
		$(".viewer").css("marginTop",0);
	}
}

// set a cookie if we change our country filter
function setCountryCookie()
{
	var countrycookie = '';
	$('ul.countries input[type="checkbox"]:checked').each(function(){
		countrycookie = countrycookie + $(this).attr('value') + ',';
	});
	$.cookie("country",countrycookie, { expires: 365 });
}

// turn on or off a country
function toggleCountry(country,check)
{
	if(check==true)
	{
		$("table.calendar a."+country).stop().show();
	}else{
		$("table.calendar a."+country).stop().hide();
	}
}

// set jquery blockui defaults
$.blockUI.defaults.css = {}; 
$.blockUI.defaults.overlayCSS = {}; 
 
// if we resize our window
$(window).resize(function(){
	// do resolution detection
	detectscreen();
});

$(document).ready(function(){

// remove our viewer
function removeblock()
{
	$("p.image img").attr("src", '');
	$.unblockUI();
}

// get the current document hash
function gethash()
{
	var urlstring = document.location.toString();
	if (urlstring.match('#')) {
	  var hash = urlstring.split('#')[1];
	  return hash;
	}else{
	  return 'none';
	}
}

// set our recentHash to nothing
var recentHash = '';
// initiate regular every 0.5sec check of our document hash
setInterval(checkimage, 500);

function checkimage()
{
	// what's our current hash
	newHash = gethash();
	// if it's different to what's stored...
	if(newHash != recentHash)
	{
		// update it
		recentHash = newHash;
		// if the hash is nothing
		if(newHash!='none')
		{
			// load our picture
			$.blockUI({ message: $('.loading') });			
			loadimage(newHash);			
		}else{
			// remove our viewer
			removeblock();
		}
	}
}

// load a specific picture in our viewer
function loadimage(imageid)
{
	if(imageid!='none')
	{
	$.getJSON("getimage.php",
			  {id: imageid},
        function(data){ 
		if(data!='false'){
			$(".viewer div.hotspots").html('');
			$(".viewer p.desc").html('');
			$("div.facts ul").html('');
			$("p.image img").attr("src", '');
			$(".viewer .viewerad").show();
			// reset video player
			$(".viewer .video").hide();
			$(".viewer .video").html('');
			$(".viewer .videobuttons").hide();
			$(".viewer .videobuttons .showvideo").show();
			$(".viewer .videobuttons .hidevideo").hide();

			$.each(data.hotspots, function(i,spot){
				$(".viewer div.hotspots").append('<div class="tip" id="tip'+i+'" style="top:'+spot.y+'px;left:'+spot.x+'px;"></a>');
				$("div.facts ul").append('<li id="fact'+i+'"><p>'+spot.desc+'</p><p><a href="'+spot.link+'">'+spot.query+'</a></p></li>');
			});
			
			if(jQuery.isEmptyObject(data.video) == false)
			{
				$(".viewer .viewerad").hide();
				$(".viewer .videobuttons").show();
				var vidhtml = '<video poster="'+data.imageurl+'" autoplay="autoplay" loop="loop" onended="this.play()">';
				$.each(data.video, function(i,vid){
					vidhtml = vidhtml + '<source src="http://www.bing.com'+vid.url+'" type=\''+vid.codec+'\'></source>';
				});
				vidhtml = vidhtml + '<p>HTML5 video is not supported by your browser</p></video>';
				$(".viewer .video").html(vidhtml); // fucking IE
				$(".viewer .video video").bind('canplay', function() { 
					this.play();
				} );  // fucking Chrome
				if($('html').hasClass('video'))
				{
					$(".viewer .videobuttons .showvideo").click();
				}
			}
			
			$(".viewer p.desc").html(data.copyright);
			$("p.image img").attr("src", data.imageurl);
			document.title = 'Bing Image Archive: '+data.copyright.replace("&copy;","");
			$.blockUI({ message: $('.viewer') });
			detectscreen();
			padViewer();
		}else{
			removeblock();
		}
        });
	 }
};

$("table.calendar td a").click(function(){
	checkimage();
});

$("div.buttons a.close").click(function(){
	closeImage();
	return false;
});

$("div.hotspots").click(function(){
	closeImage();});

$(".viewer .videobuttons .showvideo").click(function(){
	$(".viewer .video").show();
	$(".viewer .videobuttons .showvideo").hide();
	$(".viewer .videobuttons .hidevideo").show();
	return false;
});

$(".viewer .videobuttons .hidevideo").click(function(){
	$(".viewer .video").hide();
	$(".viewer .videobuttons .showvideo").show();
	$(".viewer .videobuttons .hidevideo").hide();
	return false;
});

$(".viewer .video video").live('click', function(){
	closeImage();
});

$("p.image").click(function(){
	closeImage();
});

function closeImage() {
	document.title = 'Bing Image Archive';
	window.location.hash = 'none';
	removeblock();
};

$("div.facts ul li").live("mouseover", function(){
     var tipid = $(this).attr('id').substr(4);
	 $("div.hotspots div.tip#tip"+tipid).stop().show().fadeTo(100,1,function(){
			$(this).css("filter",'');
		});
});

$("div.facts ul li").live("mouseout", function(){
     var tipid = $(this).attr('id').substr(4);
	 $("div.hotspots div.tip#tip"+tipid).stop().fadeTo(500,0);
});

// every time we click a country
$("ul.countries input").click(function(){

	var country = $(this).attr('value');
	var check = $(this).prop('checked');;

	toggleCountry(country,check);
	setCountryCookie();

});

// loop our country filters when page load to set up our calendar
$('ul.countries input[type="checkbox"]').each(function(){
	var country = $(this).attr('value');
	var check = $(this).prop('checked');
	toggleCountry(country,check);
});

});