var smooth=true;

function updateNav () {
	var top=parseInt(-jQuery('#layer').position().top/jQuery('#layer').height()*jQuery('#nav').height());
	var left=parseInt(-jQuery('#layer').position().left/jQuery('#layer').width()*jQuery('#nav').width());
   	jQuery('#nav #window').css('top', top);
   	jQuery('#nav #window').css('left', left);
}

jQuery(document).ready(function(){
	updateNav();

	/**
	 * New window for mobile site
	 */
	jQuery('a#mobile').click(function(){
		window.open(this.href);
		return false;
	});
	
	/**
	 * Hover behavoir for direction controls
	 */
	jQuery('td.control').hover(function(){
		jQuery(this).addClass('hover');
	},function(){
		jQuery(this).removeClass('hover');
	});
	
	/**
	 * Draggable behaviour
	 */
	jQuery('#layer').draggable({
		containment: 'parent',
		handle: '#overlay',
		stop: function(event, ui) {
			updateNav();
		}
	}); 
	
	/** nav window draggable */
	jQuery('#nav #window').draggable({
		containment: 'parent',
		handle: '#overlay',
	   	stop: function(event, ui) {
	   		var newtop=parseInt(-(ui.position.top/jQuery('#nav').height())*(jQuery('#layer').height()));
	   		var newleft=parseInt(-(ui.position.left/jQuery('#nav').width())*(jQuery('#layer').width()));
	    	jQuery('#layer').css('top', newtop);
	    	jQuery('#layer').css('left', newleft);
	   	}
	}); 
	
	jQuery('#map td.control').click(function(){
		var top 	= parseInt(jQuery('#layer').css('top'));
		var left 	= parseInt(jQuery('#layer').css('left'));
		var box 	= {x_min:0,x_max:902,y_min:0,y_max:1230};
		
		var offset 	= 150;
		switch(jQuery(this).attr('id')) {
			case 'south':
				var newtop = top - offset;
				newtop = (newtop < -box.y_max) ? -box.y_max : newtop; 
				if (smooth) {
					jQuery('#layer').animate({'top':newtop},{duration:300,queue:false, complete: updateNav});
				} else {
					jQuery('#layer').css('top',newtop);
					updateNav();
				}
				break;
			case 'north':
				var newtop = top + offset;
				newtop = (newtop > box.y_min) ? box.y_min : newtop; 
				if (smooth) {
					jQuery('#layer').animate({'top':newtop},{duration:300,queue:false, complete: updateNav});
				} else {
					jQuery('#layer').css('top',newtop);
					updateNav();
				}
				break;
			case 'east':
				var newleft = left - offset;
				newleft = (newleft < -box.x_max) ? -box.x_max : newleft; 
				if (smooth) {
					jQuery('#layer').animate({'left':newleft},{duration:300,queue:false, complete: updateNav});
				} else {
					jQuery('#layer').css('left',newleft);
					updateNav();
				}
				break;
			case 'west':
				var newleft = left + offset;
				newleft = (newleft > box.x_min) ? box.x_min : newleft; 
				if (smooth) {
					jQuery('#layer').animate({'left':newleft},{duration:300,queue:false, complete: updateNav});
				} else {
					jQuery('#layer').css('left',newleft);
					updateNav();
				}
				break;
		}
	});
	
	jQuery('#nav').click(function(event){
		var left=event.clientX-jQuery('#nav').offset().left-(jQuery('#window').width()/2);
		var top=event.clientY-jQuery('#nav').offset().top-(jQuery('#window').height()/2);
		if (left<0) left=0;
		if (top<0) top=0;
		if (left>jQuery('#nav').width()-jQuery('#window').width()) {left=jQuery('#nav').width()-jQuery('#window').width();}
		if (top>jQuery('#nav').height()-jQuery('#window').height()) {top=jQuery('#nav').height()-jQuery('#window').height();}
		left=left/jQuery('#nav').width();
		top=top/jQuery('#nav').height();
		left=parseInt(-left*jQuery('#layer').width());
		top=parseInt(-top*jQuery('#layer').height());
		jQuery('#layer').css('top',top);
		jQuery('#layer').css('left',left);
		updateNav();
	});
});