﻿function hookUpTabs() {
    $('#colours_selector').parent().addClass('on');
    $('#features').hide();
    $('#features_selector').click(showFeatures);
    $('#colours_selector').click(showColours);
    try {
        $('#sizes').hide();
        $('#size_selector').click(showSizes);    
    } catch (err) { }
}

$(hookUpTabs);

function showColours(evt) {
    evt.preventDefault();
    $(this).parent().addClass('on');
    $('#size_selector').parent().removeClass('on');
    $('#features_selector').parent().removeClass('on');
    hideElement($('#features'));
    showElement($('#colours'));
    hideElement($('#sizes'));  
}

function showFeatures(evt) {
    evt.preventDefault();
    $(this).parent().addClass('on');
    $('#size_selector').parent().removeClass('on');
    $('#colours_selector').parent().removeClass('on');
    showElement($('#features'));
    hideElement($('#colours'));
    hideElement($('#sizes'));   
}

function showSizes(evt) {
    evt.preventDefault();    
    $(this).parent().addClass('on');
    $('#colours_selector').parent().removeClass('on');
    $('#features_selector').parent().removeClass('on');
    hideElement($('#features'));
    hideElement($('#colours'));
    showElement($('#sizes'));
}

function hideElement(el) {
    el.animate({ height: 'hide', opacity: 'hide' }, 'slow');
}

function showElement(el) {
    el.animate({  height: 'show', opacity: 'show' }, 'slow');
}