//-- home sliding on hover for most popular
var popularItems = $$('.most-popular .item').length-1,
    initPos = -40,
    firstPos = 0,
    increment = 43,
    sliding = 0;

function moveDesignElements(i, hover, designElement1, designElement2) {
    var goToPos = (hover) ? firstPos + (i*increment) : initPos;
    var config = (!hover) ? {to:0, duration:.3, sync:true} : {to:1, duration:.25, delay:.25, sync:true};
    if(sliding) sliding.cancel();
    sliding = new Effect.Parallel([
        new Effect.Opacity(designElement1, config),
        new Effect.Opacity(designElement2, config),
        new Effect.Move(designElement1, {x:2, y: goToPos, mode: 'absolute', sync:true, transition:Effect.Transitions.sinoidal, duration:.3}),
        new Effect.Move(designElement2, {x:214, y: goToPos, mode: 'absolute', sync:true, transition:Effect.Transitions.sinoidal, duration:.3})
    ], {
        duration:.5
    });
    return;
}

//-- On LOAD
document.observe('dom:loaded', function() {
    //-- home slideshow 
    jQuery('.cycle-slideshow').after('<ul id="pager">').cycle({ 
        fx:     'fade',
        pager:  '#pager',
        pause:  true 
    });

    //-- home - most popular list
    if(el = $$('.most-popular .item').last()) el.addClassName('last');
    
    var designElement1 = new Element('div').setStyle({opacity:0}).addClassName('design-element-left');
    var designElement2 = new Element('div').setStyle({opacity:0}).addClassName('design-element-right');

    if($$('.most-popular-wrap-3')[0]) $$('.most-popular-wrap-3')[0].insert(designElement1).insert(designElement2);

    var i = 0;

    $$('.most-popular .item').each(function(el){
        var el = $(el);
        el.addClassName(i);
        el.observe('mouseover', function(event){
            var theElement = Event.findElement(event).up('li');
            var theAttr = (Prototype.Browser.IE8) ? theElement.getAttribute('class') : theElement.readAttribute('class');
            var theNumber = theAttr.match(/\d/)[0];
            moveDesignElements(theNumber, true, designElement1, designElement2);
        }).observe('mouseout', function(event){
            var theElement = Event.findElement(event).up('li');
            var theAttr = (Prototype.Browser.IE8) ? theElement.getAttribute('class') : theElement.readAttribute('class');
            var theNumber = theAttr.match(/\d/)[0];
            moveDesignElements(theNumber, false, designElement1, designElement2);
        });
        i++;
    });

    if($$('.whats-new a').length) {
        $$('.whats-new a').last().href=$$('.whats-new a')[0].href;
    }
});