var materials = {
    layerHeight: 47,
    layerWidth: 196,
    delayOpenInterval: 300,
    delayCloseInterval: 400,
    layerIsOpen: false,
    queueWordId: false,
    layerFix: false,

    init: function() {
        this.keywordHolder = $('keyword_holder');
        this.fullMaterialsList = $('full_materials');
        
        document.addEvent('mouseup', this.layerUnLock.bind(this));
    },

    showMaterials: function() {
        this.curLayer = document.getElementById('keyword'+this.curWordId);
        if (typeof(this.curLayer) == 'undefined' || !this.curLayer) {
            this.curLayer = this.createLayer(this.curWordId);
        }

        if (typeof(this.curLayer) != 'undefined' && this.curLayer) {
            this.positioningLayer(this.curLayer, this.curElement);
            this.curLayer.scrollbar.reset();
            this.curLayer.style.visibility = 'visible';
            this.layerIsOpen = true;
        }
    },
    
    hideMaterials: function() {
        if (this.layerIsOpen && typeof(this.curLayer) != 'undefined' && this.curLayer) {
            this.curLayer.style.visibility = 'hidden';
            this.layerIsOpen = false;
            this.layerFix = false;
            if (this.queueWordId) {
                this.curElement = this.queueElement;
                this.curWordId = this.queueWordId;
                this.openTimerId = setTimeout('materials.showMaterials()', this.delayOpenInterval);
            }
        }
    },

    createLayer: function(wordId) {
        /*
        Костыль
        */
        this.keywordHolder = $('keyword_holder');

        var layer = new Element('div', {'id': 'keyword'+wordId, 'class': 'sluj2', 'styles': {'visibility': 'hidden'}}).injectInside(this.keywordHolder);
        layer.onmouseout = this.closeProcedure.bind(this);
        layer.onmouseover = this.cancelCloseProcedure.bind(this);
        layer.onmousedown = this.layerLock.bind(this);
        
        var popup = new Element('div', {'class': 'hlight-pop'}).injectInside(layer); //<div class="hlight-pop">
        var container = new Element('div', {'class': 'Container'}).injectInside(popup); //<div class="Container"> 

        var scroller = new Element('div', {'id': 'kwd_scrl_'+wordId, 'styles': {'height': '34px', 'overflow': 'hidden', 'position': 'absolute', 'width': '164px'}}).injectInside(container); //<div id="Scroller-1">


        var content = new Element('div', {'class': 'Scroller-Container'}).injectInside(scroller); //<div class="Scroller-Container">

        var scrollbarContainer = new Element('div', {'id': 'kwd_scrl_cnt_'+wordId, 'styles': {'position': 'absolute', 'top': '0', 'right': '0', 'width': '11px', 'height': '47px'}}).injectInside(popup); //<div id="Scrollbar-Container">
        scrollbarContainer.setHTML('<img src="/defa/i/scroll-up-arrow.gif" class="Scrollbar-Up" /><img src="/defa/i/scroll-down-arrow.gif" class="Scrollbar-Down" /><div class="Scrollbar-Track"><img src="/defa/i/scrollbar_handle.gif" class="Scrollbar-Handle" /></div>');

        var regExp, result;
        var seletedCell = new Array();

        /*
        Костыль?
        */
        this.fullMaterialsList = $('full_materials');

        var cells = this.fullMaterialsList.getElements('li');
        cells.each(function(el) {
            var regExp = /_(\d+)/g;
            while (result = regExp.exec(el.id)) {
                if (result[1] == wordId) {
                    seletedCell.push(el);
                    break;
                }
            }
        });
        
        var ulElement = new Element('ul', {'class': 'ad'}).injectInside(content);
        seletedCell.each(function(el, index){
            el.clone().injectInside(ulElement);
        });
        
        layer.scrollbar = new jsScrollbar(scrollbarContainer, new jsScroller(scroller, 100, 180), false, false);
        
        return layer;
    },

    positioningLayer: function (layer, element) {
        var elementPosition = $(element).getPosition();
        var elementSize = $(element).getSize();
        var scroll = windowInfo.getScrollPos();
        var windowSize = windowInfo.getWindowSize();

        var top, left;
        if (elementPosition.y-scroll.y > this.layerHeight) {
            top = elementPosition.y-this.layerHeight;
        }
        else {// if ((scroll.y + windowSize.this.layerHeight) - (elementPosition.y + elementSize.size.y) > this.layerHeight) {
            top = elementPosition.y + elementSize.size.y;
        }

        if (scroll.x+windowSize.width-elementPosition.x > this.layerWidth) {
            left = elementPosition.x;
        }
        else if ((elementPosition.x+elementSize.size.x) - scroll.x > this.layerWidth) {
            left = elementPosition.x + elementSize.size.x - this.layerWidth;
        }
        else {
            left = elementPosition.x;
        }
        layer.style.left = left+'px';
        layer.style.top = top+'px';
    },

    onMouseOverWord: function(element, wordId) {
        this.queueWordId = false;
        if (!this.layerIsOpen) {
            this.curElement = element;
            this.curWordId = wordId;
            this.openTimerId = setTimeout('materials.showMaterials()', this.delayOpenInterval);
        }
        else if (this.curElement != element && !this.layerFix) {
            this.queueElement = element;
            this.queueWordId = wordId;
            this.closeProcedure();
        }
        else {
            this.cancelCloseProcedure();
        }
    },
    
    onMouseOutWord: function(element) {
        if (!this.layerIsOpen) {
            clearTimeout(this.openTimerId);
        }
        else if (this.curElement == element && !this.layerFix) {
            this.queueWordId = false;
            this.closeProcedure();
        }
    },

    closeProcedure: function() {
        if (!this.layerFix) {
            this.closeTimerId = setTimeout('materials.hideMaterials()', this.delayCloseInterval);
        }
    },
     
    cancelCloseProcedure: function() {
        clearTimeout(this.closeTimerId);
    },

    layerLock: function () {
        if (this.layerIsOpen) {
            this.layerFix = true;
        }
    },
    
    layerUnLock: function () {
        if (this.layerIsOpen) {
            this.layerFix = false;
        }
    }


};

window.addEvent('domready', materials.init.bind(materials));