// JavaScript Document
;(function($) {

        // Default settings  
        var defaultSettings = {
                allowZoom: true
                ,allowPan: true
				,allowPanX: false
				,allowPanY: true
                ,zoomCursor: "crosshair"
                ,panCursor: "n-resize"
                ,disabledCursor: "not-allowed"
                ,viewportWidth: 400
                ,viewportHeight: 300
                ,maxWidth: 2500
                ,topX: -1
                ,topY: -1
                ,bottomX: -1
                ,bottomY: -1
                ,callback: function(topX, topY, bottomX, bottomY) {}
        };
 
        function handleMouseOver(event) {
                var image = $(this);
                var dim = image.data("dim");
                image.css("cursor", dim.cursor);
        }
       
        function handleMouseOut(event) {
                var image = $(this);
                var dim = image.data("dim");
                image.css("cursor", dim.cursor);
        }

        function handleMouseDown(mousedownEvent) {
                mousedownEvent.preventDefault();
                var image = $(this);
                var dim = image.data("dim");

                dim.origoX = mousedownEvent.clientX;
                dim.origoY = mousedownEvent.clientY;

                var clickX = (mousedownEvent.pageX - $(this).offset({scroll: false}).left);
                var clickY = (mousedownEvent.pageY - $(this).offset({scroll: false}).top);

                if(dim.allowZoom && (mousedownEvent.shiftKey || mousedownEvent.ctrlKey) ) {
                        dim.cursor = dim.zoomCursor;
                        image.css("cursor", dim.zoomCursor);
                        $("body").css("cursor", dim.zoomCursor);
                        $(document).mousemove(function(e) {
                                image.zoom(e);
                        });
                }
                else if(dim.allowPan) {
                        dim.cursor = dim.panCursor;
                        image.css("cursor", dim.panCursor);
                        $("body").css("cursor", dim.panCursor);
                        $(document).mousemove(function(e) {
                                image.pan(e);
                        });
                }

                $(document).mouseup(function() {
                        var dim = image.data("dim");
                        dim.cursor = dim.panCursor;
                        $("body").css("cursor", "default");
                        image.css("cursor", dim.cursor);
                        $(this).unbind("mousemove").unbind("mouseup").unbind("mouseout");
                        image.store();
                });
                return false;
        }

        $.fn.extend({
                setup: function() {
                        var image = $(this);
                        var dim = image.data("dim");
                        dim.cursor = dim.panCursor; // Default cursor
                        dim.actualWidth = image.width();
                        dim.actualHeight = image.height();

                        dim.width = dim.actualWidth;
                        dim.height = dim.actualHeight;


                        // If no coordinates are set, make sure the image size is not smaller than the viewport
                        if(dim.topX < 0) {
                                dim.topX = 0;
                                dim.topY = 0;

                                if((dim.actualWidth/dim.viewportWidth) > (dim.actualHeight/dim.viewportHeight)) {
                                        dim.bottomY = dim.actualHeight;
                                        dim.bottomX = dim.viewportWidth * (dim.actualHeight/dim.viewportHeight);
                                }
                                else {
                                        dim.bottomX = dim.actualWidth;
                                        dim.bottomY = dim.viewportHeight * (dim.actualWidth/dim.viewportWidth);
                                }
                        }




                        var scaleX = dim.viewportWidth/(dim.bottomX - dim.topX);
                        var scaleY = dim.viewportHeight/(dim.bottomY - dim.topY);

                        dim.width = dim.width * scaleX;
                        dim.height = dim.height * scaleY;

                        dim.oldWidth = dim.width;
                        dim.oldHeight = dim.height;

                        dim.x = -(dim.topX * scaleX);
                        dim.y = -(dim.topY * scaleY);

                        image.resize();
                        image.store();

                        image.css({
                                position: "relative"
                                ,display: "block"
                        });

            if(dim.allowPan || dim.allowZoom) {
                image.mousedown(handleMouseDown);
                image.mouseover(handleMouseOver);
                image.mouseout(handleMouseOut);
            }
            else {
                image.css("cursor", dim.disabledCursor);
                image.mousedown(function(e) {
                        e.preventDefault();
                });
            }
                       




                        //image.mouseup(disableAndStore);
                        //
                }

                ,imagetool: function(settings) {
                        return this.each(function() {
                                var image = $(this).css({display: "none"});


                                // Add settings to each image object
                                var dim = $.extend({}, defaultSettings, settings);
                                image.data("dim", dim);

                                // Set up the viewport        
                                var viewportCss = {
                                        backgroundColor: "transparent"
                                        ,position: "relative"
                                        ,overflow: "hidden"
                                        ,width: dim.viewportWidth + "px"
                                        ,height: dim.viewportHeight + "px"
                                };
                                var viewportElement = $("<div class=\"viewport\"><\/div>");
                                viewportElement.css(viewportCss);

                                image.wrap(viewportElement);
                                if(dim.loading) {
                                        var loadingCss = {"margin-top": (dim.viewportHeight/2)-8, "margin-left": (dim.viewportWidth/2)-8};
                                        $("<img class=\"loading\" src=\"" + dim.loading + "\" />").css(loadingCss).insertAfter(image);
                                }



                                image.load(function() {
                                        $(this).next("img").remove();
                                        $(this).setup();

                                });

                                if($.browser.msie) {
									if ($.inArray("?",image.attr("src")) > 0) {
                                        image.attr("src", image.attr("src") + '&' + (Math.round(2048 * Math.random())));
									}
									else {
										image.attr("src", image.attr("src") + '?' + (Math.round(2048 * Math.random())));
									}
                                }
                        }); // end this.each
                } // End imagetool()
               
                ,store: function() {
                var image = $(this);
                var dim = image.data("dim");

                var scale = dim.width / dim.actualWidth;      

                dim.topX = (-dim.x) / scale;
                dim.topY = (-dim.y)  / scale;

                dim.bottomX = dim.topX + (dim.viewportWidth / scale);
                dim.bottomY = dim.topY + (dim.viewportHeight / scale);

                if(typeof dim.callback == 'function') {
                        dim.callback(parseInt(dim.topX), parseInt(dim.topY), parseInt(dim.bottomX), parseInt(dim.bottomY));
                }
                return image;
        }

        ,disableAndStore: function() {
                $(this).unbind("mousemove").store();      
        }

        ,zoom: function(e) {
                e.preventDefault();
                var image = $(this);
                var dim = image.data("dim");

                var factor = ( dim.origoY - e.clientY);

                dim.oldWidth = dim.width;
                dim.oldHeight = dim.height;

                dim.width = ((factor/100) * dim.width) + dim.width;
                dim.height = ((factor/100) * dim.height) + dim.height;

                if(image.resize()) {
                        dim.origoY = e.clientY;
                }
        }

        ,pan: function(e) {
                e.preventDefault();
                var image = $(this);
                var dim = image.data("dim");

                var deltaX = dim.origoX - e.clientX;
                var deltaY = dim.origoY - e.clientY;

                dim.origoX = e.clientX;
                dim.origoY = e.clientY;

				if (dim.allowPanX) {
					var targetX = dim.x - deltaX;
				}
				else
				{
                	var targetX = dim.x;
				}
                var targetY = dim.y - deltaY;

                var minX = -dim.width + dim.viewportWidth;
                var minY = -dim.height + dim.viewportHeight;

                dim.x = targetX;
                dim.y = targetY;
                image.move();
        } // end pan



        ,move: function() {
                var image = $(this);
                var dim = image.data("dim");
                var minX = -dim.width + dim.viewportWidth;
                var minY = -dim.height + dim.viewportHeight;

                if(dim.x > 0) {
                        dim.x = 0;
                }
                else if(dim.x < minX) {
                        dim.x = minX;
                }

                if(dim.y > 0) {
                        dim.y = 0;
                }    
                else if(dim.y < minY) {
                        dim.y = minY;
                }


                $(this).css({
                        left: dim.x + "px"
                        ,top: dim.y + "px"
                });
                return image;
        }





        ,resize: function() {
                var image = $(this);
                var dim = image.data("dim");
                // When attempting to scale the image below the minimum, set the size to minimum
                var wasResized = true;
                if(dim.width < dim.viewportWidth) {
                        dim.height = parseInt(dim.actualHeight * (dim.viewportWidth/dim.actualWidth));
                        dim.width = dim.viewportWidth;
                        wasResized = false;

                }

                if(dim.height < dim.viewportHeight) {
                        dim.width = parseInt(dim.actualWidth * (dim.viewportHeight/dim.actualHeight));
                        dim.height = dim.viewportHeight;
                        wasResized = false;
                }


                if(dim.width > dim.maxWidth) {
                        dim.height = parseInt(dim.height * (dim.maxWidth/dim.width));
                        dim.width = dim.maxWidth;
                        wasResized = false;
                }


                $(this).css({
                        width: dim.width + "px"
                        ,height: dim.height + "px"
                });


                // Scale at center of viewport
                var cx = dim.width /(-dim.x + (dim.viewportWidth/2));
                var cy = dim.height /(-dim.y + (dim.viewportHeight/2));


                dim.x = dim.x - ((dim.width - dim.oldWidth) / cx);
                dim.y = dim.y - ((dim.height - dim.oldHeight) / cy);

                $(this).move();
                return wasResized;
        }
        });
})(jQuery);