// Product Image zoom

MO.skiImages = [];
MO.skiImageZoom = function(){
    var self                = this;
    this.windowWidth        = 0;
    this.itemLength         = 0;
    this.delayThenReset;


    // switch between zoom or shrunk state
    this.changeSize = function(e, zoom, newHeight, oldHeight){
        // determine ski position
        self.findCurrentDimensions();
        self.itemLength  = self.itemLength * newHeight / oldHeight;
        distanceToTravel = Math.abs(self.windowWidth - self.itemLength);
        mouseXPercentage = e.pageX / self.windowWidth;
        itemPosition     = mouseXPercentage * distanceToTravel;

        // animate to new position and size
        $('#product_images img').animate({height: newHeight}, 500, function() {
            self.startReverseScroller();
        });
        if (self.itemLength > self.windowWidth) {
            $('#product_images .items').animate({left: -itemPosition}, 500)
        } else {
            $('#product_images .items').animate({left: 0}, 500)
        }
    };


    // disable the scroller and any actions related to moving it
    this.disableReverseScroller = function() {
        $('#product_images').unbind('mousemove');
        window.clearTimeout(self.delayThenReset);
        $('#product_images .items').stop();
    }


    // find the current window and ski lengths
    this.findCurrentDimensions = function() {
        self.windowWidth = $(window).width();
        self.itemLength  = 0;
        $('#product_images .item').each(function() {
            self.itemLength += $(this).outerWidth();
        })
    }


    // start up the scroller functionality
    this.startReverseScroller = function() {
        // remove any old versions of this
        $('#product_images')
            .unbind('mousemove')
            .unbind('mouseout');

        $('#product_images').mousemove(function(e) {
            // stop any current actions
            window.clearTimeout(self.delayThenReset);
            $('#product_images .items').stop();

            self.findCurrentDimensions();

            if (self.itemLength > self.windowWidth) {
                distanceToTravel = Math.abs(self.windowWidth - self.itemLength);
                mouseXPercentage = e.pageX / self.windowWidth;
                itemPosition     = mouseXPercentage * distanceToTravel;

                // console.log('windowWidth ' + windowWidth);
                // console.log('distanceToTravel ' + distanceToTravel);
                // console.log('pageX ' + e.pageX);
                // console.log('mouseXPercentage ' + mouseXPercentage);
                // console.log('itemPosition ' + itemPosition);

                $('#product_images .items').css('left', -itemPosition);
            }
        })
        // when you mouse out wait a second then return to default position
        .mouseout(function() {
            self.delayThenReset = window.setTimeout(function() {
                $('#product_images .items').animate({left: 0});
            }, 1000);
            
        })
    }


    // on start up loop through images
    $('#product_images img').each(function(){
        // for each image, create the img in js in order to grab it's dimensions
        var tmpImg = new Image();
        tmpImg.src = $(this).attr("src") + '?random=' + (new Date()).getTime();

        // once the image has loaded
        $(tmpImg).load(function() {
            // push new image
            MO.skiImages.push({
                img: $(this),
                height: this.height,
                width: this.width
            });

            // once all of the images are in setup the zooming...
            if(MO.skiImages.length === $('#product_images img').length){
                // add the flip button and hide the top sheet
                if ($('#product_images img').size() > 1) {
                    $('<div id="flip_ski" class="top"><span>View Base</span></div>').insertAfter('#image_zoom');
                    $('#product_images img:last').hide();

                    // toggle showing opposite ski sheet
                    $('#flip_ski').click(function() {
                        if ($(this).hasClass('top')) {
                            flipSkiText = 'View Top';
                        } else {
                            flipSkiText = 'View Base';
                        }

                        $(this).find('span:first').text(flipSkiText)
                        $('#product_images img:first, #product_images img:last').toggle();
                        $(this)
                            .toggleClass('top')
                            .toggleClass('bottom');
                    })
                }

                // start up the scroller
                self.startReverseScroller();

                // toggle zoom/shrink action
                $('#product_images img, #image_zoom').click(function(e){
                    // stop any current actions
                    self.disableReverseScroller();
                    window.clearTimeout(self.delayThenReset);
                    $('#product_images .items').stop();

                    // zoom or shrink accordingly
                    if (!$('#product_images').hasClass('expanded')) {
                        self.changeSize(e, true, 300, 180);
                        $('#image_zoom').addClass('active');
                    } else {
                        self.changeSize(e, false, 180, 300);
                        $('#image_zoom').removeClass('active');
                    }
                    $('#product_images').toggleClass('expanded');
                });
            }
        });
    });

    if ($('#product_images img').size() == 0) {
        $('#image_zoom').hide();
    }
};