(function ($) {
    $.fn.imageDetail = function (thumbnailID, fullID, originalImage, fullImage, thumbWidth, thumbHeight, viewPortWidth, viewPortHeight, fullWidth, fullHeight) {
        return this.each(function() {

            // Create vars for Thumbnail and Full Containers
            var IDthumb = $('#' + thumbnailID);
            var IDfull = $('#' + fullID);

            // mid width/height of thumbnail container
            var MidDisplayWidth = viewPortWidth / 2;
            var MidDisplayHeight = viewPortHeight / 2;

            // get full / thumb difference
            var widthDiff = fullWidth / thumbWidth;
            var heightDiff = fullHeight / thumbHeight;

            // Get Thumbnail Image path // Create Full Image path from Thumbnail
            var ImageThumbPath = $(IDthumb).find('img').attr('src');
            var thumbReplace = "thumb";
            var ImageFullPath = fullImage;
            if (ImageFullPath == "") {
            	ImageFullPath = ImageThumbPath.replace(thumbReplace, "full");
            }

            var thumbCont = $(IDthumb);
            
            // Set Thumbnail Container cursor to crosshair
            $(IDthumb).css('cursor','crosshair');

            // Thumbnail Mouseout Event
            $(IDthumb).mouseleave(function(event) {
                // Set Full Image as Full Container background-image
            	$(IDfull).stop();
                $(IDfull).fadeOut("fast");
                $(IDfull).css({
                    backgroundImage: 'url(' + originalImage + ')',
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: '50% 50%'
                });
                $(IDfull).fadeIn("slow");
            });
            
            // Thumbnail Mouseover Event
            $(IDthumb).find('img').mouseover(function(event) {
                // Set Full Image as Full Container background-image
                $(IDfull).css({
                    backgroundImage: 'url(' + ImageFullPath + ')',
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: '50% 50%',
                    opacity: 1
                });
                $(IDfull).css('backgroundPosition', '50% 50%');
            });
            
            // Thumbnail Mousemove Event
            $(IDthumb).find('img').mousemove(function(thumb) {
                // get Mouse Position over Thumbnail Container
                var pos = thumbCont.offset();
                pos.left = parseInt(pos.left);
                pos.top = parseInt(pos.top);

                // set Full Image background-position
                var bgx = (((thumb.pageX - pos.left) * -1) * widthDiff) + MidDisplayWidth;
                var bgy = (((thumb.pageY - pos.top) * -1) * heightDiff) + MidDisplayHeight;

                // run checks to ensure full image is always in view (no whitespace)
                // Check x coords
                if (bgx >= 0) {
                    bgx = 0;
                } else if (bgx <= (fullWidth - viewPortWidth) * -1) {
                    bgx = (fullWidth - viewPortWidth) * -1;
                }
                // Check y coords
                if (bgy >= 0) {
                    bgy = 0;
                } else if (bgy <= (fullHeight - viewPortHeight) * -1) {
                    bgy = (fullHeight - viewPortHeight) * -1;
                }
                
                bgx = parseInt(bgx);
                bgy = parseInt(bgy);
                
                str = ''+bgx+'px '+bgy+'px';
	           
            	//TODO: Meter suavizacion de movimiento!
                $(IDfull).stop().animate(
                	{backgroundPosition: str},
            		500,
    				"linear"
                );
            });
        });
    };
})(jQuery);