var defaultHeight = 98;
var isShow = true;
var duration = 3000; // in ms time
var slidingTimer;
var currDiv = "";
var selectedEle;
function toggleImage(id)
{
    $clear(slidingTimer);
    var image = document.id(id);
    var container = document.id(id + 'Container');
    var handle = document.id(id + 'Handle');
    if(!isShow)
    {
        slideEffect.start('height', container.getHeight(), image.getHeight());
        handle.set('src', 'images/minus.jpg');
        isShow = true;
    }
    else
    {
        slideEffect.start('height', container.getHeight(), defaultHeight);
        handle.set('src', 'images/plus.jpg');
        isShow = false;
    }
}


window.addEvent('domready', function(){

    if(document.id('mainImageContainer') && document.id('mainImage') && document.id('mainImageHandle'))
    {
        slideEffect = new Fx.Tween('mainImageContainer');
        slidingTimer = toggleImage.delay(2000, null, 'mainImage');
        document.id('mainImageHandle').addEvents({
            click: function()
            {
                toggleImage('mainImage');
            }
        });
    }        
    
    if(document.id('tabContainer'))
    {
        var list = document.id('tabContainer').getElements('li[class!=first]');
        list.each(function(item, index){
            initTab(item, false);
        });
    }      
    
    var hash = location.hash.replace('#', '');
    loadHashContent(hash);
    jQuery.history.init(loadHashContent,{ unescape: ",/" });
});

function loadHashContent(hash)
{
    if(hash != '')
    {
        var ele = document.id(document.body).getElement('[pageid=' + hash + ']');
        if(ele)
        {
            showTabContent(ele);
            showTabArrow(ele);
        }
    }
}

function initTab(item, isNew)
{
    
    if(item == null && isNew)
    {
        item = document.id('tabContainer').getElement('.new-tab');
        item.removeClass('new-tab');
    }
    if(!item)
        return;
    
    if(item.hasClass('roll'))
    {
        item.store('selected', true);
        selectedEle = item;
        var width = item.getWidth();   
        item.getElements('div').each(function(item, i){
            if(item.hasClass('arrow'))
                item.setStyle('left', Math.floor((width/2) - 12.5));        //12.5 is arrow width / 2
            item.setStyle('display', 'inline');
        });
        currDiv = document.id(selectedEle.getProperty('contentId'));
    }
    else
        item.store('selected', false);
    item.addEvents({
        click: function(e)
        {
            showTabContent(this, selectedEle);
        },
        mouseover: function(e)
        {
            showTabArrow(item);
        },
        mouseout: function(e)
        {
            hideTabArrow(item);
        }
    });
}

function showTabContent(item)
{
    currentPackage = item.id.replace('tab', '');
    var newContent = document.id(item.getProperty('contentId'));
    var oldContent = currDiv;//document.id(selectedEle.getProperty('contentId'));
    var contentLink = item.getProperty('contentLink');
    var contentTarget = item.getProperty('contentTarget');
    if(contentLink && contentTarget == "blank")
        window.open(contentLink);
    else if(contentLink)
        location.href = contentLink;
    
    if(selectedEle == item || !newContent || !oldContent)
        return;
        
    selectedEle.store('selected', false);
    selectedEle.getElements('div').each(function(item, i){
        item.setStyle('display', 'none');
    });
    selectedEle.removeClass('roll');
    oldContent.setStyle('display', 'none');
    
    item.getElements('div').each(function(item, i){
        item.setStyle('display', 'inline');
    });
    item.addClass('roll');
    newContent.setStyle('display', 'inline');
    item.store('selected', true);
    selectedEle = item;
    currDiv = document.id(selectedEle.getProperty('contentId'));
    
    //need to find a way to detect back button is pressed to reload the content
    //location.hash = item.getProperty('contentId');
}

function showTabArrow(item)
{
    var width = item.getWidth();
    item.getElements('div').each(function(item, i){
        if(item.hasClass('arrow'))
            item.setStyle('left', Math.floor((width/2) - 12.5));
        item.setStyle('display', 'inline');
    });
    item.addClass('roll');
}

function hideTabArrow(item)
{
    if(item && item != selectedEle)
    {
        item.getElements('div').each(function(item, i){
            item.setStyle('display', 'none');
        });
        item.removeClass('roll');
    }                      
}