(function ($) {
	$.fn.extend({
        vc3dEye: function(params) {
            vc3dEye(this[0]['className'], params);
            return
        }
    });
    var vc3dEye=function (selectorName,params) {
        selectorName = '.'+selectorName;
    	this.selector = $(selectorName);
    	this.imagePath = params.imagePath;
    	this.totalImages = params.totalImages;
    	this.imageExtension = params.imageExtension || "png";
    	this.isMoving = false;
    	this.currentX = 0;
    	this.currentImage=28;
    	function assignOperations() {
            selector.mousedown(function(target) {
                isMoving = true;
                currentX=target.pageX - this.offsetLeft;
            });

            $(document).mouseup(function() {
                isMoving = false;
            });

            selector.mousemove(function(target) {
                if (isMoving == true) 
                	loadAppropriateImage(target.pageX - this.offsetLeft);
            });

            selector.bind("touchstart", function(target) {
             	isMoving = true;
                var actualTouch = target.originalEvent.touches[0] || target.originalEvent.changedTouches[0];
                currentX = actualTouch.clientX;

            });

            $(document).bind("touchend", function() {
                console.log("touchend : isMoving="+isMoving);
                isMoving = false;
            });

            selector.bind("touchmove", function(target) {
                target.preventDefault();
                var actualTouch = target.originalEvent.touches[0] || target.originalEvent.changedTouches[0];
                if (isMoving == true) 
                	loadAppropriateImage(actualTouch.pageX - this.offsetLeft);
                else 
                	currentX = actualTouch.pageX - this.offsetLeft
            })
        }
        function loadAppropriateImage(newX) {
            if (currentX - newX > 17 ) {
                currentX = newX;
                currentImage = ++currentImage > totalImages ? 1 : currentImage;  
                if(currentImage != 0){
                    selector.css("background-image", "url(" + imagePath + currentImage + "0" + "." + imageExtension + ")");
                }else{
                    selector.css("background-image", "url(" + imagePath + currentImage  + "." + imageExtension + ")");
                }
                
            } else if (currentX - newX < -17) {
                currentX = newX;
                currentImage = --currentImage < 1 ? totalImages : currentImage;
                
                if(currentImage != 0){
                    selector.css("background-image", "url(" + imagePath + currentImage + "0" + "." + imageExtension + ")");
                }
                else{
                    selector.css("background-image", "url(" + imagePath + currentImage  + "." + imageExtension + ")");
                }
                
            }
            
        }

        function forceLoadAllImages() {
            var loadedImages = 2;
            var appropriateImageUrl = imagePath + "280." + imageExtension;
            selector.css("background-image", "url(" + appropriateImageUrl + ")");
            
            $(selectorName+" img").load(function() {
                selector.height(this.height).width(this.width);
            });

            for (var n = 1; n <= totalImages; n++) {
                appropriateImageUrl = imagePath + n+ "0" + "." + imageExtension;
                if(n == 1){
                    selector.append("<img src='" + appropriateImageUrl + "' style='display:none;' class='firstimg'>");
                }else{
                    selector.append("<img src='" + appropriateImageUrl + "' style='display:none;'>");
                }
                
                $(selectorName+" img").load(function() {
                    loadedImages++;
                    //console.log(loadedImages +'>='+ totalImages);
                    if (loadedImages >= totalImages) {
                        $(".VCc").removeClass("onLoadingDiv");
                        $(".VCc").text("")
                    }
                })
            }
        }

        function initializeOverlayDiv() {
            $(selector).html("<div style='height:100%;width:100%;' class='VCc onLoadingDiv'></div>");
        }

        initializeOverlayDiv();
        forceLoadAllImages();
        assignOperations();
    }

})(jQuery);