﻿// product range JavaScript File

var defaultPadding = 35;
var defaultHeight = 180;
var defaultWidth = 95;
var largeHeight = 250;
var largeWidth = 132;
var currentPosition = 2;
var positions = ['235', '115', '-2', '-112', '-225', '-345', '-460'];
var productData = ['prod_info_antiblister', 'prod_info_blistermedium', 'prod_info_blistersmall', 'prod_info_blisterontoes', 'prod_info_invisible', 'prod_info_overnight', 'prod_info_underfoot'];

function goToPosition(pos) {
    if (pos != currentPosition) {
        unbindEvents();

        //Calculate number of steps to move
        var steps = pos - currentPosition;
        if (steps < 0)
            steps = steps * -1;
        currentPosition = pos;
        var time = 500 * steps;

        hideShowButtons(pos);

        //Hide description
        $('#product_info div:visible').fadeOut(1000, function() {
            //Show description
            $('#' + productData[pos]).fadeIn(500);
        });

        //Reset large image
        $('#product_images div').each(function() {
            if (this.style.height == (largeHeight + 'px')) {
                var imgId = $(this).attr('id').replace('prod', '');
                $(this).animate({ 'height': defaultHeight + 'px', 'width' : defaultWidth + 'px', 'paddingTop': defaultPadding + 'px' }, 500, function() {
                    //Scroll carousel
                    $('#product_images').animate({ 'left': positions[pos] + 'px' }, time, function() {
                        //Enlarge image
                    $('#product_images div').eq(pos).animate({ 'height': largeHeight + 'px', 'width': largeWidth + 'px', 'paddingTop': '0' }, 500, function() {
                            //Rebind Events
                            rebindEvents(pos);
                            //Make images clickable
                        }).find('img').css('cursor', 'default');
                    });
                });
            }
        });
    }
    return false;
}

function unbindEvents() {
    $('#imgPrev').unbind();
    $('#imgNext').unbind();
    $('#product_images img').each(function() {
        $(this).unbind().css('cursor', 'default');
    });
}

function hideShowButtons(pos) {
    if (pos == 0)
        $('#imgPrev').hide();
    else if (pos == 6)
        $('#imgNext').hide();
    else {
        if ($('#imgNext').is(':hidden'))
            $('#imgNext').show();
        if ($('#imgPrev').is(':hidden'))
            $('#imgPrev').show();
    }
}

//Binds all click events for this 
function rebindEvents(pos) {
    $('#imgPrev').bind('click', function() {
        return goToPosition((pos - 1));
    });
    $('#imgNext').bind('click', function() {
        return goToPosition((pos + 1));
    });
    bindImageEvents();
}

//Binds image click events
function bindImageEvents() {
    $('#product_images img').each(function() {
        var imgId = parseInt($(this).attr('id').replace('prod', ''));
        if (imgId != currentPosition)
            $(this).bind('click', function() {
                goToPosition(imgId);
            }).css('cursor', 'pointer');
    });
}


$(document).ready(function() {
    //Bind button events
    $('#imgPrev').bind('click', function() {
        return goToPosition(1);
    });
    $('#imgNext').bind('click', function() {
        return goToPosition(3);
    });
    //Bind image events
    bindImageEvents();
});