var MenuItem = JAK.ClassMaker.makeClass({
    NAME: "MenuItem",
    VERSION: "1.0"
});

MenuItem.prototype.$constructor = function(dom, steps){
    this.dom = dom;
    this.usemap = dom.id+'-map';
    this.imgmap = JAK.gel(dom.id+'-img');
    this.domA = JAK.gel(dom.id+'-A');
    this.domB = JAK.gel(dom.id+'-B');
    this.domC = JAK.gel(dom.id+'-C');
    this.domD = JAK.gel(dom.id+'-D');
    this.img = 0;
    this.steps = (steps) ? steps : 12;
    this.vertex = 0;
    
    this.animateInterval = null;
    this.timeoutedClose = null;
    this.listeners = new Array();

    this._animate = this._animate.bind(this);
    this._timedClose = this._timedClose.bind(this);

    JAK.Events.addListener(this.dom, 'click', this, '_open');
    JAK.Events.addListener(this.dom, 'mousemove', this, '_move');
    JAK.Events.addListener(this.dom, 'mouseout', this, '_close');
}

MenuItem.prototype._openAtEnd = function(e, elm){
    this.imgmap.useMap = '#'+this.usemap;
    console.log(this.imgmap.useMap);

    this.listeners.push(
        JAK.Events.addListener(this.domA, 'mouseover', this, '_overItem'));
    this.listeners.push(
        JAK.Events.addListener(this.domB, 'mouseover', this, '_overItem'));
    this.listeners.push(
        JAK.Events.addListener(this.domC, 'mouseover', this, '_overItem'));
    this.listeners.push(
        JAK.Events.addListener(this.domD, 'mouseover', this, '_overItem'));

    this.listeners.push(
        JAK.Events.addListener(this.domA, 'mouseout', this, '_over'));
    this.listeners.push(
        JAK.Events.addListener(this.domB, 'mouseout', this, '_over'));
    this.listeners.push(
        JAK.Events.addListener(this.domC, 'mouseout', this, '_over'));
    this.listeners.push(
        JAK.Events.addListener(this.domD, 'mouseout', this, '_over'));
}

MenuItem.prototype._closeAtStart = function(e, elm){
    this.imgmap.useMap = '';
    var len = this.listeners.length;
    for(var i = 0; i < len; i++)
        JAK.Events.removeListener(this.listeners.pop());
}


MenuItem.prototype._open = function(e, elm){
    pos = JAK.DOM.getPortBoxPosition(elm);
    elementX = Math.round(e.clientX - pos.left);
    elementY = Math.round(e.clientY - pos.top);
    if (elementX > 5 && elementX < 140 && elementY > 90 && elementY < 125){
        this.vertex = 1;
        if (!this.animateInterval)
            this.animateInterval = setInterval(this._animate, 50);
    } else {
        console.log('X: '+elementX);
        console.log('Y: '+elementY);
    }
}

MenuItem.prototype._over = function(e, elm){
    console.log('_over()');
    if (this.timeoutedClose != null){
        clearTimeout(this.timeoutedClose);
        this.timeoutedClose = null;
        console.log('timeout cleared...');
    }
    
    this.img = this.steps;
    var s = ""+(this.img*-143) + "px 0px";
    this.dom.style.backgroundPosition = s;    
}

MenuItem.prototype._overItem = function(e, elm){
    console.log('_overItem('+elm.id+')');
    if (this.timeoutedClose != null){
        clearTimeout(this.timeoutedClose);
        this.timeoutedClose = null;
        console.log('timeout cleared...');
    }

    if (elm == this.domA)
        this.img = this.steps + 4;
    if (elm == this.domB)
        this.img = this.steps + 3;
    if (elm == this.domC)
        this.img = this.steps + 2;
    if (elm == this.domD)
        this.img = this.steps + 1;

    var s = ""+(this.img*-143) + "px 0px";
    this.dom.style.backgroundPosition = s;
}

MenuItem.prototype._close = function(){
    if (this.img == 0 || this.timeoutedClose != null)
        return;
    this.timeoutedClose = setTimeout(this._timedClose, 500);
}

MenuItem.prototype._timedClose = function(){
    this.timeoutedClose = null;
    if (this.img == 0)
        return;

    this.vertex = 0;
    if (!this.animateInterval)
        this.animateInterval = setInterval(this._animate, 50);
}

MenuItem.prototype._move = function(e, elm){
    //if (this.img < this.steps)
    //    return;

    pos = JAK.DOM.getPortBoxPosition(elm);
    elementX = Math.round(e.clientX - pos.left);
    elementY = Math.round(e.clientY - pos.top);
    
    /*
        1: 9,93;57,11;74,7;85,23;65,61;21,89;9,93
        2: 21,89;105,40;118,48;121,65;80,90;28,90;21,89
        3: 28,90;127,90;137,108;128,123;84,125;30,95;28,90
        4: 30,95;121,147;122,166;106,177;67,157;30,95
    */

    //console.log('X: '+elementX+' Y: '+elementY);

    if (elementX > 5 && elementX < 140 && elementY > 90 && elementY < 125){
        this.dom.style.cursor = 'pointer';
    } else {
        this.dom.style.cursor = 'auto';
    }
}


MenuItem.prototype._animate = function(){
    if (this.vertex == 1){   // otevirame
        this.dom.style.zIndex = 2;
        if (this.img == this.steps) {
            clearInterval(this.animateInterval);
            this.animateInterval = null;
            this._openAtEnd();
        } else
            this.img += 1;    
    } else {            // zavirame
        this._closeAtStart();
        if (this.img == 0){
            clearInterval(this.animateInterval);
            this.animateInterval = null;
            this.dom.style.zIndex = 1;
        } else
            this.img -= 1;
    }

    var s = ""+(this.img*-143) + "px 0px";
    this.dom.style.backgroundPosition = s;
}