/**
 * @author timharwood
 */
var ClientList = new Class({

    Implements: [Events, Options],
    
    options: {
        id: 'ClientList' + new Date().getTime() + "-" + Math.random(),
        source: 'ul',
        logoSelector: '.logo'
    },
    
    initialize: function(options){
        this.setOptions(options);
        
        this.prepElements()
    },
    
    prepElements: function(){
        var elem = $(this.options.source);
        
        if (!elem) 
            return;
        var elems = elem.getChildren();
        
        elems.each(function(el, idx){
        
            var loSpan = el.getFirst(this.options.logoSelector);
            if (loSpan && loSpan.getFirst('img')) {
                el.store('logo', loSpan.getFirst('img').get('src'));
                loSpan.dispose();
                
                el.setStyle('position', 'relative');
                el.addEvents({
                    mouseenter: this.onElementOver.bind(this)
                });
                
                el.store('isOver', 'isFalse');
                
            }
            
        }.bind(this));
        
        var rollcutout = new Element('div', {
            'class': 'rollcutout',
            styles: {
                
                'background-image': 'url(/include/images/rollover-tear.png)',
                display:'none'
            }
        });
        
        var rolltear = new Element('div', {
            'class': 'rolltear',
            styles: {
                 display:'none',
                'background-image': 'url(/include/images/rollover-tear-edge.png)'
            }
        });
        
        elem.adopt(rolltear);
        elem.adopt(rollcutout);
    },
    
    onElementOver: function(e){
    
        var lElem;
        if (e.target.retrieve('isOver')) {
            lElem = e.target;
        }
        else {
            lElem = e.target.getParents('li')[0];
        }
        
        
        if (!lElem || lElem.retrieve('isOver') != 'isFalse') {
            return;
        }
        
        lElem.store('isOver', 'isTrue');
        
        this.clearRollovers(lElem);
        
        
        var aElem = lElem.getFirst('a');
        if (!aElem) 
            return;
        
        var size = aElem.getSize();
        if (!size.x) 
            return;
        
        var bgs = size.x+'px auto';
        
        var lElem = aElem.getParent();
        var rollover = new Element('div', {
            'class': 'rollover',
            styles: {
                position: 'absolute',
                overflow: 'hidden',
                'z-index': 2,
                width: (size.x+4),
                height: (size.y-4),
                top: '0px',
                left: '-2px',
                cursor: 'pointer',
                'background-image': 'url(' + lElem.retrieve('logo') + ')',
                /*'background-size': size.x+'px auto',*/
                'background-position': 'center center'
            }
        });
        
       var rollcutout = new Element('div', {
            'class': 'rollcutout',
            styles: {
                position: 'absolute',
                'z-index': 3,
                width: (size.x+8),
                height: size.y,
                top: '-2px',
                left: '-3px',
                'background-image': 'url(/include/images/rollover-tear.png)',
                'background-position': 'left center'
            }
        });
        
        var rolltear = new Element('div', {
            'class': 'rolltear',
            styles: {
                position: 'absolute',
                'z-index': 4,
                width: '19px',
                height: '48px',
                top: '0px',
                right:'-5px',
                'background-image': 'url(/include/images/rollover-tear-edge.png)'
            }
        });
        
        rollover.adopt(rollcutout);
        rollover.adopt(rolltear);
        
        lElem.store('href', aElem.get('href'));
        document.status = aElem.get('href');
        
        rollover.addEvents({
            mouseout: this.onElementOut.bind(this),
            click: this.onElementClick.bind(this)
        });
        
        lElem.adopt(rollover);
        
    },
    
    clearRollovers: function(lElem){
        var elem = $(this.options.source);
        if (!elem) 
            return;
        
        var elems = elem.getChildren();
        elems.each(function(el, idx){
            if (el != lElem) {
                this.clearRollover(el);
            }
        }.bind(this));
    },
    
    
    clearRollover: function(lElem){
        lElem.store('isOver', 'isFalse');
        lElem.getChildren('.rollover').each(function(el, idx){
            $(el).hide();
            el.removeEvents();
            el.destroy();
        });
    },
    
    onElementOut: function(e){
        e.target.removeEvents();
        var lElem = e.target.getParents('li')[0];
        this.clearRollovers();  
    },
    
    onElementClick: function(e){
        var lElem = e.target.getParents('li')[0];
        document.location = lElem.retrieve('href');
    }
    
});