$(document).ready(function() {
  	
  		// Some vars
  		var dragBeginX;
  		var dragBeginY;
		var isDragging;
		var horDragSpeed;
		var verDragSpeed;
		var image;
		var iBeginMargin;
		var show_expl = true;
		
		// Setup overlay
		$('div.overlay').css({ top: $('div#pana').offset().top, left: $('div#pana').offset().left });
		
		// Back button init
		$('a.back').css({ top: $('div#pana').offset().top + 25, left: $('div#pana').offset().left + 30 }).hide();
		
		// Loading sprite inint
		//$('div.loading').css({ top: $('div#pana').offset().top + 242, left: $('div#pana').offset().left + 367, display : 'none' });
		$('div.loading').css({ top: $('div#pana').offset().top, left: $('div#pana').offset().left, display : 'none', opacity : 0.6 });
		
		$('img.expl').css({ top: $('div#pana').offset().top + 201, left: $('div#pana').offset().left + 225 }).hide();
		
		$('img.back_expl').css({ top: $('div#pana').offset().top + 7, left: $('div#pana').offset().left + 75 }).hide();
		function startPana(img_url, beginMargin) {
			image = new Image();
			image.src = img_url;
			
			iBeginMargin = parseFloat(beginMargin);
			
			$(image).bind('load', init);
		}

		function init() {
			
			closeMap();
			
			loading(0);
			
			if(image.height > 0) {

				$('div#pana').append('<div class="wrapper"><div class="left"></div><div class="right"></div><div class="left_copy"></div>');
				
				$('div#pana div.wrapper').css({
					width: image.width * 1.5,
					height: image.height
				});

				$('div#pana div.left').css({
					width: image.width/2,
					height: image.height,
					'background-image': 'url('+image.src+')',
					'background-position' : '0px 0px'
				});
				
				$('div#pana div.right').css({
					width: image.width/2,
					height: image.height,
					'background-image': 'url('+image.src+')',
					'background-position' : -image.width/2+'px 0px'
				});
				
				$('div#pana div.left_copy').css({
					width: image.width/2,
					height: image.height,
					'background-image': 'url('+image.src+')',
					'background-position' : '0px 0px'
				});
				
				$('div#pana div.wrapper').css('margin-left', iBeginMargin);
				
				// Bind events
				$('a.back').bind('click', removePana);
				$('a.back').bind('mousedown', backMouseDown);
				$('div#pana').bind('mousedown', panaMouseDown);
				
				$('a.back').show();
				
				if(show_expl == true) {
					$('img.expl').show();
					//$('img.back_expl').show();
				}
			}
		}
		
		function backMouseDown(e) {
			$('div#pana').unbind('mousedown', panaMouseDown);
			$('body').bind('mouseup', panaActive);
			e.preventDefault();
		}
		
		function panaActive(e) {
			$('div#pana').bind('mousedown', panaMouseDown);
			$('body').unbind('mouseup', panaActive);
		}
				
		function removePana(e) {
			$('div#pana div.wrapper').remove();
			$('div#pana').unbind('mousedown', panaMouseDown);
			$('a.back').unbind('mousedown', backMouseDown);
			$('a.back').unbind('click', removePana);
			
			$('a.back').hide();
			
			initMap();
			
			e.preventDefault();
		}
		
		function move(horSpeed, verSpeed) {
		
			var curMLeft = parseFloat($('div#pana div.wrapper').css('margin-left'));
			var curMTop  = parseFloat($('div#pana div.wrapper').css('margin-top'));
			
			var newMLeft = curMLeft + horSpeed;
			var newMTop  = curMTop + verSpeed;

			/*
				Check the bounderies for some smooth rotation.
			*/
			if(newMLeft < -image.width) newMLeft = newMLeft + image.width;	
			if(newMLeft > 0) 			newMLeft = -image.width + newMLeft;	
			
			if(newMTop > 0)					  newMTop = 0;
			if(newMTop < -image.height + 468) newMTop = -image.height + 468;

			$('div#pana div.wrapper').css({ marginLeft : newMLeft, marginTop : newMTop });
			
			//console.log('margin-left: ' + $('div#pana div.wrapper').css('margin-left'));
		}
		
		function moveAnimate() {
			move(horDragSpeed, verDragSpeed);
			if(isDragging) setTimeout(moveAnimate, 33);
			
			if(horDragSpeed > 0) {
				$('div.control_arrows').removeClass('right').addClass('left');
			} else if(horDragSpeed < 0) {
				$('div.control_arrows').removeClass('left').addClass('right');
			} else {
				$('div.control_arrows').removeClass('right').removeClass('left');
			}
		}
		
		function panaMouseDown(e) {
		
			$('body').addClass('grabbing');
			
			$('div.dragPoint').addClass('show').css({ top: e.pageY + 1, left: e.pageX + 1 });
		
			isDragging = true;
			moveAnimate();
		
			dragBeginX = e.pageX;
			dragBeginY = e.pageY;
			
			$(document).bind('mousemove', dragging);	
			$(document).bind('mouseup', stopDragging);	
			
			$('div.control_arrows').removeClass('right').removeClass('left').css({ top : e.pageY - 14, left: e.pageX - 39, display: 'block' });
			
			e.preventDefault();
			
		}
		
		function stopDragging() {
		
			$('body').removeClass('grabbing');
			
			$('div.dragPoint').removeClass('show');
		
			isDragging = false;
			horDragSpeed = 0;
			verDragSpeed = 0;
			
			$(document).unbind('mousemove', dragging);	
			$(document).unbind('mouseup', stopDragging);
			
			$('div.control_arrows').css({ display: 'none' });
		}
		
		function dragging(e) {
			
			if(show_expl == true) {
				
				$('img.expl').animate({ opacity:0 }, 500, function() { $('img.expl').hide(); });
				$('img.back_expl').animate({ opacity:0 }, 500, function() { $('img.back_expl').hide(); });
				
				show_expl = false;
			}
		
			horDragSpeed = -(e.pageX - dragBeginX) /12.0;
			verDragSpeed = -(e.pageY - dragBeginY) /12.0;
			
			e.preventDefault();
		}
		
		var mapElement = $('div#pana');
	
		var xImg = mapElement.offset().left;
		var yImg = mapElement.offset().top;
		
		initMap = function() {
			
			// Setup overlay
			$('div.overlay').css({ top: $('div#pana').offset().top, left: $('div#pana').offset().left });
		
			// Back button init
			$('a.back').css({ top: $('div#pana').offset().top + 25, left: $('div#pana').offset().left + 30 }).hide();
		
			// Loading sprite inint
			//$('div.loading').css({ top: $('div#pana').offset().top + 242, left: $('div#pana').offset().left + 367, display : 'none' });
			$('div.loading').css({ top: $('div#pana').offset().top, left: $('div#pana').offset().left, display : 'none', opacity : 0.6 });
		
			$('img.expl').css({ top: $('div#pana').offset().top + 201, left: $('div#pana').offset().left + 225 }).hide();
		
			$('img.back_expl').css({ top: $('div#pana').offset().top + 7, left: $('div#pana').offset().left + 75 }).hide();
		
		
			// Bosjes uitkijk bankje / kas + zijkant veld
			$('body').append('<a href="pana/stitch_one.jpg" data-begin="-4016" src="img/pointer.png" class="pointer" style="left: 429px; top: 197px;"></a>');
			
			// Koeien veldje
			$('body').append('<a href="pana/stitch_two.jpg" data-begin="-2353" src="img/pointer.png" class="pointer" style="left: 177px; top: 301px;"></a>');
			
			// Wiegellaantje naar de koeien
			$('body').append('<a href="pana/stitch_three.jpg" data-begin="-4470" src="img/pointer.png" class="pointer" style="left: 284px; top: 236px;"></a>');
			
			// Lama's
			$('body').append('<a href="pana/stitch_four.jpg" data-begin="-2992" src="img/pointer.png" class="pointer" style="left: 386px; top: 163px;"></a>');
			
			// Vogelhok
			$('body').append('<a href="pana/stitch_five.jpg" data-begin="-3831" src="img/pointer.png" class="pointer" style="left: 447px; top: 154px;"></a>');
			
			// kippen
			$('body').append('<a href="pana/stitch_six.jpg" data-begin="-1562" src="img/pointer.png" class="pointer" style="left: 470px; top: 154px;"></a>');
		
			// Rechts onder van het grote veld //
			$('body').append('<a href="pana/stitch_seven.jpg" data-begin="-1964" src="img/pointer.png" class="pointer" style="left: 283px; top: 318px;"></a>');

			// Zijkant halverwege veld 
			$('body').append('<a href="pana/stitch_eight.jpg" data-begin="-1141" src="img/pointer.png" class="pointer" style="left: 398px; top: 242px;"></a>');

			// Weggetje met stekelboom
			$('body').append('<a href="pana/stitch_nine.jpg" data-begin="-1558" src="img/pointer.png" class="pointer" style="left: 455px; top: 347px;"></a>');

			// Huis dichtbij veld
			$('body').append('<a href="pana/stitch_ten.jpg" data-begin="-4435" src="img/pointer.png" class="pointer" style="left: 549px; top: 244px;"></a>');

			// Kassen
			$('body').append('<a href="pana/stitch_eleven.jpg" data-begin="-1790" src="img/pointer.png" class="pointer" style="left: 563px; top: 192px;"></a>');
			
			// Ingang
			$('body').append('<a href="pana/stitch_twelve.jpg" data-begin="-1124" src="img/pointer.png" class="pointer" style="left: 662px; top: 219px;"></a>');
			$('a.pointer').each(function() {
				
				$(this).css({ top: $('div#pana').offset().top + $(this).offset().top + 30, left: $('div#pana').offset().left + $(this).offset().left + 5 });
			});

			
			$('div#pana').append('<div class="map"></div>');
		
			$('a.pointer').bind('mouseover', overPointer);
			$('a.pointer').bind('mouseout', outPointer);
			$('a.pointer').bind('click', clickPointer);
		}
		
		closeMap = function() {
			$('a.pointer').remove();
			$('div#pana div.map').remove();
			
			$('a.pointer').unbind('mouseover', overPointer);
			$('a.pointer').unbind('mouseout', outPointer);
		}
					
		mapElement.click(function(e) {
  			//console.log('x: ' + (e.pageX - xImg));
  			//console.log('y: ' + (e.pageY - yImg));
		});
			
		function overPointer(e) {
			$(this).css({ top : parseFloat($(this).css('top')) - 5 });
		}
		
		function outPointer(e) {
			$(this).css({ top : parseFloat($(this).css('top')) + 5 });
		}
		
		function clickPointer(e) {
		
			loading(1);
		
			startPana( $(this).attr('href'), $(this).attr('data-begin') );
		
			e.preventDefault();
		}
		
		function loading(on) {
		
			if(on == 1) {
				$('a.pointer').hide();
				$('div.loading').show();
			} else {
				$('div.loading').hide(500);
			}
		}
  	});