var Tile=new Class({
    extend: {
        Options: {
            checkTags:'img',
            relName:'tile',
            delay:50
        },
        current: null,
        preventShow:false,
        heap: [],
        rescan: function() {
            var key = Tile.Options.relName;
            $$(Tile.Options.checkTags+'[rel='+key+']').each(function(el) {
                Tile.heap.push(new Tile(el));
            });
        },
        hideAll: function() {
            Tile.heap.each(function(tile) {
                tile.hide();
            });
        },
        reposition:function() {
            Tile.heap.each(function(tile) {
                if (tile.direction == 'right') {
                    tile.card.style.left = (tile.e.position()['x'] - 20) + 'px';
                    tile.card.style.top  = (tile.e.position()['y'] - 20) + 'px';
                } else if (tile.direction == 'left') {
                    tile.card.style.left = (tile.e.position()['x'] - 320) + 'px';
                    tile.card.style.top  = (tile.e.position()['y'] - 20) + 'px';
                } else {
                    throw 'Wrong direction!';
                }
            });
        }
    },

    initialize:function(e) {
        e.on('mouseover', this.showDelayed.bind(this));
        e.on('mouseout', this.cancelTimer.bind(this));
        var direction = e.get('direction');
        this.direction = direction;
        this.e = e;
        if (direction == 'right') {
            this.card = this.buildRightDirectionCard(e.src, e.position(), e.get('alt'), e.get('description'), e.get('url'), e.get('target'));
        } else if (direction == 'left') {
            this.card = this.buildLeftDirectionCard(e.src, e.position(), e.get('alt'), e.get('description'), e.get('url'), e.get('target'));
        } else {
            throw 'Wrong direction!';
        }
        this.card.insertTo(document.body).hide();
        this.card.on('mouseout', this.mouseLeaveCard.bind(this));
    },

    mouseLeaveCard:function(e) {
        Tile.preventShow = true;
        if (!e) var e = window.event;
        var tg = (window.event) ? e.srcElement : e.target;
        var el = tg;
        while (el.className != 'tile-card' && el.nodeName != 'BODY') el= el.parentNode;

        if (el.className != 'tile-card') {return;}

        var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
        while (reltg != null && reltg != el && reltg.nodeName != 'BODY') reltg= reltg.parentNode;
        if (reltg== el) {return;}
        this.hide();
        Tile.preventShow = false;
    },

    buildLeftDirectionCard:function(img_src, position, title, description, url, target) {
        var card = $E('div', {'class': 'tile-card'});
        card.style.left = (position['x'] - 320) + 'px';
        card.style.top  = (position['y'] - 20) + 'px';
        card.insert([
            $E('span', {'style':'float:left;'}).insert([
                $E('div', {'class':'tile-card-title'}).insert(title),
                $E('div', {'class':'tile-card-description'}).insert(description)
            ]),
            $E('span', {'style':'float:right;padding:0 0 0 10px;display:inline;'}).insert([
                $E('img', {'src': img_src, 'class':'tile-card-img'}),
                $E('br'),
                $E('a', {'class':'tile-card-link', 'href':url, 'target':target}).insert('Подробнее')
            ])
        ]);
        return card;
    },

    buildRightDirectionCard:function(img_src, position, title, description, url, target) {
        var card = $E('div', {'class': 'tile-card'});
        card.style.left = (position['x'] - 20) + 'px';
        card.style.top  = (position['y'] - 20) + 'px';
        card.insert([
            $E('span', {'style':'float:left;'}).insert([
                $E('img', {'src': img_src, 'class':'tile-card-img'}),
                $E('br'),
                $E('a', {'class':'tile-card-link', 'href':url, 'target':target}).insert('Подробнее')
            ]),
            $E('span', {'style':'float:right;padding:0 0 0 10px;display:inline;'}).insert([
                $E('div', {'class':'tile-card-title'}).insert(title),
                $E('div', {'class':'tile-card-description'}).insert(description)
            ])
        ]);
        return card;
    },

    showDelayed: function() {
        if (Tile.preventShow) {
            return;
        }
        this.timer = this.show.bind(this).delay(Tile.Options.delay);
    },

    cancelTimer: function() {
        if (this.timer) {
            this.timer.cancel();
            this.timer = null;
        }
    },

    show: function() {
        Tile.hideAll();
        this.card.show('fade', {duration: 5});
        return this;
    },
    
    hide: function() {
        this.cancelTimer();
        this.card.hide();
        Tile.current = null;
        return this;
    }

});
document.on({ready: Tile.rescan});
window.on({resize: Tile.reposition});
document.write("<style type=\"text/css\"></style>");