$(document).ready(function() {

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		//Get the A tag
		var id = $(this).attr('href');

		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		//transition effect
		$('#mask').fadeIn(500);
		$('#mask').fadeTo("slow",0.8);

		//Get the window height and width
		var winH = $(document).height();
		var winW = $(window).width();

		//Set the popup window to center
		$(id).css('top',  200);
		$(id).css('left', winW/2-$(id).width()/2);

		//transition effect
		$(id).fadeIn(1000);

	});

	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		$('#mask, .window').hide();
	});



	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});
});


function gotoCoords(e){
	if (e){
		var x = e.pageX;
		var y = e.pageY;
	} else {
		var x = event.x;
		var y = event.y;
	};
	document.getElementById('hint').style.left = x + 20 + "px";
	document.getElementById('hint').style.top = y + 10 + "px";
	document.getElementById('hint').style.display = "block";
	document.getElementById('hint').style.visibility = "visible";
}

function sc1(){setcontent(1);}
function sc2(){setcontent(2);}
function sc3(){setcontent(3);}
function sc4(){setcontent(4);}
function sc5(){setcontent(5);}
function sc6(){setcontent(6);}
function sc7(){setcontent(7);}
function sc8(){setcontent(8);}
function sc9(){setcontent(9);}
function sc10(){setcontent(10);}
function sc11(){setcontent(11);}
function sc12(){setcontent(12);}
function sc13(){setcontent(13);}
function sc14(){setcontent(14);}


function setcontent(i){
	document.getElementById('hint').innerHTML = obl[i];
}
var hidder = false;

function hinthide(){
	clearTimeout(hidder);
	hidder = setTimeout('hinthideTO()',1000)
}
function hinthideTO(){
	document.getElementById('hint').style.visibility = "hidden";
}

document.getElementById('ar1').onmousemove = gotoCoords;
document.getElementById('ar1').onmouseover = sc1;
document.getElementById('ar1').onmouseout = hinthide;

document.getElementById('ar2').onmousemove = gotoCoords;
document.getElementById('ar2').onmouseover = sc2;
document.getElementById('ar2').onmouseout = hinthide;

document.getElementById('ar3').onmousemove = gotoCoords;
document.getElementById('ar3').onmouseover = sc3;
document.getElementById('ar3').onmouseout = hinthide;

document.getElementById('ar4').onmousemove = gotoCoords;
document.getElementById('ar4').onmouseover = sc4;
document.getElementById('ar4').onmouseout = hinthide;

document.getElementById('ar5').onmousemove = gotoCoords;
document.getElementById('ar5').onmouseover = sc5;
document.getElementById('ar5').onmouseout = hinthide;

document.getElementById('ar6').onmousemove = gotoCoords;
document.getElementById('ar6').onmouseover = sc6;
document.getElementById('ar6').onmouseout = hinthide;

document.getElementById('ar7').onmousemove = gotoCoords;
document.getElementById('ar7').onmouseover = sc7;
document.getElementById('ar7').onmouseout = hinthide;

document.getElementById('ar8').onmousemove = gotoCoords;
document.getElementById('ar8').onmouseover = sc8;
document.getElementById('ar8').onmouseout = hinthide;

document.getElementById('ar9').onmousemove = gotoCoords;
document.getElementById('ar9').onmouseover = sc9;
document.getElementById('ar9').onmouseout = hinthide;

document.getElementById('ar10').onmousemove = gotoCoords;
document.getElementById('ar10').onmouseover = sc10;
document.getElementById('ar10').onmouseout = hinthide;

document.getElementById('ar11').onmousemove = gotoCoords;
document.getElementById('ar11').onmouseover = sc11;
document.getElementById('ar11').onmouseout = hinthide;

document.getElementById('ar12').onmousemove = gotoCoords;
document.getElementById('ar12').onmouseover = sc12;
document.getElementById('ar12').onmouseout = hinthide;

document.getElementById('ar13').onmousemove = gotoCoords;
document.getElementById('ar13').onmouseover = sc13;
document.getElementById('ar13').onmouseout = hinthide;

document.getElementById('ar14').onmousemove = gotoCoords;
document.getElementById('ar14').onmouseover = sc14;
document.getElementById('ar14').onmouseout = hinthide;