/*
This class functions as a bridge between user input and the the content rotator AfkSlider2.js 

It provides a collection of buttons (called navs) that allows the user to select which piece of content
they want to view.  

The animations for the navigation (navs) are at the bottom of this class.

*/
function AfkSliderControl(navDivID, showNavDivListener)
{
  this.navDivID = navDivID;

  this.uniqueWindowID = window.afkWindowObjectMap.addObject(this);
  this.objectEvalString = "window.afkWindowObjectMap.getObjectByID(" + this.uniqueWindowID + ")";

  this.showNavDivListener = showNavDivListener;

  this.slider = null; //a reference to the slider object to be controlled  
  this.navItems = null;
  this.navDiv = null; 
  this.navItems = null;
  this.curItemN = null;
  
  this.timerID = null;
  this.controlsVisible = false; //used to stop multiple show / or hide animations

  this.contentCount = null;
  //this.zIndexNavDiv = 6;


  //-------------------------------------------------------------------------------
  //
  //-------------------------------------------------------------------------------
  this.initialize = function(sliderObject)
  {
    //TODO this.validate();
    this.slider = sliderObject;
  
    this.navDiv = $(this.navDivID).eq(0);
    this.navItems = this.navDiv.find(".slider_nav_item");
    this.contentCount = this.slider.getContentCount(); 
    
    //if nav items count == 0, then generate them
    if(this.navItems.size() == 0){
      for(var i=0; i<this.contentCount; i++){
        this.navDiv.append( this.getNavItemHtml(i));
      }
      this.navItems = this.navDiv.find(".slider_nav_item");
    }
    
    //Set a convenience variable in each nav item that relates to the content item. 
    for(var i=0; i<this.navItems.size(); i++ ){
      this.navItems[i].itemN = this.navToItemN(i);
    }
    
    this.initializeEventHandlers();
    this.curItemN = this.slider.getCurrentN();
    this._animationInit();
  };

  //-----------------------------------------------------------------------
  // 
  //-----------------------------------------------------------------------    
  this.initializeEventHandlers = function(){
    //................................
    //set varaibles used during events
    this.navDiv[0].sliderControlLink = this;
    for(var i=0; i<this.navItems.size(); i++ ){
      this.navItems[i].sliderControlLink = this;
    }
    var backLink = this;
    //Event handlers for showNavDiv
    this.showNavDivListener.add(this, "mouseover", function(){
      backLink.eventToShowControls();
      backLink.slider.stopTimer();
    });
    this.showNavDivListener.add(this, "mouseleave", function(){
      backLink.eventToHideControls();
      backLink.slider.restartTimer();
    });
    
    //navDiv
    this.navDiv.mouseover( function(){
      this.sliderControlLink.eventToShowControls();
    });
    this.navDiv.mouseleave( function(){
      this.sliderControlLink.eventToHideControls();
    });
    
    
    //Event handlers for nav items      
    this.navItems.click( function(){
        this.sliderControlLink.navClicked($(this));
    });
    
    this.navItems.mouseover( function(){
        this.sliderControlLink.navMouseEnter($(this));
    });
    
    this.navItems.mouseleave( function(){
        this.sliderControlLink.navMouseLeave($(this));
    });            
  };


  this.navClicked = function(nav){
      this.slider.selectItem(nav[0].itemN);
      this.slider.restartTimer();
      this._animateNavClicked(nav);
  };
  
  this.navMouseEnter = function(nav){
      this._animateNavMouseEnter(nav);
  };
  
  this.navMouseLeave = function(nav){
      this._animateNavMouseLeave(nav);
  };

  //-----------------------------------------------------------------------
  //
  //-----------------------------------------------------------------------
  this.itemChanged = function(nextItemN)
  {
    this._animateItemChanged(this.curItemN, nextItemN); 
    this.curItemN = nextItemN;
  };

  //-----------------------------------------------------------------------
  //
  //-----------------------------------------------------------------------
  this.eventToHideControls = function(){
    window.clearInterval(this.timerID);
    this.timerID = setTimeout(this.objectEvalString + ".hideControls()", 300);
  }
  this.eventToShowControls = function(){
    window.clearInterval(this.timerID);
    this.timerID = null; 
    this.showControls();
  }



  //-----------------------------------------------------------------------
  //
  //-----------------------------------------------------------------------
  this.showControls = function()
  {
    if(this.controlsVisible == false)
    {
      this.controlsVisible = true;
      this._animateShowHide(true);
    }
  };

  //-----------------------------------------------------------------------
  //
  //-----------------------------------------------------------------------
  this.hideControls = function(){
    if(this.controlsVisible == true){
      this.controlsVisible = false;
      this._animateShowHide(false);
    }
  };

  //-----------------------------------------------------------------------------------------------------------------
  //---------------------- simply validates setup and prints nice error messages ------------------------------------
  //-----------------------------------------------------------------------------------------------------------------
  this.validate = function()
  {
    if(this.navDiv.size() != 1)
      throw "navDivID[" + this.navDivID + "] matches " + this.navDiv.size() + " elements. navDivID must match only a single object. Example: '#slider_nav_div'.";    
    
    /* 
    if(this.contentItems.size() != this.navItems.size())
      throw "The number of content items and nav items must be equal [" + this.contentItems.size() + ", " + this.navItems.size() + "]"; 
    */
   
  };



  //-----------------------------------------------------------------------------------------
  // use the below two functions to map between nav item numbers and content item numbers.
  // necessary if you use float right ordering, but want navs numbered left to right.
  //-----------------------------------------------------------------------------------------
  this.navToItemN = function(n)
  {
    //return this.contentCount - 1 - n;   //use this if float right
    return n;
  };
  this.itemToNavN = function(n)
  {
    //return this.contentCount - 1 - n;   //use this if float right
    return n;
  };
 





  //###############################################################################
  //############################### ANIMATIONS ####################################
  //###############################################################################


  //-------------------------------------------------------------
  // this is the function that generates the nav HTML if no
  // navs are supplied already
  //-------------------------------------------------------------
  this.getNavItemHtml = function(i)
  {
    i = this.navToItemN(i)+1;
    return "<div class=\"slider_nav_item\">"+(i)+"</div>";
  };

  //-----------------------------------------------------------------------
  // this is called during initialization
  //-----------------------------------------------------------------------
  this._animationInit = function()
  {
    this.navItems.addClass("half_transparent");
    this.navDiv.hide();
    //this.navDiv.css('zIndex', this.zIndexNavDiv);
    
    if(this.curItemN != -1){
        var curNavN = this.itemToNavN(this.curItemN);
        var curNavItem = this.navItems.eq(curNavN);
        curNavItem.addClass("slider_nav_item_current");
    }
  };

  //-----------------------------------------------------------------------
  // called when the entire slider control is to be shown/hidden
  //-----------------------------------------------------------------------
  this._animateShowHide = function(show){
//    this.navDiv.stop();   //TODO low - find a way to stop the animation if it is already midway. This has bad side affects right now though.
    if(show){
      this.navDiv.fadeIn('fast');
    }else{
      this.navDiv.fadeOut('slow');
    }
  };

  //-----------------------------------------------------------------------
  //
  //-----------------------------------------------------------------------
  this._animateItemChanged = function(curItemN, nextItemN){
    if(curItemN >=0){
        var curNavItemN  = this.itemToNavN(curItemN);
        var curNavItem   = this.navItems.eq(curNavItemN);
        curNavItem.removeClass("slider_nav_item_current");
    }
    var nextNavItemN = this.itemToNavN(nextItemN);
    var nextNavItem  = this.navItems.eq(nextNavItemN);
    nextNavItem.addClass("slider_nav_item_current");
  };


  //------------------------------------
  this._animateNavClicked = function(nav){
      
  };
  this._animateNavMouseEnter = function(nav){
      nav.stop(true, true);
      nav.removeClass("half_transparent", 250);
      //nav.animate({opacity: 1.0}, 250);
  };
  this._animateNavMouseLeave = function(nav){
      nav.stop(true, true);
      nav.addClass("half_transparent", 250);
      //nav.animate({opacity: 0.5}, 250); 
  };


  //-----------------------------------------------------------------------
  // animation choices
  //-----------------------------------------------------------------------

    
}