/// <reference path="jquery-1.2.6-vsdoc.js" />

$(function() {
    $('#header li').click(menuClick);
    $('#header li.content3').click();

    var defItem = $('ul.xferBox > li.selItem');
    selectInitalItem(defItem);
    $('ul.xferBox > li.carItem').click(selectItem);

});

var menuSel;
var menuClick;


function menuClick() {
    $('*').stop(true, true);
    $('#header li').removeClass('sel');
    menuSel = $(this).attr('class');
    $(this).addClass('sel');
    
    menuClick = $(this);

    if ($('.content:visible').length > 0) {
        $('.content:visible').css('display', 'none');
        showContent();
    }
    else {
        showContent();
    }

}


function showContent()
{
    $('#' + menuSel).css('display', 'block');
}

jQuery.fn.outerHtml = function() {
    return $('<div>').append(this.eq(0).clone()).html();
};

var fullW = 296;
var fullH = 221;
var smallW = 146;
var smallH = 108;
var marginW = 44;
var widthOffset = -20;


function selectInitalItem(growItem) {
    growItem.css({ width: fullW, height: fullH, marginTop:0 });
    growItem.parent().css({ marginLeft: widthOffset + (((smallW + marginW) * (1)) * -1) });
}

function selectItem() {
    if ($(this).hasClass('selItem') == false) {
        $('*').stop(true, true);
        var indexClicked = $(this).parent().children().index($(this));
        var animItem = $(this);
        var parentC = $($(this).parent());

        if (indexClicked == ($(this).parent().children().length - 1)) {
            indexClicked = 2;
            var prevItem = $($(this).parent().children().get(indexClicked - 1));
            animItem = $($(this).parent().children().get(indexClicked));
            $('li.selItem', parentC).css({ width: smallW, height: smallH, marginTop: 62 });
            $('li.selItem', parentC).removeClass('selItem');
            prevItem.addClass('selItem');
            prevItem.css({ width: fullW, height: fullH, marginTop: 0 });
            $(this).parent().css({ marginLeft: widthOffset + (((smallW + marginW) * (indexClicked - 2)) * -1) });
        }
        else
            if (indexClicked == 0) {
            indexClicked = $(this).parent().children().length - 3;
            var prevItem = $($(this).parent().children().get(indexClicked + 1));
            animItem = $($(this).parent().children().get(indexClicked));
            $('li.selItem', parentC).css({ width: smallW, height: smallH, marginTop: 62 });
            $('li.selItem', parentC).removeClass('selItem');
            prevItem.addClass('selItem');
            prevItem.css({ width: fullW, height: fullH, marginTop: 0 });
            $(this).parent().css({ marginLeft: widthOffset+(((smallW + marginW) * (indexClicked)) * -1) });
        }

        var curSel = $('li.selItem', parentC);
        curSel.removeClass('selItem');
        curSel.animate({ width: smallW, height: smallH, marginTop: 62 }, 'fast');

        animItem.animate({ width: fullW, height: fullH, marginTop: 0 }, 'fast', function() { $(this).addClass('selItem') });
        animItem.parent().animate({ marginLeft: widthOffset + (((smallW + marginW) * (indexClicked - 1)) * -1) }, 'fast');
    }
}