var Cell = Class.create({
    name: 'MainCell',
    //Constant
    WOLABELS: 0,
    WLABELS: 1,
    
    //Public vars
    mainImageElement: null,
    mainMapElement: null,
    imageNormalSrc: null,
    imageLabelsSrc: null,
    rollOverDelay: 500,
    rollOutDelay: 1000,
    onCellClick: null,
    mode: null,
    
    //Private vars
    cellSections: null,
    openedSection: null,
    timerClose: null,
    timerOpen: null,
    
    //Init
    initialize: function(mainImageElement,mainMapElement){
        this.cellSections = new Array();
    
        this.mainImageElement = mainImageElement;
        this.mainMapElement = mainMapElement;
        Event.observe(this.mainImageElement,'click',_cellClick.bindAsEventListener(this));
        
        this.mode = this.WOLABELS;
    },
    
    //Public functions
    addSection: function(title, imageSrc, value){
        //New area
        var newSection = {
            title: title,
            imageSrc: imageSrc,
            value: value
        }
        
        //Shape, Coords & Events
        var areas = $$('area[title="' + title + '"]');
        
        for(var i = 0;i < areas.length;i++){
            Event.observe(areas[i],'mouseover',_cellRollOver.bindAsEventListener(this, newSection));
            Event.observe(areas[i],'mouseout',_cellRollOut.bindAsEventListener(this, newSection));
            Event.observe(areas[i],'click',_cellClick.bindAsEventListener(this, newSection));
        }
        
        this.cellSections[this.cellSections.length] = newSection;
        
        
        
    },
    setMode: function(mode){
        this.mode = mode;
        if(!this.openedSection){
            if(this.mode == this.WOLABELS)
                this.mainImageElement.writeAttribute('src',this.imageNormalSrc);
            else
                this.mainImageElement.writeAttribute('src',this.imageLabelsSrc);
        }
    },
    switchMode: function(){
        if(this.mode == this.WOLABELS)
            this.setMode(this.WLABELS);
        else
            this.setMode(this.WOLABELS);
    },
    //Events functions
    _rollOver: function(section){
        if(this.timerClose)
            this.timerClose.stop();
        this.timerClose = null;
    
        if(this.openedSection == section){
            if(this.timerOpen)
                this.timerOpen.stop();  
            this.timerOpen = null; 
        }else{
            this.timerOpen = new PeriodicalExecuter(_cellOpenSection.bind(this),(this.rollOverDelay / 1000));
        }
        
        this.rolledOverSection = section;
    },
    _rollOut: function(section){
        if(this.timerOpen)
            this.timerOpen.stop();
        this.timerOpen = null;
        
        if(this.timerClose)
            this.timerClose.stop();
        this.timerClose = new PeriodicalExecuter(_cellShowMain.bind(this),(this.rollOutDelay / 1000));
        this.rolledOverSection = null;
    },
    _click: function(section){
        if(this.openedSection){
            if(this.onCellClick)
                this.onCellClick(this.openedSection.value);
        }else{
            if(this.onCellClick)
                this.onCellClick(section.value);
        }
    },
    
    //Privates functions
    _showMain: function(){
        if(this.timerClose)
            this.timerClose.stop();
        this.timerClose = null;
        this.openedSection = null;
        
        if(this.mode == this.WOLABELS)
            this.mainImageElement.writeAttribute('src',this.imageNormalSrc);
        else
            this.mainImageElement.writeAttribute('src',this.imageLabelsSrc);
    },
    _openSection: function(){
        if(this.timerOpen)
            this.timerOpen.stop(); 
        this.timerOpen = null;
        
        if(this.timerClose)
            this.timerClose.stop();
        this.timerClose = null;
        
        this.openedSection = this.rolledOverSection;
        this.rolledOverSection = null;
        
        this.mainImageElement.writeAttribute('src',this.openedSection.imageSrc);
    }

});

function _cellRollOver(e){
    var data = $A(arguments);
    data.shift();
    
    this._rollOver(data[0]);
}
function _cellRollOut(e){
    var data = $A(arguments);
    data.shift();
    
    this._rollOut(data[0]);
}
function _cellClick(e){
    var data = $A(arguments);
    data.shift();
    
    this._click(data[0]);
}
function _cellOpenSection(){
    this._openSection();
}
function _cellShowMain(){
    this._showMain();
}