/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
this.imagePreview = function(){

	

	$("a.preview").hover(function(e){
                xOffset = 150;//10;
		yOffset = 20;//30;
		var content  = this.rel.split('|');
                this.t = content[0];
                this.k = content[1];
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("#wrap").append("<p id='preview'>"+
                    "<img src='"+ content[1] +"' alt='"+this.title+"' />"+ c +"</p>");
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
                        .css("line-height","0px")
			.fadeIn("fast");
    },
	function(){
		this.rel = this.t + "|" + this.k;
		$("#preview").remove();
    });
	$("a.preview").mousemove(function(e){
                xOffset = 150;//10;
		yOffset = 20;//30;
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});

        /*
         * showcase */

        $("a.showcase").hover(function(e){
                xOffset = 150;//10;
		yOffset = 20;//30;
                var width = 300;
                var contents = this.rel.split("|");
		$("#wrap").append("<div id='preview_showcase'>"+
                    "<div id='showcase_text'><ul>"+
                    "<li><h3>"+ contents[0] +"</h3>"+
                    "<br /><label>"+contents[1]+"</label><br /><br />"+
                    "<label class='words'>"+contents[2]+"</label><br />"+
                    "<label class='languajes'>"+contents[3]+"</label><br /><br />"+

                    "<b>Assets:</b><br /><label class=''>"+contents[4]+
                    "</label><br /><br />"+contents[5]+"</li></ul></div></div>");
                    
		$("#preview_showcase")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
                        .css("line-height","0px")
                        .css("width",width+"px")
			.fadeIn("fast");
        },

	function(){
		//this.title = this.t;
		$("#preview_showcase").remove();
        }
        );
	$("a.showcase").mousemove(function(e){
                xOffset = 150;//10;
		yOffset = 20;//30;
		$("#preview_showcase")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});
        
};

this.imageTooltipRight = function(){

        /*
         * showcase */

        $("a.showcase_right").hover(function(e){
                var contents = this.rel.split("|");
                var width = 300;
                var content = "<div id='preview_showcase'>"+
                    "<div id='showcase_text'><ul>"+
                    "<li><h3>"+ contents[0] +"</h3>"+
                    "<br /><label>"+contents[1]+"</label><br /><br />";
                if(contents[2]!="")
                    content+="<label class='words'>"+contents[2]+"</label><br />";

                content+="<label class='languajes'>"+contents[3]+"</label><br /><br />"+
                    "<b>Assets:</b><br /><label class=''>"+contents[4]+
                    "</label><br /><br />"+contents[5]+"</li></ul></div></div>";
                    
                $("#wrap").append(content);

		$("#preview_showcase")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
                        .css("line-height","0px")
                        .css("width",width+"px")
			.fadeIn("fast");
        },
	function(){
		//this.title = this.t;
		$("#preview_showcase").remove();
        });
	$("a.showcase_right").mousemove(function(e){
                xOffset = 150;//10;
                yOffset = -330;//30;
		$("#preview_showcase")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});

};
// starting the script on page load
$(document).ready(function(){
	imagePreview();
        imageTooltipRight();
});