window.addEvent('domready', function() {
    buildHomeGallery();
});

function buildHomeGallery(){
    var galItems = $$('#galItems .player');
    var gallery = $('smallGallery');
    var galDescs = $$('#galDescs div');
    var curImg = 0;


    var navCont = new Element('div', {
        'class': 'smallGallery_nav'
    });

    var navWindow = new Element('div', {'class':'nav_window'});
    var nav = new Element('div');
    var navFx = new Fx.Morph(nav);
    nav.inject(navWindow);
    navWindow.inject(navCont);
    navCont.inject($('galDescs'), "before");
    var prev = new Element('a', {
        'href': '#',
        'class': 'prev',
        'events':{
            'click': function(){showImage(curImg-1); return false;}
        }
    });
    var next = new Element('a', {
        'href': '#',
        'class': 'next',
        'events':{
            'click': function(){showImage(curImg+1); return false;}
        }
    });
    prev.inject(navCont, 'top');
    next.inject(navCont);
    var navLinks = [];

    galItems.each(function(el, i){
        //reorder the elements & set opacity to 0
        var z = (galItems.length -1) - i;
        if(i==0){
            el.setStyles({'z-index': z, 'opacity': 1});
            galDescs[i].setStyles({'opcaity': 1});
        }else{ 
            el.setStyles({'z-index': z, 'opacity': 0});
            galDescs[i].setStyles({'opacity': 0});
        }
        

        //create the nav
        if(i==0){
            var button = new Element('a', {
                'href': '#',
                'html': i+1,
                'class': 'active',
                'events': {
                    'click': function(){showImage(i); return false;}
                }
            });
        }else{
            var button = new Element('a', {
                'href': '#',
                'html': i+1,
                'events': {
                    'click': function(){showImage(i); return false;}
                }
            });
        }
        //inject the nav 
        navLinks.include(button);
        button.inject(nav);
    });

    var clear = new Element('br', {'class':'clear'});
    clear.inject(nav);
    clear.inject(navCont);
    var totNavPages = Math.ceil(navLinks.length/6 - 1);

    function showImage(i){
        if(i < 0 || i > galItems.length-1) return;

        galItems[curImg].morph({
            'opacity': 0
        });
        galItems[i].morph({
            'opacity': 1
        });
        
        galDescs[curImg].morph({
            'opacity': 0
        });
        galDescs[i].morph({
            'opacity': 1
        });
        
        navLinks[curImg].removeClass('active');
        navLinks[i].addClass('active');         
        slideNav(i);

        curImg = i;

        return false;
    }


    function slideNav(i){
        var center;
        if(i < 3){
            center = 3;
        }else if((navLinks.length-1)-i < 3){
            center = navLinks.length-2;
        }else{
            center = i;
        }
        var dest = (center - 3)*-23;
        var curMargin = nav.getStyle('margin-left').toInt();
        navFx.start({
            'margin-left': dest
        });

    }
    
}