var slider;
var ribbon;
var slides;

var sx;
var ix;

var num;

var gap;

var spacing;

var imgsrc = base_url + '/images/slider_screen.png';
var sscreen;
var ssdiv;

var periodical;
var pindex = 0;

window.addEvent('domready',function(){
    slider =  $$('#slider');
    ribbon = $$('#ribbon');
    slides = ribbon.getChildren('.item')[0];

    sx = slider.getDimensions()[0].x;
    ix = slides.getDimensions()[0].x;

    num = slides.length;

    gap = (sx - ix)/(num-1);
    //gap += num*3;

    spacing = sx/num;

    sscreen = new Element('img',{
        'src' : imgsrc
    });
    ssdiv = new Element('div',{
        'class' : 'item-screen'
    });

    zindex = 1;
    lm = 0;

    periodical = (function(){
        s = show.bind(slides[pindex]);
        s();
    }).periodical(4000);

    slides.each(function(e,i)
    {
        e.setStyle('z-index',zindex);
        zindex++;

        ssd = ssdiv.clone();
        ss = sscreen.clone();

        ssd.setStyle('z-index',zindex);
        zindex++;
        ribbon.grab(ssd.grab(ss));


        e.setStyle('margin-left',lm);
        e.setProperty('rel',i);
        ssd.setStyle('margin-left',lm);
        ssd.setProperty('rel',i);
        lm = lm + spacing;
    });


    $$('.item-screen').addEvent('mouseover', function()
    {
        $$('.item')[this.getProperty('rel')].fireEvent('mouseover');
    });

    $$('.item').addEvent('mouseover',show);


    slider.addEvent('mouseover',function(){
        $clear(periodical);
    });

    slider.addEvent('mouseleave', function(){
              
        periodical = (function(){
            s = show.bind(slides[pindex]);
            s();
        }).periodical(4000);
    });
                



});

var show = function()
{

    lm = 0;

    index = this.getProperty('rel');
    slides.each(function(e,i)
    {

        //  e.setStyle('margin-left',lm);
        e.morph({
            'margin-left':lm
        });


        if(i == index)
        {
            $$('.item-screen')[i].morph({
                'opacity':0,
                'margin-left':lm
            });
            lm = lm + ix;

            
            info = e.getFirst('.item-info');
            info.setStyle('display','block');
            info.morph({'opacity':0.8,'margin-top': '-'+info.getStyle('height')+'px'});


        }
        else
        {
            $$('.item-screen')[i].morph({
                'opacity':1,
                'margin-left':lm
            });
            lm = lm + gap;

            info = e.getFirst('.item-info');
            info.morph({'opacity':0.0,'margin-top': '0px'});
        }

    });

    pindex = (pindex+1)%num;
}