(
    function ($) {
        $.popUp = { div: null, tail: null, loadDiv: null };
        $.fn.popUp = function (settings) {
            settings = jQuery.extend({ targetID: 'templageMainArea' }, settings);
            function start() {
                if ($.popUp.div == null) {
                    var e = settings.e;
                    var pos = { top: e.pageY, left: e.pageX }
                    document.title = settings.sender.id + "  " + e.pageY + "  " + e.pageX + "  " + e.screenX + "  " + e.screenY + "  " + e.offsetX + "  " + e.offsetY;
                    var width = $(settings.sender).width();
                    var height = $(settings.sender).width();
                    var tailLeft = pos.left + width - 20;
                    var tailTop = pos.top;
                    $.popUp.tail = $("<div class=\"jqueryPopUpTailLeft\">").css({ top: tailTop, left: tailLeft }).appendTo(document.body);
                    $.popUp.div = $("<div class=\"jqueryPopUp\"><table cellpadding=\"0\" border=\"0\" cellspacing=\"0\"><tr><td><div  class=\"topleft\"></div></td><td><div class=\"topmiddle\"></div></td><td><div  class=\"topright\"></div></td></tr><tr class=\"middle\"><td class=\"left\"></td><td class=\"center\"></td><td class=\"right\"></td></tr><tr class=\"bottom\"><td class=\"left\"></td><td class=\"middle\"></td><td  class=\"right\"><div></div></td></tr></table></div>").css({ position: 'absolute', display: 'none' }).appendTo(document.body).show();
                    var popLeft = tailLeft;
                    var popTop = tailTop - 20;
                    $.popUp.div.css({ top: popTop, left: popLeft });
                    $.popUp.loadDiv = $("<div>").css({ position: 'absolute', height: 50, width: 50, top: -50, left: -100, overflow: 'hidden' }).appendTo(document.body);

                }
                else {
                    setPosition();
                    $.popUp.tail.css({ display: 'block' });
                    $.popUp.div.show();
                }
                var td = $.popUp.div.children()[0].rows[1].childNodes[1];
                td.innerHTML = "";
                var img = $("<img src=\"" + settings.image + "\"/>").appendTo($.popUp.loadDiv);
                $(img).load(function (e) { fitToWindow(e, td); });
                $(settings.sender).bind("mouseout", stop);

            };
            function setPosition() {
                var e = settings.e;
                var pos = $(settings.sender).position();
                //document.title = settings.sender.id + "  " + e.pageY + "  " + e.pageX + "  " + e.screenX + "  " + e.screenY + "  " + e.offsetX + "  " + e.offsetY;
                var width = $(settings.sender).width();
                var height = $(settings.sender).width();
                var tailLeft = pos.left + width - 20;
                var tailTop = pos.top;
                var popLeft = tailLeft;
                var popTop = tailTop - 20;
                $.popUp.tail.css({ top: tailTop, left: tailLeft });
                $.popUp.div.css({ top: popTop, left: popLeft });
            }
            function constraintImageSize(sender, w, h) {
                var img = new Image();
                img.src = sender.src;
                var heightRatio = img.height / h;
                var widthRation = img.width / w;
                var newHeight = null;
                var newWidth = null;
                if (heightRatio > widthRation) {
                    newWidth = w;
                    sender.style.width = w + "px";
                }
                else {
                    newHeight = h;
                    sender.style.height = h + "px";
                }
                var ratio;
                if (newHeight != null) {
                    ratio = newHeight / img.height;
                    newWidth = img.width * ratio;
                    sender.style.width = newWidth + "px";
                }
                if (newWidth != null) {
                    ratio = newWidth / img.width;
                    newHeight = img.height * ratio;
                    sender.style.height = newHeight + "px";
                }
            }
            function fitToWindow(e, td) {
                constraintImageSize(e.target, 300, 300);
                var width = $(e.target).width();
                var height = $(e.target).height();
                var image = e.target;
                var popTop = $.popUp.div.position().top;
                var docuHeight = $(document).height();
                var extraHeight = docuHeight - popTop - height - 40;
                if (extraHeight < 0) {
                    $.popUp.div.css({ top: popTop + extraHeight - 40 });
                }
                td.innerHTML = "";
                $(image).remove().appendTo(td);


            }
            function stop() {
                if ($.popUp.div != null) {
                    $.popUp.tail.css({ display: 'none' });
                    $.popUp.div.css({ display: 'none' });
                }
                $(settings.sender).unbind("mouseout", stop);
            }

            start();
            return this;
        }
    }
)
(jQuery);

(
   function($)
   {
        $.imageOver={div:null};
        $.fn.imageOver=function(settings)
        {
            var temp=this;
            this.templageMainArea=$("#templageMainArea");
            this.templageMainAreaContent=$("#templageMainAreaContent");
            this.show=function()
            {                     
                  var maxWidth=this.templageMainArea.width();
                  var pos=this.templageMainArea.position();
                  var div=$("<div class=\"mainMenuCategoryPopup\">").css({top:pos.top,left:pos.left,position:'absolute'}).appendTo(this.templageMainArea).hide();
                 
                 div.innerHTML="";
                 var img=$("<img width=\"10\" height=\"10\" src=\""+settings.image+"\"/>").css({position:'absolute',top:-100,left:-100}).appendTo(document.body);
                 img.load(function(e){
                        img.remove();
                        img.removeAttr("height").removeAttr("style").removeAttr("width");
                        //img.attr({width:maxWidth});                                         
                        div.html("<img width=\""+maxWidth+"\"  src=\""+settings.image+"\"/>");
                        div.fadeIn();
                 })
                 var stopFun=function(e)
                 {
                    temp.stop(e,stopFun,div);
                 }
                 $(window).bind("click", stopFun);
                 $(settings.sender).bind("mouseout", stopFun);

            }
            this.stop=function(e,stopFun,div){
                div.fadeOut(function(){div.remove();});                
                $(settings.sender).unbind("mouseout", stopFun);
                $(window).unbind("click", stopFun);
            };
    
            this.show();
        }
   }
)
(jQuery);