/********************************************************************

 

      FOREX.COM - CONTENT TOGGLE

      

      =========================================

      Author: Chris Erwin (chris@teehanlax.com)

      Agency: teehan+lax

      Date: July 6, 2008

      =========================================

            

      Description

      -------------------------------------------------------------

      This class sets up a group of links that toggle between content.

      

      Each link has a matching content item that gets displayed when the link is clicked. The content that was previously visible becomes hidden.

      

      There is a content container that gets animated each time there is a change

            - the container fades out 

            - the container animates height to the height of the new content

            - the container fades in

      

      Public Methods

      -------------------------------------------------------------

      initialize (constructor)

            Arguments:

                  - toggleID (string) : the ID of the main toggle container that contains both the toggle nav and toggle content items

                  - defaultContentLinkID (string, null) : the id of the link associated to the content you want to display on load

            

      change

            Arguments:

                  - contentLinkID (string) : the id of the link associated to the content you want to change to.

            Returns:

                  - null

      

      

      Dependencies

      -------------------------------------------------------------

      - MooTools 1.2

      

      HTML Markup Sample

      -------------------------------------------------------------

      _widget_samples/content_toggle.html

      

*********************************************************************/

 

var ContentToggle = new Class({

    initialize: function(toggleID, defaultContentLinkID){

            // SET THE PROPERTIES

            this.toggleID = toggleID;

        this.defaultContentLinkID = defaultContentLinkID;

            this.currContentLinkID = null;

            this.currAnimating = false;

            

            // GRAB THE ELEMENTS

            this.arrToggleLinks = $(this.toggleID).getElements('.toggle_link');
		
				
            this.contentContainer = $(this.toggleID).getElement('.toggle_content_container');

      

            // SET UP THE ANIMATION

            this.animation = new Fx.Tween(this.contentContainer, {duration: 350, transition: Fx.Transitions.Quad.easeOut});

            this.animation.addEvent('doneAnimating', function(){ this.currAnimating = false; }.bind(this));

 

            // SET THE DEFAULT ACTIVE CONTENT

            if (this.defaultContentLinkID != null) {

                  var defaultContentLink = $(this.defaultContentLinkID);

            }

            else {

                  var defaultContentLink = this.arrToggleLinks[0];

            }

 

            var defaultContent = $(defaultContentLink.id + '_content');       

            defaultContentLink.getParent().addClass('active');

            defaultContent.setStyle('display', 'block');          

            this.currContentLinkID = defaultContentLink.id;

            // ---

            

            // ADD THE LINK EVENTS

            

            this.arrToggleLinks.addEvent('click', this.clickChange.bind(this));     

    },

      

      clickChange : function(e) {

            var clickedID = null;

            var clickedElement = $(e.target);

 

            if(clickedElement.hasClass('toggle_link')){

                  clickedID = clickedElement.id;      

            }

            else {

                  clickedID = clickedElement.getParent().id;      

            }

            

            this.change(clickedID);

            return false;

      },

      

      change : function(contentLinkID) {

            if (!this.currAnimating && this.currContentLinkID != contentLinkID){

                  

                  this.currAnimating = true;

                  var newContentLink = $(contentLinkID);

                  var   newContent = $(contentLinkID + '_content');

                  

                  var currContentLink = $(this.currContentLinkID);

                  var currContent = $(this.currContentLinkID + '_content');

                  

                  contentContainerRef = this.contentContainer;

                                    

                  currContentLink.getParent().removeClass('active');

                  newContentLink.getParent().addClass('active');        

                  

                  this.animation.start('opacity', 0).chain(       

                        function(){ contentContainerRef.setStyle('height', currContent.getSize().y); this.callChain(); },

                        function(){ currContent.setStyle('display', 'none'); this.callChain(); },

                        function(){ newContent.setStyle('display', 'block'); this.callChain(); },          

                        function(){ this.start('height', newContent.getSize().y); },

                        function(){ this.start('opacity', 1); this.callChain(); },

                        function(){ this.fireEvent('doneAnimating'); }

                  )

      

                  this.currContentLinkID = contentLinkID;

            }

      }     

});