$(function(){
        var myImg = new Image();
        $(myImg).load(
           function(){
              zoomImage();
           }).attr("src", $("#product_img").attr("src"));

   function zoomImage(){
		var myImg = $("#product_img");
        var workZone = $("#workarea");
        var dragZone = $("#dragarea");
        var zoomSteps = 4;
        var zoomPerStep = '2';
        var imgBorder = 0;
        var sliderValue = 0;
        var startWidth = $(myImg).width();
        var startHeight = $(myImg).height();

        $(workZone).width($(myImg).width() + imgBorder);
        $(workZone).height($(myImg).height() + imgBorder);
        $(workZone).before('<div style="position:absolute; z-index:9999; padding:10px">' +
                                '<input style="padding-bottom: 5px; border:none; outline-style:none;" type="image" src="/js/zoom/zoom-touch/plus_passive.png"  value="+" id="zoomIn">' +
                                '<div id="slider" style="margin-left:6px"></div>' +
                                '<img src="/js/zoom/zoom-touch/small_passive.png" style="border:none; position:absolute; left:14px; top:86px;">' +
                                '<img src="/js/zoom/zoom-touch/small_passive.png" style="border:none; position:absolute; left:14px; top:71px;">' +
                                '<img src="/js/zoom/zoom-touch/small_passive.png" style="border:none; position:absolute; left:14px; top:56px;">' +
                                '<img src="/js/zoom/zoom-touch/small_passive.png" style="border:none; position:absolute; left:14px; top:41px;">' +
                                '<img src="/js/zoom/zoom-touch/small_passive.png" style="border:none; position:absolute; left:14px; top:26px;">' +
                                '<input style="padding-top: 2px; border:none; outline-style:none;" type="image" src="/js/zoom/zoom-touch/minus_passive.png" value="-" id="zoomOut" disabled>' +
                              '</div>');

        var zoomInBtn = $('#zoomIn');
        var zoomOutBtn = $('#zoomOut');
        var zoomSlider = $("#slider");

        $(zoomInBtn).click(function() {
            zoomIn(zoomPerStep);
            $(zoomSlider).slider('value', $(zoomSlider).slider('value')+1);
            sliderValue++;
            return false;
        });
        
        $(zoomOutBtn).click(function() {
            zoomOut(zoomPerStep);
            $(zoomSlider).slider('value', $(zoomSlider).slider('value')-1);
            sliderValue--;
            return false;
        });
        
        $("#slider").slider({
			        orientation: "vertical",
			        value: 0,
			        min: 0,
			        max: zoomSteps,
			        step: 1,
			        stop: function(event, ui) {
				        //$("#amount").val('$' + ui.value);
                        if(sliderValue < ui.value)
                           zoomIn(Math.pow(zoomPerStep, (ui.value-sliderValue)));
                        else if(sliderValue > ui.value)
                           zoomOut(Math.pow(zoomPerStep, (sliderValue-ui.value)));

                        sliderValue = ui.value;
			        }
		        });
                

        function zoomIn(zoomLevel){
          $(zoomInBtn).attr('disabled', 'disabled');

          old_left = parseInt($(dragZone).css('left'));
          old_top =  parseInt($(dragZone).css('top'));
          
          w = parseInt(($(myImg).width()*zoomLevel*2)  - $(workZone).width()  + (imgBorder*2));
          h = parseInt(($(myImg).height()*zoomLevel*2) - $(workZone).height() + (imgBorder*2));
          my_left =  '-' + parseInt(($(myImg).width()*zoomLevel)  - $(workZone).width()  + imgBorder);
          my_top =   '-' + parseInt(($(myImg).height()*zoomLevel) - $(workZone).height() + imgBorder);
          $(dragZone).width(w).height(h).css('left', my_left + 'px').css('top', my_top + 'px');

          left_diff =  parseInt($(dragZone).css('left')) - old_left;
          top_diff  =  parseInt($(dragZone).css('top'))  - old_top;
          
          $(myImg).css('left', parseInt($(myImg).css('left')) - left_diff + 'px').css('top', parseInt($(myImg).css('top')) - top_diff + 'px');
          $(myImg).animate({
                width:  parseInt($(myImg).width()*zoomLevel), 
                height: parseInt($(myImg).height()*zoomLevel),
                left:   '-=' + parseInt(($(myImg).width()*(zoomLevel-1))/2),
                top:    '-=' + parseInt(($(myImg).height()*(zoomLevel-1))/2),
            }, 'normal',
                function(){
                   if($(myImg).width() >= (startWidth*Math.pow(zoomPerStep, zoomSteps)) && $(myImg).height() >= (startHeight*Math.pow(zoomPerStep, zoomSteps))){
                      $(zoomInBtn).attr('disabled', 'disabled');
                   }
                   else
                      $(zoomInBtn).attr('disabled', false);
                      
                   $(zoomOutBtn).attr('disabled', false);
                }
            );
            $(myImg).draggable({ containment: 'parent',
                                 cursor: 'pointer',
                                 //stop: function(){stayInDiv()},
                               }).css("cursor", "pointer"); 
            
            return true;
        }


        function zoomOut(zoomLevel){
          $(zoomOutBtn).attr('disabled', 'disabled');
          old_left = parseInt($(dragZone).css('left'));
          old_top =  parseInt($(dragZone).css('top'));

          w = parseInt((($(myImg).width()/zoomLevel)*2)  - $(workZone).width()  + (imgBorder*2));
          h = parseInt((($(myImg).height()/zoomLevel)*2) - $(workZone).height() + (imgBorder*2));
          my_left =  (-1)*parseInt(($(myImg).width()/zoomLevel)  - $(workZone).width()  + imgBorder);
          my_top =   (-1)*parseInt(($(myImg).height()/zoomLevel) - $(workZone).height() + imgBorder);
          $(dragZone).width(w).height(h).css('left', my_left + 'px').css('top', my_top + 'px');
          
          left_diff =  old_left - parseInt($(dragZone).css('left'));
          top_diff  =  old_top - parseInt($(dragZone).css('top'));          
          $(myImg).css('left', left_diff + $(myImg).position().left + 'px').css('top', top_diff + $(myImg).position().top + 'px');
                    
          $(myImg).animate(
                { width:  $(myImg).width()/zoomLevel, 
                  height: $(myImg).height()/zoomLevel,
                  left:   getNewLeft(zoomLevel),
                  top:    getNewTop(zoomLevel),
                }, 'normal', 
                function(){
                   if($(myImg).width() <= startWidth && $(myImg).height() <= startHeight){
                      $(myImg).draggable("destroy").css("cursor", "default");
                      $(zoomOutBtn).attr('disabled', 'disabled');
                   }
                   else
                      $(zoomOutBtn).attr('disabled', false);
                   
                   $(zoomInBtn).attr('disabled', false);                      
                }
            );
        } 
        

        function getNewTop(zoomLevel){
          zoomMinus = (zoomLevel-1)/(2*zoomLevel);
          if(parseInt($(myImg).css('top')) + parseInt($(myImg).height()*zoomMinus) < 0) 
             return 0;
          else if(parseInt($(myImg).css('top')) + parseInt($(myImg).height()*zoomMinus) + parseInt($(myImg).height()/(zoomLevel)) > $(dragZone).height())
             return parseInt($(dragZone).height()-($(myImg).height()/zoomLevel)-imgBorder);
          else
             return parseInt($(myImg).css('top')) + parseInt($(myImg).height()*zoomMinus);           
        }
        
        function getNewLeft(zoomLevel){
          zoomMinus = (zoomLevel-1)/(2*zoomLevel); 
          if(parseInt($(myImg).css('left')) + parseInt($(myImg).width()*zoomMinus) < 0) 
             return 0;
          else if(parseInt($(myImg).css('left')) + parseInt($(myImg).width()*zoomMinus) + parseInt($(myImg).width()/(zoomLevel)) > $(dragZone).width())
             return parseInt($(dragZone).width() - ($(myImg).width()/zoomLevel)-imgBorder);
          else
             return parseInt($(myImg).css('left')) + parseInt($(myImg).width()*zoomMinus); 
        }      
   }
});