jQuery.noConflict();
(function(jQuery){
    jQuery.fn.ZoomPic = function(options){
        var defaults = {
            onMouseOver   : function(){},        // callback on mouse hover
            zoomStyle     : {
                "background-color"   : "#fff",
                "min-width"          : "100px",
                "max-width"          : "60%",
                "min-height"         : "100px",
                "height"         : "auto",
                "border"             : "1px solid #ddd",
                "-moz-box-shadow"    : "0 0 2px #888",
                "box-shadow"         : "0 0 2px #888",
                "-webkit-box-shadow" : "0 0 2px #888",
                "text-align"         : "center"
            },
            onMouseOut    : function(){}
            /*
            callback on mouse out, remove the comments tag to use this line. This line of code will work
            when the user will move his mouse after viewing the image.
            */
        };
        jQuerythis = jQuery(this);
        jQuerythis.options = jQuery.extend({},defaults, options);
        jQuerythis.coreObj = null;

        var functions = {

            obj         : null,
            maxWidth    : 0,
            divObj      : jQuerythis.coreObj,
            winWidth    : jQuery(window).width(),
            winHeight   : jQuery(window).height(),

            init : function(opt){
                this.obj = opt.obj;
                this.divObj = this.wrapResponsive();
                if(jQuery("body .ZoomBox").length == 0){
                    jQuery("body").append(this.divObj);
                }
                this.bindEvents();
            },
            findImages : function(){
                var images = false;
                if(this.obj != null){
                    images = jQuery(this.obj).find("img");
                    if(images.length == 0){
                        images = false;
                    }
                }
                return images;
            },
            bindEvents:function(){
                var images = this.findImages();
                if(images){
                    jQuery.each(images,function(i,imgObj){
                        jQuery(imgObj).on({
                            mouseenter : function(){
                                functions.whenHover(this);
                            },
                            mousemove : function(e){
                                functions.whenMouseMove(this,e);
                            },
                            mouseleave : function(){
                                functions.whenHoverOut(this);
                            }
                        });
                    });
                }
            },
            whenHover:function(imgObj){
                var imgSrc = jQuery(imgObj);
                this.divObj = jQuery("body .ZoomBox");
                this.divObj.find("img").css("margin-top","0px");
                this.images(imgSrc.attr("src"));
                jQuerythis.options.onMouseOver(imgObj);
                this.divObj.show();
            },
            whenMouseMove:function(imgObj,e){

                var tmpImg = new Image();
                tmpImg.src = jQuery(imgObj).attr("src");
                var w = 0, h = 0,maxWidth = 0,maxHeight = 0,leftPos = 0,topPos = 0,rightPos = 0, x = 0, y = 0;

                w = this.winWidth;
                h = this.winHeight;
                x = e.pageX;
                y = e.pageY;

                var ratio = (w / 100 * 55);
                topPos = (y+10);
                var imgObj = this.divObj.find("img");

                if(x > ratio){
                    // Right position
                    maxWidth = (tmpImg.width < (x-20)) ? tmpImg.width : (x-20);
                    rightPos = (x+10) - (tmpImg.width > (w-x))? (w-x) : tmpImg.width;
                    imgObj.css("max-width","240px");
                    this.divObj.css({"left":"",
                        "right":rightPos+"px",
                        "top": topPos+"px" });
                } else {
                    // Left Position
                    maxWidth = (tmpImg.width > (w-(x+20)))? (w-(x+20)) : tmpImg.width;
                    imgObj.css("max-width","240px");
                    //imgObj.css("max-width",maxWidth+"px");
                    this.divObj.css({"left":(x+10)+"px",
                        "right":"",
                        "top": topPos+"px" });
                }

                /* Bottom Layer */
                var hRatio = (h / 100 * 55);
                if(hRatio > y){
                    maxHeight = ((h - y) - 10);
                } else {
                    this.divObj.css({"top":(topPos - (imgObj.height() + 20))+"px"});
                    maxHeight = ((y - h) - 10);
                }
                maxHeight = (this.winHeight < maxHeight) ? this.winHeight : maxHeight;
                imgObj.css({'max-height':"auto"});
            },
            whenHoverOut:function(imgObj){
                this.divObj.hide();
                jQuerythis.options.onMouseOut(imgObj);
            },
            wrapResponsive:function(){
                jQuerynewImage = jQuery("<img />");
                jQuerynewImage.css({
                    "max-width"  :"60%",
                    "position"   :"relative",
                    "padding"    :"0px",
                    "margin-top" :"20%"
                }).attr("src","images/load.gif");
                jQuerynewImage = jQuery("<div class='ZoomBox'></div>")
                    .css(jQuery.extend(jQuerythis.options.zoomStyle,{ "display": "none","position": "absolute"}))
                    .html(jQuerynewImage);
                return jQuerynewImage;
            },
            images:function(src){
                this.divObj.find("img").attr("src",src);
            }
        };
        return jQuerythis.each(function(){
            functions.init({ "obj":this });
        });
    };
})(jQuery);