/**
 * MaxiScale product overview JS.
 * 
 * 
 */

/**
 * Runs on document load.
 * 
 * 
 */
$(document).ready(function() {
    $('#overview_boxes').removeClass('active');
    $('.overview_box').bind('mouseover', overviewBoxOver);
    $('.overview_box').bind('mouseout', overviewBoxOut);
    // Wrap the child <span> in another <span>. This is because jQuery.fadeIn()
    // changes the display property to "inline", and we don't want that.
   // $('.overview_box').find('span').wrap('<span>');
    preloadOverviewImages();
});


// Used to determine the number of overview images loaded.
img_count = 0;

/**
 * Preload each overview image. Add an onload event. When image is loaded,
 * imageLoaded() will be called, which will fire fadeInOverviewBoxes() when all
 * images are loaded.
 * 
 * 
 */
function preloadOverviewImages() {
    $('.overview_box a').each(function(i) { 
        var path = (/^url\(([^\)]*)\)$/).exec(
            $(this).css('background-image'));
        var img = new Image;
        $(img).bind('load', imageLoaded);
        img.src = path[1].replace(/\"/g, '');
    });
}


/**
 * Fired by each image's onload event. When all overview images are loaded,
 * fade in the text.
 * 
 * 
 */
function imageLoaded() {
    img_count++;
    if (img_count == $('.overview_box').length) {
        fadeInOverviewBoxes();
    }
}


/**
 * Fades in the product overview boxes sequentially.
 * 
 * 
 */
function fadeInOverviewBoxes() {
    var delay;
    // Loop over each element, and call fadeInOverviewBox() via setTimeout(),
    // offsetting the timeout by a slight amount so that elements fade in
    // sequentially.


    $('.overview_box').each(function(i) {
        var obj = this;
        setTimeout(function() {
            $(obj).find('span.txt_wrapper span').fadeIn(300, activateOverviewHovers(i));
        }, 200);
    });
}


/**
 * Mouseover handler for the overview boxes.
 * 
 * 
 */
function overviewBoxOver() {
    // Don't do anything if parent container does not have the class "active".
    if (!$(this).parent().hasClass('active')) {
        return;
    }
    $(this).children('a').addClass('active');
    $('.overview_text').hide();
    var id = (/^overview_box_(\d)$/).exec($(this).attr('id'))[1];
    $('#overview_text_' + id).show();
}


/**
 * Mouseout handler for the overview boxes.
 * 
 * 
 */
function overviewBoxOut() {
    // Don't do anything if parent container does not have the class "active".
    if (!$(this).parent().hasClass('active')) {
        return;
    }
    $(this).children('a').removeClass('active');
    $('.overview_text').hide();
    $('#overview_text_default').show();
}


/**
 * Adds a class of "active" to the overview_boxes container. This prevents a
 * user from hovering over a box and having text replaced before the animation
 * is complete.
 * 
 * 
 */
function activateOverviewHovers(i) {
    if (i == ($('.overview_box').length - 1)) {
        // This setTimeout() is here because jQuery.fadeIn() apparently fires
        // off its callback prematurely. Add a delay before we allow hovers
        // and showing of text.
        setTimeout(function() {
            $('#overview_boxes').addClass('active');
        }, 500);
    }
}