/**
 * @author Gerardo Gonzalez <http://www.clic.mx/>
 * @copyright 2009 Gerardo Gonzalez Flores
 * @url http://livepipe.net/control/tabs
 * @require prototype.js, scriptaculous.js, scriptaculous/effects.js
 */

 TabbedNewsRoll = Class.create({
          initialize: function(tabMenuId, notesContainerId) {
           
            // Elements div containers ids
            this.tabMenuId = tabMenuId;
            this.notesContainerId = notesContainerId;
            // Active elements status
            this.activeNoteDetail = "";    // The active menu detail 
            this.activeNote = "";   // The active note dive 
            // Element id prefixs
            this.tabPrefix = "item_"; // tab menu element prefix 
            this.notePrefix = "noteElement_";
            this.detailPrefix = "detail_";
            this.elementList = new Array();
            
            this.resetItem("");
            this.createEvents();    // Create and assign the events
            
            // Timed Excution 
            this.timeInterval = 5;
            this.periodicalExecution;
            
            this.startTimedExecution();
           
          },
          
         
          /** Creates and assign the tab events to each one of the tabs **/
          createEvents: function() {
              //this.resetItem(element);
              var counter = 0;
                    
             $(this.tabMenuId).select('a').each(function(name, index){
                
                 var tabElement = name.identify();
                 var idNumber = tabElement.replace(this.tabPrefix,''); //get only the tab id number 
                 var elementDiv = this.notePrefix + idNumber;
                 
                
                 // We don't hide the first note element
                 if (counter > 0) {
                    $(elementDiv).hide();
                    //alert(this.getFirstTab());
                    this.changeNote(this.getFirstTab());
                    
                 } 
                 ++counter;
                
                 
               /*** TABS ****/ 
               name.observe('mouseout', this.mouseOutActions.bind(this));
               name.observe('mouseover', this.mouseOverActions.bind(this));
               /*** NOTES ***/
              $(elementDiv).observe('mouseout', this.noteMouseOutActions.bind(this));
              $(elementDiv).observe('mouseover', this.noteMouseOverActions.bind(this));
               
               
            }, this);
          },
          
          // Hace los cambios programados por tiempo
          timedChanger:function(){
            // Cambia el item activo de manera periodica
            var nextTab = this.getNextNote(); // sacamos el siguiente elemento a mostrar
            var idNumber = nextTab.replace(this.notePrefix,''); //get only the tab id number
            var tabId = this.tabPrefix + idNumber;
            
            this.changeNote(tabId);
                        
          },
          
          resetItem: function(id){
                if ($(id)) {
                    $(id).hide();
                    //alert(id);
                    //this.activeNoteDetail = "";
                };
              },
         
         
         //Get the next note element
         getNextNote: function(){
            var nextNote = null;
            if($(this.activeNote)){
                nextNote = $(this.activeNote).next();
            }
            
            if(nextNote != null){
              nextNote = nextNote.identify();
            }else{
              nextNote = $(this.notesContainerId).firstDescendant().identify();
            }
            
            return nextNote;
         },
         
         // Get the first note element
         getFirstNote: function(){
             return  $(this.notesContainerId).firstDescendant().identify();
         },
         
         //  Get the first tab element
         getFirstTab: function(){
             return  $(this.tabMenuId).firstDescendant().firstDescendant().identify()
         },
         
         // Change element
         changeNote: function(event){
         
            // Element to activate
            var tabElement
            if(typeof event == 'object'){
              tabElement = event.findElement('a').identify(); // identify each one of the elements  
            }else if(typeof event == 'string'){
                tabElement =  $(event).identify(); // identify each one of the elements
            }else{
                return;
            }
                
            var idNumber = tabElement.replace(this.tabPrefix,''); //get only the tab id number
            // Active element
            var activeIdNumber = this.activeNoteDetail.replace(this.detailPrefix,''); 
            var detailElement = this.detailPrefix + idNumber;
            var noteToActivate = this.notePrefix + idNumber;
            var currentActiveNote = this.notePrefix + activeIdNumber; // The current active note..
            
            
            if (detailElement != this.activeNoteDetail) {
                // Hide current active note...
                if($(currentActiveNote)){
                    $(currentActiveNote).hide();
                }else{
                    $(this.getFirstNote()).hide();
                }
                // Shows new active note
                $(noteToActivate).show();
                this.activeNoteDetail = detailElement;
                this.activeNote = noteToActivate;
                this.resetItem(detailElement);
                
                // Check if the current element has an animation running
                if (!$(detailElement).hasClassName('animating')) {
                    this.detailEffec(detailElement);
                }
            }
            
            if (typeof event == 'object') {
                Event.stop(event);
            }
         },
         
         
         
         // Element Notes animation       
         detailEffec:function(detailElement){
            Effect.BlindDown(detailElement, {
                                scaleFrom: 0,
                                scaleTo: 100,
                                duration: 1,
                                queue: {
                                    position: 'end',
                                    scope: 'menuxscope' + detailElement,
                                    limit: 1
                                },
                                beforeStart: function(){
                                
                                    $(detailElement).addClassName('animating');
                                    
                                },
                                afterFinish: function(){
                                    $(detailElement).removeClassName('animating');
                                }
                                
                            });
         },
         
         mouseOutActions: function(event){
            this.startTimedExecution();
            if (typeof event == 'object') {
                Event.stop(event);
            }
         },
         
         mouseOverActions: function(event){
            this.stopTimedExecution();
            this.changeNote(event);
            if (typeof event == 'object') {
                Event.stop(event);
            }
            
         },
         
         
          noteMouseOutActions: function(event){
            this.startTimedExecution();
            Event.stop(event);
            
         },
         
         noteMouseOverActions: function(event){
            this.stopTimedExecution();
            Event.stop(event);
            
         },
         
         
         /** Periodical execution **/
        
        // Start the timed execution
        startTimedExecution: function(){
           this.periodicalExecution = new PeriodicalExecuter(this.timedChanger.bind(this), this.timeInterval);    // Create and assign the events           
        },
        
        // Stop the timed execution
        stopTimedExecution: function(){
            this.periodicalExecution.stop();           
        }
         
         
         
          
          
        });