/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.imagePreview = function(){ 
//     /* CONFIG */
//         
//         xOffset = 180;
//         yOffset = 20;
//         
//         // these 2 variable determine popup's distance from the cursor
//         // you might want to adjust to get the right result
//         
//     /* END CONFIG */
//     $("a.preview").hover(function(e){
//         this.t = this.title;
//         this.title = "";    
//         var c = (this.t != "") ? "<br/><span id='previewtext'>" + this.t + "</span>" : "";
//         $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
//         $("#preview")
//             .css("top",(e.pageY - xOffset) + "px")
//             .css("left",(e.pageX + yOffset) + "px")
//             .fadeIn("fast");                        
//     },
//     function(){
//         this.title = this.t;    
//         $("#preview").remove();
//     }); 
//     $("a.preview").mousemove(function(e){
//         $("#preview")
//             .css("top",(e.pageY - xOffset) + "px")
//             .css("left",(e.pageX + yOffset) + "px");
//     });         



        
    /* END CONFIG */
    $("a.preview").hover(function(e){


        /* CONFIG */
        var imgcl = $(this).find('img');
        imgcl = imgcl.attr('class');
        

        //default
        xOffset = 250;
        yOffset = 20;

        /*if(imgcl == "right"){
            xOffset = 200;
            yOffset = -660;
        }
        if(imgcl == "mid")  {
            xOffset = 380;
            yOffset = -330;
        }*/
        if(imgcl == "right"){
            xOffset = 490;
            yOffset = -660;
        }
        if(imgcl == "mid")  {
            xOffset = 500;
            yOffset = -480;
        }

        if(imgcl == "pfirst") {
            prevcl = "prevpfirst";
        } else {
            prevcl = "preview";
        }

        if($(this).attr('rel') == 'si'){
            prevcl = "single";
        }



        //if before-after
        if($(this).attr('rel') == "ba"){
        
            // these 2 variable determine popup's distance from the cursor
            // you might want to adjust to get the right result


            //find the image's rel attr
            var imgrel = $(this).find('img');
            imgrel = imgrel.attr('rel');


            this.t = this.title;
            this.title = "";    
            var c = (this.t != "") ? "<br/><span id='previewtext'>" + this.t + "</span>" : "";
            var batxt = "<span class='prevlabel'><span class='beforetxt'>Before</span> <span class='aftertxt'>After</span></span>";
            $("body").append("<p id='"+prevcl+"'><img src='images/v3/portfolio/before/"+imgrel+"' style='padding-right:2px;'/><img src='images/v3/ba-separator_new.gif' /><img src='images/v3/portfolio/after/"+imgrel+"' />"+ batxt + c +"</p>");                

        } else {

            // these 2 variable determine popup's distance from the cursor
            // you might want to adjust to get the right result

        if(imgcl == "right"){
            xOffset = 350;
            yOffset = -660;
        }

            //find the image's rel attr
            var imgrel = $(this).find('img');
            imgrel = imgrel.attr('rel');

            //single
            this.t = this.title;
            this.title = "";    
            var c = (this.t != "") ? "<br/><span id='previewtext'>" + this.t + "</span>" : "";
            $("body").append("<p id='"+prevcl+"'><img src='images/v3/portfolio/"+ imgrel +"' alt='Image preview' />"+ c +"</p>");     
        }
                            
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");     

        $("#prevpfirst")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");  

        $("#single")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");  
         
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
        $("#preview *").remove();
        $("#prevpfirst").remove();
        $("#single").remove();
    }); 

    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");

        $("#prevpfirst")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");

        $("#single")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");


    });        


};


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