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 = $(id);
    var container = $(id + 'Container');
    var handle = $(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($('mainImageContainer') && $('mainImage') && $('mainImageHandle'))
    {
        slideEffect = new Fx.Tween('mainImageContainer');
        slidingTimer = toggleImage.delay(2000, null, 'mainImage');
        $('mainImageHandle').addEvents({
            click: function()
            {
                toggleImage('mainImage');
            }
        });
    }        
    
    if($('tabContainer'))
    {
        var list = $('tabContainer').getElements('li[class!=first]');
        
        list.each(function(item, index){
            
            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 = $(selectedEle.getProperty('contentId'));
            }
            else
                item.store('selected', false);
            item.addEvents({
                click: function(e)
                {
                    showTabContent(this, selectedEle);
                },
                mouseenter: function(e)
                {
                    showTabArrow(item);
                },
                mouseleave: function(e)
                {
                    hideTabArrow(item);
                }
            });
        
        });
    }      
    
    //alert(location.hash);
    var hash = location.hash.replace('#', '');
    if(hash != '')
    {
        var ele = $(document.body).getElement('[contentId=' + hash + ']');
        if(ele)
        {
            showTabContent(ele);
            showTabArrow(ele);
        }
    }
    
});

function showTabContent(item)
{
    var newContent = $(item.getProperty('contentId'));
    var oldContent = currDiv;//$(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 = $(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.retrieve('selected'))
    {
        item.getElements('div').each(function(item, i){
            item.setStyle('display', 'none');
        });
        item.removeClass('roll');
    }                      
}