var Thumbs = {
    mouseOverThumb: false,
    windowSize: null,
    capturedEvent: null,
    init: function() {
        var timeoutID = null;
        $$('a.thumb').each(function (elem, idx){
            if (typeof tsize == 'undefined' || typeof tsize[idx] == 'undefined') { return; }
            
            //clear img title
            var img = elem.getElement('img');
            img.erase('title');
        
            elem.addEvent("mouseover", function (e) {
                timeoutID = Thumbs.showPreview.bind(this, [elem, idx, e]).delay(500);
            });
            elem.addEvent("mouseout", function (e) {
                $clear(timeoutID);
                Thumbs.hidePreview();
            });
            elem.addEvent("mousemove", Thumbs.movePreview.bindWithEvent(this, idx));
        });
        
        // build preview el
        if (typeof Thumbs.previewEl == 'undefined') {
            Thumbs.buildPreviewEl();
        }        
    },
    
    buildPreviewEl: function () {
        Thumbs.previewEl = new Element('div', {
            'class': 'previewEl',
            'html': ''
        });
        
        $(document.body).adopt(Thumbs.previewEl);
    },
    
    showPreview: function (elem, idx, e) {
        Thumbs.mouseOverThumb = true;
        Thumbs.windowSize = $(document.body).getSize();
        
        // get the screenshot
        if (typeof tsize == 'undefined' || typeof tsize[idx] == 'undefined') { return; }
        
        var thumbimg = elem.getElement('img');
  
        var src = thumbimg.get('src');
        var file = src.slice(src.lastIndexOf('/'));
        src = src.replace('thumbs', 'screenshots');
        if (src.lastIndexOf('featured') == -1) {
            src = src.replace(file, '/featured' + file);
        }

        var img = new Element('img', {
            'src': src,
            'width': tsize[idx].width,
            'height': tsize[idx].height
        });  
        
        //position
        elem.fireEvent('mousemove', [e, idx]);        
        Thumbs.previewEl.adopt(img);
    },
    
    hidePreview: function () {
        Thumbs.mouseOverThumb = false;
        if (typeof Thumbs.previewEl == 'undefined') {
            return;
        }        
        Thumbs.previewEl.set({
            'html': '',
            'styles': {
                'display': 'none',
                'left': '-9000px',
                'top': '-9000px'
            }
        });
    },
    
    movePreview: function (e, idx) {
        if (!Thumbs.mouseOverThumb) {
            // before the preview div is shown,
            // the user may move the mouse over thumb
            // so i must capture the last mouse move, to avoid a flicker effect
            Thumbs.capturedEvent = e;
            return;
        }
        
        if ( Thumbs.capturedEvent != null) {
            e = Thumbs.capturedEvent;
            Thumbs.capturedEvent = null;
        }               
        
        var yoffset = 20;
        if (e.client.y + tsize[idx].height > (Thumbs.windowSize.y - 40)) {
            yoffset = Thumbs.windowSize.y - (e.client.y + tsize[idx].height) - 30;
        }

        var xoffset = 20;
        if (e.client.x + tsize[idx].width > (Thumbs.windowSize.x - 40)) {
            //xoffset = (Thumbs.windowSize.x - 40) - (e.client.x + tsize[idx].width) - (e.client.x - tsize[idx].width);
            xoffset = - tsize[idx].width - 20;
        }
        
        Thumbs.previewEl.set({
            'styles': {
                'left': e.page.x + xoffset,
                'top': e.page.y + yoffset,
                'display': 'block'
            }
        });
    }
    
};

window.addEvent('domready', function(){
    //if (Browser.Engine.trident) return;
    Thumbs.init();
});