// 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() {
	if (viewerHeight()>windowHeight())
	{
		// you have tiny screen, i hate you
		$("body").addClass("smallheight");
	}
	else
	{
		// good boy, you have a nice big screen
		$("body").removeClass("smallheight");
		// make sure the viewer is in the middle of your scren
		padViewer();
	}
}

// what is the height of our viewer?
function viewerHeight() {
	var extra = 0;
	if($("body").hasClass("smallheight"))
	{
		extra = 200;
	}
	return $(".viewer").height()+extra;
}

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

// 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", '');

			$.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>');
			});
			
			$(".viewer p.desc").html(data.copyright);
			$("p.image img").attr("src", 'http://www.bing.com/fd/hpk2/'+data.imageurl);
			$(".viewer a.addthis_button").attr("addthis:url", window.location.href);
			$(".viewer a.addthis_button").attr("addthis:title", 'Bing Image Archive: '+data.copyright.replace("&copy;",""));
			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();});

$("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).attr('checked');

	toggleCountry(country,check);
	setCountryCookie();

});

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

// set a cookie if we change our country filter
function setCountryCookie()
{
	var countrycookie = '';
	$("input[name=countryfilter[]]: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();
	}
}

// animation effects for the country selector
$("ul.countries").fadeTo(2500,1).fadeTo(300,0.2);
$("ul.countries").hover(
	function() {
		$("ul.countries").stop().fadeTo(300,1,function(){
			$(this).css("filter",'');
		});
	},
	function() {
		$("ul.countries").stop().fadeTo(300,0.2);
	}
);

// animation effects for the logo
$("h1 a").fadeTo(300,0.5);
$("h1 a").hover(
	function() {
		$("h1 a").stop().fadeTo(300,1,function(){
			$(this).css("filter",'');
		});
	},
	function() {
		$("h1 a").stop().fadeTo(300,0.5);
	}
);

});