/**
 * ...
 * @author Christoph Bucher
 */

 //------------------------------------------------------------------------------------------
 // PLEASE EXPERIMENT WITH THESE VARIABLES !!
 
 var _picPath="mon-pbox/"; // in the mon-pbox folder
 var _border = 4; // border around the thumbnail
 var _offset = 28; // the vertical offset from the thumbnail to the link
 //------------------------------------------------------------------------------------------
 
 var _x, _y, _cursorX, _cursorY, path = "";

 
 
(function(){   
	$(document).ready(function(){
		var _vOffset=_offset+_border*2;
		
		// load stylesheet
		$("head").append("<link>");
			css = $("head").children(":last");
			css.attr({
			rel:  "stylesheet",
			type: "text/css",
			href: "mon-pbox/css/mon-pbox.css"
		});
		
		// create the tooltip box
		$('body').append( '<div id="mon-previewbox"><img id="mon-previewbox-img" /><img id="mon-previewbox-arrow" src="mon-pbox/img/arrow.png" /></div>' );
		$( '#mon-previewbox-img' ).css( 'padding', _border + "px" );
		
		// ON LOAD NEW IMAGE
		$('#mon-previewbox-img').load( function() {
			_cursorX = _x;
			_x -= $(this).width()/2 +_border;
			_y -= $(this).height() + _vOffset;
			
			if( _x < 20 ) _x=20;
			
			$('#mon-previewbox-arrow').attr( 'src', 'mon-pbox/img/arrow.png' );
			$('#mon-previewbox-arrow').removeClass( "rotate" );
			var _cursorY = $(this).height() + _border*2;
			
			if( _y - $(document).scrollTop() < 8 ) {
				$('#mon-previewbox-arrow').attr( 'src', 'mon-pbox/img/arrow_up.png' );
				_y += $(this).height() + _vOffset*2 -_border*2;
				_cursorY = -$('#mon-previewbox-arrow').height();
			}
			
			$(this).parent().css( { 'left':_x ,'top':_y, zIndex:1000 } )
				.animate( { 'opacity':1 }, 200 )
				
			$('#mon-previewbox-arrow').css( { 'top':_cursorY, 'left':_cursorX-_x } ); 
		});
		
		// ON HOVER LINK
		$('a').hover(function( e ) {
			_cursorX = e.pageX;
			_x = $(this).offset().left + $(this).width() / 2 
			_y = $(this).offset().top + $(this).height() / 2;
			_path = _picPath + "thumbs/" + $(this).attr( 'rel' ) + ".jpg";
			
			$('#mon-previewbox-img').delay( 1250 ).attr( 'src', _path );

		}, function() {
			_path="";
			$('#mon-previewbox').stop().css( {'opacity':0, zIndex:-1} );
		});
		
		$('a').click(function( e ) {
			$('#mon-previewbox').stop().css( {'opacity':0, zIndex:-1} );
		});
	})

})(jQuery)