/**
 * @author mkwok
 */
(function(){

    $.fn.zoom = function(settings){
        // VERY IMPORTANT - must pass in the class or element of the parent.  
        // Sensor and zoombox are appended into the parent element
        // positioning also relies on where this parent element is
        // The parent would be the first parent container with positon set to relative
        
        
        
        settings = jQuery.extend({
            triggerOn: "mouseover",
            triggerOff: "mouseout",
            zoomContainer: "zoomBox",
            parent: null
        }, settings);
        
        var imageList = this;
        
        
		// check if sensor and zoomBox already exists
		if ($(settings["parent"]).find(".sensor").length == 0) {
			var zoomBox = $('<div class="' + settings["zoomContainer"] + '" style="display:none"><img class="zoomImg" /></div>');
			var sensor = $('<div class="sensor"></div>')
			var preloader = $('<div class="preloader" style="display:none"><img src="/images/preloader.gif" /></div>');
			$(settings["parent"]).append(zoomBox).append(sensor).append(preloader);
			
			
		}
		
        
        // get the height and width of zoomBox - includes border		 
        var zoomBoxHeight = $(zoomBox).outerHeight();
        var zoomBoxWidth = $(zoomBox).outerWidth();
        var zoomImg = $(".zoomImg");
        

        //preload images        
        var imgArray = [];

        $(window).load(function(){
			var count = 0;
			for (var i = 0; i < $(imageList).length; i++){
				imgArray[i] = new Image();
				$(imgArray[i]).load(function(){
					count++;
					zoomPreloaded = (count==$(imageList).length);

				}).attr('src',$(imageList[i]).attr("zoom"));
			}
		});
		
		

        $(imageList).each(function(i){
            var $current, zoomImgWidth, zoomImgHeight;
            
        
            $(this).attr("title","");
            $(this).attr("alt","");
            
          	$(this).parents(settings["parent"]).bind("mouseenter",function(e){
		
				// get the current img with the haszoom
				$current = $(this).find(".haszoom:visible");
				zoomBox = $(this).find("."+settings["zoomContainer"]);
				sensor = $(this).find(".sensor");

				
				
				// show preloader
				preloader.show();

                // get the height. width and position of the current element
                var curWidth = $current.attr("width");
                var curHeight = $current.attr("height");                

			    var curPosition = $(settings["parent"]).offset();
                
                // set the min max border for mouse move  events
                var border = {
                    xMin: curPosition["left"] + (zoomBoxWidth / 2),
                    xMax: curPosition["left"] + curWidth - (zoomBoxWidth / 2),
                    yMin: curPosition["top"] + (zoomBoxHeight / 2),
                    yMax: curPosition["top"] + curHeight - (zoomBoxHeight / 2)
                }
                
                // set the height and width of sensor
                // can be commented out and set in css
                sensor.css({
                    "width": curWidth + "px",
                    "height": curHeight + "px"                
                });
                
                //load the larger image
                zoomImg.load(function(){
					
                /*
    zoomImgWidth = $(this).attr("width");
                    zoomImgHeight = $(this).attr("height");

*/
                }).attr("src", $current.attr("zoom"))
				
                  zoomImgWidth = 900;
                  zoomImgHeight = 1122;
				
				
				
 					preloader.fadeOut();
					// show the sensor and zoomBox layer
                    sensor.show();
                    zoomBox.show();
                                
                
	                sensor.bind("mousemove", function(e){
						
						// catch mouse move events on the sensor
	                    var _left = (e.pageX <= border["xMin"]) ? border["xMin"] - curPosition["left"] - (zoomBoxWidth / 2) : (e.pageX >= border["xMax"]) ? border["xMax"] - curPosition["left"] - (zoomBoxWidth / 2) : e.pageX - curPosition["left"] - (zoomBoxWidth / 2);
	                    var _top = (e.pageY <= border["yMin"]) ? border["yMin"] - curPosition["top"] - (zoomBoxHeight / 2) : (e.pageY >= border["yMax"]) ? border["yMax"] - curPosition["top"] - (zoomBoxHeight / 2) : e.pageY - curPosition["top"] - (zoomBoxHeight / 2);
	                    
						// psotion zoomBox
	                    zoomBox.css({
	                        "left": _left,
	                        "top": _top
	                    });
	                    
	                    //position large image inside the zoomBox
						
						//alert(((e.pageX - curPosition["left"]) / curWidth) * -(zoomImgWidth - zoomBoxWidth));
						
						zoomImg.css({
	                        "left": ((e.pageX - curPosition["left"]) / curWidth) * -(zoomImgWidth - zoomBoxWidth),
	                        "top": ((e.pageY - curPosition["top"]) / curHeight) * -(zoomImgHeight - zoomBoxHeight)
	                    });
	                    
	                });                
				
				
				
				
				
				
					//end mouseenter	
				}).bind("mouseleave",function(e){
											
					//  hide everything and unload zoom img
					//  zoomBox.find("img").attr("src", "");
                    zoomBox.hide();
                    sensor.unbind("mousemove").hide();
                 	preloader.hide();
				//end mouseleave
			});
			
        });
    
        
    };
    
})(jQuery);