var HighLights = new Class({
    
    initialize: function(divButton0ID, divButton1ID, divButton2ID, divButton3ID,
                         rotationInterval, rotationAction, jsonVideos, imgTV0ID, imgTV1ID, imgTV2ID, imgTV3ID,
                         imgPlayID, lnkTVID, lnkTVPlayID)                  
    {
        var classRef = this;
        
        this.divButtons = new Array();        
        this.divButtons[0] = $(divButton0ID);
        this.divButtons[1] = $(divButton1ID);
        this.divButtons[2] = $(divButton2ID);
        this.divButtons[3] = $(divButton3ID);
        
        this.rotationInterval = rotationInterval;
        this.rotationAction = rotationAction;                        
        this.Videos = JSON.decode(jsonVideos);                     
        
        this.imgTVs = new Array();
        
        this.imgTVs[0] = $(imgTV0ID);
        this.imgTVs[1] = $(imgTV1ID);
        this.imgTVs[2] = $(imgTV2ID);
        this.imgTVs[3] = $(imgTV3ID);

        this.imgPlay = $(imgPlayID);                
        this.lnkTV = $(lnkTVID);
        this.lnkTVPlay = $(lnkTVPlayID);                
        
        this.id_of_settimeout = null;        
        this.selectedButtonIndex = null;

        this.lnkTV.href = this.Videos[0].PageURL;
        this.lnkTVPlay.href = this.Videos[0].PageURL;                
                
        for(var i=0; i < this.Videos.length ;i++)
        {            
            this.setEvents(i);
        }                                             
        
        this.imgPlay.addEvent('mouseover', function(e){
            e = new Event(e);  
            clearTimeout(classRef.id_of_settimeout);
            e.stop();
        });
        
        this.imgPlay.addEvent('mouseout', function(e){
            e = new Event(e);  
            if(classRef.rotationAction == true)            
            {
                classRef.rotateImages(classRef.selectedButtonIndex);
            }
            e.stop();
        });                                
        
        //check if should rotate
        if(this.rotationAction)
        {
            this.rotateImages(0);
        }
        else
        {
            classRef.selectButton(0);
        }
    },
    
    setEvents: function(index)
    {
        var classRef = this;
        
        //click events on buttons
        this.divButtons[index].addEvent('click', function(e){
            e = new Event(e);
            document.location = classRef.Videos[index].PageURL;
            e.stop();
        });           
    
        //mouseover events on buttons    
        this.divButtons[index].addEvent('mouseover', function(e){
            e = new Event(e);                                  
            classRef.selectButton(index);
            clearTimeout(classRef.id_of_settimeout);
            e.stop();
        });
        
        //mouseout events on buttons
        this.divButtons[index].addEvent('mouseout', function(e){
            e = new Event(e);  
            if(classRef.rotationAction == true)            
            {
                classRef.rotateImages(index);
            }
            e.stop();
        });
        
        //events for pause rotation of images when mouseover on imgTV and imgPlay
        this.imgTVs[index].addEvent('mouseover', function(e){
            e = new Event(e);  
            clearTimeout(classRef.id_of_settimeout);
            e.stop();
        });
        
        this.imgTVs[index].addEvent('mouseout', function(e){
            e = new Event(e);  
            if(classRef.rotationAction == true)            
            {
                classRef.rotateImages(classRef.selectedButtonIndex);
            }
            e.stop();
        });
    },
    
    selectButton: function(index)
    {
        this.selectedButtonIndex = index;
        
        //set all buttons to default classes
        this.divButtons[0].className = 'bottons hand';
        this.divButtons[1].className = 'bottons hand';
        this.divButtons[2].className = 'bottons hand';
        this.divButtons[3].className = 'bottons hand';
            
        //set class for current button
        this.divButtons[index].className = 'buttonOver'+index+' bottons  hand';
               
        for(var i=0; i < this.Videos.length ;i++)
        {
            this.imgTVs[i].className = 'invisible';
            
            this.imgTVs[i].alt = this.Videos[index].Alt; //alt for IE            
            this.imgTVs[i].title = this.Videos[index].Alt; //title for FF   
        }                            

        this.imgTVs[index].className = 'visible';
        
        this.imgPlay.alt = this.Videos[index].Alt;     //alt for IE
        this.imgPlay.title = this.Videos[index].Alt; //title for FF                   
        
        this.lnkTV.href = this.Videos[this.selectedButtonIndex].PageURL;
        this.lnkTVPlay.href = this.Videos[this.selectedButtonIndex].PageURL;        
    },
    
    rotateImages: function(index)
    {
        if(index == this.Videos.length)
        {
            index = 0;
        }            
        this.selectButton(index);                       
        
        index++;                
        this.id_of_settimeout = setTimeout("page.highLights.rotateImages("+index+");", this.rotationInterval);
    }         
});