/**
 * Simple Image Trail jQuery plugin
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 * !!!!!!!!DEPENDS ON "jquery.offsetToPage.js"!!!!!!!!
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 *
 * @author andrew
 */
var loading,
    pos=0,
    dir=2,
    len=0;


(function($){
    var timer=null;    
    $.fn.trailing = function(target,options){
	var defaults = {
	    rel_parents: true,
	    data_attr: 'rel',
	    offsetX: 30,
	    offsetY: 0,
	    timeout: 200
	};
	$.trail_general_opt = $.extend(defaults,{container:target},options || {});
	$.trailSetCoords = function(posX,posY){
	    var $container = $($.trail_general_opt.container),
	    width = $container.outerWidth(),
	    height = $container.outerHeight(),
	    w_width = $(window).width(),
	    w_height = $(window).height(),
	    offsetX = $.trail_general_opt.offsetX,
	    offsetY = $.trail_general_opt.offsetY,
	    scrollTop = $(document).scrollTop(),
	    left,
	    top;
	    /*$('#debug').html(
						 "offsetX = "+ offsetX +
						 "offsetY = "+ offsetY +
						 "<br>width = "+width+
						 "<br>height = " + height +
						 "<br>w_width = "+ w_width+
						 "<br>w_height = " + w_height +
						 "<br>posX = "+ posX+
						 "<br>posY = "+ posY+
						 "<br>$document.scrollTop() = "+ scrollTop);*/
	    if(posX+width+offsetX > w_width)
		left = posX-width-offsetX;
	    else
		left = posX+offsetX;
	    if(posY + height + offsetY > scrollTop + w_height)
		top = scrollTop + w_height - height - offsetY;
	    else
		top = posY+offsetY;
            $container.offsetToPage(left,top);
	}
	return this.each(function(){
	    var $trailed=$(this),
		data = $.parseJSON($trailed.attr($.trail_general_opt.data_attr));
	
	    data.correct = true;
	    if( data.url==null || data.tid==null || data.twidth==null || data.theight==null ){
		//$('#debug').append("<p>One of the trailed previews has defective data for trailing plugin!</p>");
		data.correct = false;
	    }

	    //$trailed.data("data",data);	    
	    $trailed.mouseover(function(e){
		//var data = $(this).data("data");		
		if(data.correct)		    
		    timer = setTimeout("show("+e.pageX+","+e.pageY+","+data.tid+",'"+data.url+"',"+data.twidth+","+data.theight+")",$.trail_general_opt.timeout);
	    });
	    $trailed.mouseleave(function(e){
		clearTimeout(timer);
		$($.trail_general_opt.container).hide();
		$($.trail_general_opt.container).html("");
	    });
	    $trailed.mousemove(function(e){
		if($($.trail_general_opt.container).css('display')!='none')
		    $.trailSetCoords(e.pageX,e.pageY);
	    });
	});
    };    
})(jQuery);

function show(posX,posY,tid,url,twidth,theight){    
    var $container = jQuery(jQuery.trail_general_opt.container),
    newHTML = '<div class="border_preview" style="width:'+  twidth +'px;height:'+ theight +'px"><div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
    newHTML = newHTML + '<h2 class="title_h2">Template #' + tid + '</h2>';
    newHTML = newHTML + '<div class="preview_temp_load"><img id="previewImage" onload="javascript:removeLoading();" src="' + url + '" border="0"></div>';
    newHTML = newHTML + '</div>';
    $container.html(newHTML);
    jQuery.trailSetCoords(posX,posY);
    $container.css('display','block');
    //chrome does not throw onload event if object was cashed so...
    if((jQuery('#previewImage')[0]).complete)
	jQuery('#loader_container').hide();
    else
	loading = setInterval(animate,20);    
}

function animate(){
    var elem = document.getElementById('progress');
    if(elem != null) {
        if (pos==0)
            len += dir;
        if (len>32 || pos>79)
            pos += dir;
        if (pos>79)
            len -= dir;
        if (pos>79 && len==0)
            pos=0;
        elem.style.left = pos+'px';
        elem.style.width = len+'px';
    }
}

function removeLoading() {
    if(jQuery(jQuery.trail_general_opt.container).css('display')!='none'){
	clearInterval(loading);
	jQuery('#loader_container').hide();
	pos=0;
	dir=2;
	len=0;
    }
}