/**
* naTopNaviArti.js
* naTopNaviArti class
* @author gt
*/

/**
* class naTopNaviArti
*/
var naTopNaviArti = Class.create();
naTopNaviArti.prototype = {

  /**
  * constructor
  */
  initialize: function(options) {

  	// option parameters
  	this.options = Object.extend({
        mButton1: "naTopNavi_mButton_1",
        mButton2:	"naTopNavi_mButton_2",
        mButton3: "naTopNavi_mButton_3",
        mButton4: "naTopNavi_mButton_4",
        contain1: "topnav_container_1",
        contain2: "topnav_container_2",
        contain3: "topnav_container_3",
        contain4: "topnav_container_4",        
        subNavi1: "topnav_sublevel_container_1",
        subNavi2: "topnav_sublevel_container_2",
        subNavi3: "topnav_sublevel_container_3",
        subNavi4: "topnav_sublevel_container_4"
   	}, options || {});
  
  	// members
  	this.timerToInitState = null;
  	this.snInitState = [0,0,0,0,0];
  	
  	this.closeDelayTimers = [null, null, null, null, null];
  	
  	if($(this.options.subNavi1).style.display!='none'){
  	  this.snInitState[1] = 1;
  	}
  	if($(this.options.subNavi2).style.display!='none'){
  	  this.snInitState[2] = 1;
  	}
  
  	// Event bindings
  	this.onMouseOverBtn = this._onMouseOverBtn.bindAsEventListener(this);	
  	Event.observe(this.options.mButton1, "mouseover", this.onMouseOverBtn);
  	Event.observe(this.options.mButton2, "mouseover", this.onMouseOverBtn);
    Event.observe(this.options.mButton3, "mouseover", this.onMouseOverBtn);
    Event.observe(this.options.mButton4, "mouseover", this.onMouseOverBtn);
  	
  	/**
    this.onMouseOut = this._onMouseOut.bindAsEventListener(this);  
    Event.observe(this.options.contain1, "mouseout", this.onMouseOut);
    Event.observe(this.options.contain2, "mouseout", this.onMouseOut);
    */
  },

  /**
  * destructor
  */
  destroy: function() {
    Event.stopObserving(this.options.mButton1, "mouseover", this.onMouseOverBtn);
    Event.stopObserving(this.options.mButton2, "mouseover", this.onMouseOverBtn);
    Event.stopObserving(this.options.mButton3, "mouseover", this.onMouseOverBtn);
    Event.stopObserving(this.options.mButton4, "mouseover", this.onMouseOverBtn);    
    
    /**
    Event.stopObserving(this.options.contain1, "mouseout", this.onMouseOut);
    Event.stopObserving(this.options.contain2, "mouseout", this.onMouseOut);
    */ 
  },
  

  /**
  * _onMouseOverBtn
  */
  _onMouseOverBtn: function(event){
  	var elBtn = Event.element(event);
  	var elId = $(elBtn).readAttribute('id');
  	
  	// button1
  	if(elId == this.options.mButton1){
  	  if(this._snCurrState(this.options.subNavi1)) return 0;
  	  //$(this.options.subNavi2).hide();
      $(this.options.mButton2).removeClassName('selected');
      $(this.options.mButton1).addClassName('selected');
      
      if(this._snCurrState(this.options.subNavi2)){
        Effect.SlideUp(this.options.subNavi2,
          {
            duration:0.2, 
            queue: {
              positon: "front", 
              scope: "natopnavi2", 
              limit:1
            }
          });
      }
      
      
  	  Effect.SlideDown(this.options.subNavi1,
    		{
    		  duration:0.2, 
    		  queue: {
    		    positon: "front", 
    		    scope: "natopnavi1", 
    		    limit:1
    		  }
    		});
  	}
  	
  	// button2
  	if(elId == this.options.mButton2){
  	  if(this._snCurrState(this.options.subNavi2)) return 0;
  	  //$(this.options.subNavi1).hide();
  	  $(this.options.mButton1).removeClassName('selected');
  	  $(this.options.mButton2).addClassName('selected');
  	  
  	  if(this._snCurrState(this.options.subNavi1)){
  	    Effect.SlideUp(this.options.subNavi1,
          {
            duration:0.2, 
            queue: {
              positon: "front", 
              scope: "natopnavi1", 
              limit:1
            }
          });     	  
  	  }
  	  
  	  Effect.SlideDown(this.options.subNavi2,
  		{
  		  duration:0.2, 
  		  queue: {
  		    positon: "front", 
  		    scope: "natopnavi2", 
  		    limit:1
  		  }
  		});  	 
  	}
  	
  	
    // button3+4
    if(elId == this.options.mButton3 || elId == this.options.mButton4){
      if(this._snCurrState(this.options.subNavi1)){
        Effect.SlideUp(this.options.subNavi1,
          {
            duration:0.2, 
            queue: {
              positon: "front", 
              scope: "natopnavi1", 
              limit:1
            }
          });         
        $(this.options.mButton1).removeClassName('selected');
      }
      if(this._snCurrState(this.options.subNavi2)){
        Effect.SlideUp(this.options.subNavi2,
          {
            duration:0.2, 
            queue: {
              positon: "front", 
              scope: "natopnavi2", 
              limit:1
            }
          });         
        $(this.options.mButton2).removeClassName('selected');
      }
    }  	
  	
  	
  	if(this.timerToInitState) clearTimeout(this.timerToInitState);
  	this.timerToInitState = setTimeout(this._backToInitState.bind(this), 5000);
  },
  
  
  
  /**
   * _onMouseOut
   */
   _onMouseOut: function(event){
    
     var el = Event.element(event);
     var elId = $(el).readAttribute('id');
    
     return;
     
     // button1
     if(elId == this.options.contain1 ){
       Effect.SlideUp(this.options.subNavi1,
           {
             duration:0.2, 
             queue: {
               positon: "front", 
               scope: "natopnavi1", 
               limit:1
             }
           });        
     }
     
     // button2
     if(elId == this.options.contain2){
       Effect.SlideUp(this.options.subNavi2,
           {
             duration:0.2, 
             queue: {
               positon: "front", 
               scope: "natopnavi2", 
               limit:1
             }
           });    
     }
     
     if(this.timerToInitState) clearTimeout(this.timerToInitState);
     this.timerToInitState = setTimeout(this._backToInitState.bind(this), 5000);
   },  
  
  
  
  
  /**
  * _snCurrState
  */
  _snCurrState: function(element){
    if($(element).style.display!='none') return true;
    return false;  	
  },
  
  
  
  /**
  * _backToInitState
  */
  _backToInitState: function(){
  	
  	if(this.snInitState[1]==0 && this._snCurrState(this.options.subNavi1)){
  	  Effect.SlideUp(this.options.subNavi1,
    		{
    		  duration:0.2, 
    		  queue: {
    		    positon: "front", 
    		    scope: "natopnavi1", 
    		    limit:1
    		  }
    		});	
  	  $(this.options.mButton1).removeClassName('selected');
  	}  
  	if(this.snInitState[1]==1 && !this._snCurrState(this.options.subNavi1)){
  	  Effect.SlideDown(this.options.subNavi1,
    		{
    		  duration:0.2, 
    		  queue: {
    		    positon: "front", 
    		    scope: "natopnavi1", 
    		    limit:1
    		  }
    		});  	
  	  $(this.options.mButton1).addClassName('selected');
  	}
  	
    if(this.snInitState[2]==0 && this._snCurrState(this.options.subNavi2)){
      Effect.SlideUp(this.options.subNavi2,
        {
          duration:0.2, 
          queue: {
            positon: "front", 
            scope: "natopnavi2", 
            limit:1
          }
        }); 
      $(this.options.mButton2).removeClassName('selected');
    }  
    if(this.snInitState[2]==1 && !this._snCurrState(this.options.subNavi2)){
      Effect.SlideDown(this.options.subNavi2,
        {
          duration:0.2, 
          queue: {
            positon: "front", 
            scope: "natopnavi2", 
            limit:1
          }
        }); 
      $(this.options.mButton2).addClassName('selected');
    }  	
  	
  }    
  
}//class


// initialise on load, destroy on onload
var myNaTopNaviArti = null;

Event.observe(window, "load", function(event) {
  myNaTopNaviArti = new naTopNaviArti();
});

Event.observe(window, "unload", function(event) {
  if(myNaTopNaviArti) myNaTopNaviArti.destroy();
});