if (typeof(FOE) == 'undefined') FOE = {};
if (typeof(FOE.UI) == 'undefined') FOE.UI = {};
FOE.UI.HomeFeature    = function() {
    
    var mode = 'static'; // static, random or cycle
    
    // for static mode
    var selected_item = 0; // 0, 1 or 2, used for static mode
    
    // for cycle mode
    var cycle_speed = 5; // seconds
    
    var feature    = '#home-feature';
    var img_cont = '#feature-images';
    
    var timer;
    
    var init    = function() {
        $('body').addClass('dynamic');
        
        feature = $(feature);
        img_cont = $(img_cont);
        
        img_cont.wrapInner('<div id="feature-plane"></div>');
        switch (mode) {
            case 'static':
                show_item(selected_item, false);
                break;
                
            case 'cycle':
                show_item(0, false);
                timer = setInterval("FOE.UI.HomeFeature.next()", cycle_speed*1000);
                break;
                
            default:
                show_item(Math.round(Math.random()*2), false);
                break;
        }
        
        feature.find('li').mouseover(function(e){
            clearTimeout(timer);
            show_item(feature.find('li').index(this), true);
        });
        
    };
    
    var show_item = function(item_index, animate) {
        
        if (!feature.find('li:eq('+item_index+')').hasClass('cur')) {
        
            feature.find('li').removeClass('cur').end().find('li:eq('+item_index+')').addClass('cur');
        
            var next_img = img_cont.find('img:eq('+item_index+')');
            var other_imgs = img_cont.find('img:not(img:eq('+item_index+'))');
            if (animate) {
                next_img.css('top', '-169px').css('z-index', '10').animate({
                    'top': 0
                }, {
                    complete: function() {
                        other_imgs.css('z-index', '1').css('top', 0);
                        next_img.css('z-index', 2);
                    }
                });
                other_imgs.animate({
                    'top': '169px'
                });
            }else{
                other_imgs.css('z-index', '1').css('top', 0);
                next_img.css('z-index', 2);
            };
            
            
        }
    };
    
    var next = function() {
        var idx = feature.find('li').index($('li.cur')[0]);
        var next = idx + 1;
        if (idx == feature.find('li').length-1) {
            next = 0;
        }
        
        show_item(next, true);
    };
    
    return {
        init: init,
        next: next
    };
    
}();
jQuery(function($) { FOE.UI.HomeFeature.init(); });