// JavaScript Document for "Which OS" chooser table
    //
    // Date: 07 / 02 / 2009 
    // Author: Daniel Farrow (Brownstein Group)
    // Email: dfarrow@brownsteingroup.com

    var _iDetailRowChars = 116; // Avg. number of characters in "detail" cell row (for height calculationa);
    var _iDetailRowLineHeight = 16;

    // "site" object is created on the page's domready event
    var Site = {

        // General site initialization functions here
        start: function() {

            Site.setupAddButtons();
            Site.setupRemoveButtons();
            Site.setupDisplayAllButton();
            Site.setupDetailsButtons();


        },
        // Sets up the "add" buttons (plus icon)
        setupAddButtons: function() {

            // Get all anchors witch class "add"
            var elemButtons = $$('a.add');

            // For each anchor found
            elemButtons.each(function(button) {

                // Add a click event
                button.addEvent('click', function(event) {
                    event.stop();

                    var elem = event.target;
                    
                    var sIndex = elem.getProperty('rel');
                    var iIndex = parseInt(sIndex);
                   
                    // Webtrends tracking
                    var sTracking = trackPlusArray[iIndex];
                    eval(sTracking);
                    
                    var eParentTD = elem.getParent();
                    var eParentTR = eParentTD.getParent();

                    var eParentTRMain = eParentTR.getNext('tr.mainRow');

                    var eParentTRDetails = eParentTRMain.getNext('tr.details');

                    // Hide the rows
                    eParentTR.addClass('hidden');
                    if (eParentTRMain != null) {
                        eParentTRMain.setStyle('display', '');
                    }
                    if (eParentTRDetails != null) {
                        eParentTRDetails.addClass('hidden'); // Hide details
                    }


                });


            });

        } // End setupAddButtons: function() {

     ,


        // Sets up the "Remove" buttons (minus icon)
        setupRemoveButtons: function() {

            // Get all anchors witch class "remove"
            var elemButtons = $$('a.remove');

            // For each anchor found
            elemButtons.each(function(button) {

                // Add a click event
                button.addEvent('click', function(event) {
                    event.stop();

                    var elem = event.target;
                    var eParentTD = elem.getParent();
                    var eParentTR = eParentTD.getParent();
                    var eParentTRMin = eParentTR.getPrevious('tr.minRow');
                    var eParentTRDetails = eParentTR.getNext('tr');

                    var elemDetailsButton = eParentTR.getElement('a.details');

                    // Remove alternate styles from "details" button               
                    elemDetailsButton.removeClass('detailson');
                     
                    // Hide the rows
                    eParentTR.setStyle('display', 'none');
                    eParentTRMin.removeClass('hidden');

                    eParentTRDetails.addClass('hidden'); // Hide details
                });


            });

        } // End setupRemoveButtons: function() {

         ,


        // Sets up Show All Links button
        setupDisplayAllButton: function() {

            // Find the show all button
            var elemButton = $('showAllButton');

            // Add the click even
            elemButton.addEvent('click', function(event) {
                event.stop();

                // Remove the row that gives the "no products match" message
                var elemDisplayNoneRow = $('noProductsMessage');
                if (elemDisplayNoneRow != null) {
                    elemDisplayNoneRow.dispose();
                }

                // Get an array of all rows
                var elemTableRows = $$('#productList tr');

                // Loops through the rows and show them
                elemTableRows.each(function(tRow) {

                    // Set row to display
                    tRow.setStyle('display', '');


                });

                // Hide any expanded details rows
                var elemButtons = $$('a.details'); // Find the details buttons

                // Loops through the array of details buttons
                elemButtons.each(function(button) {
                    button.removeClass('detailson');  // update button class            
                    var sRowId = button.getProperty('rel'); // 'rel' for the button holds the row id
                    var elemRow = $(sRowId); // get the details row for this button                
                    elemRow.addClass('hidden'); // hide row
                });

                // Get all minRow rows
                var elemMinrows = $$('tr.minRow');

                // For each anchor found
                elemMinrows.each(function(row) {
                    row.addClass('hidden');
                });
            });



        } // End setupDisplayAllButton: function() {

        ,


        // Sets up Details buttons
        setupDetailsButtons: function() {

            var elemButtons = $$('a.details');

            elemButtons.each(function(button) {

                button.addEvent('click', function(event) {
                    event.stop();
                
                    var elem = event.target;
                
                     
                    var sRowId = button.getProperty('rel');
                    var elemRow = $(sRowId);
                    var elemContent = elemRow.getElement('div.content');   // Find the div containing the details content
  
                    var sRowHeight = elemRow.getProperty('rel');
                    
                    if (elemRow.hasClass('hidden')) {
                        
                        // display the "details" row
                        elemRow.removeClass('hidden');
                        
                        var sIndex = elem.getProperty('index');
                     
                        var iIndex = parseInt(sIndex);
                           
                        // Webtrends tracking
                        var sTracking = trackDetailsArray[iIndex];
                        eval(sTracking);
                    
                        // Create a height scale effect on that element
                        var myEffect = new Fx.Morph(elemContent, { duration: 'short' });
                        
                        var sText = elemContent.get('text');
                        //var iHeight = (sText.length / _iDetailRowChars) * _iDetailRowLineHeight;
                        var iHeight = parseInt(sRowHeight);
                        
                        // If using "trident" engine, add height to expanding cell
                        //if(Browser.Engine.trident) {
                        //    iHeight += 26;
                        //} 
                        
                        event.target.addClass('detailson');
                        
                          myEffect.start({
                              'height': [0, iHeight] //Morphs the 'height' style               
                          });
                    } else {
                        // Hide the row
                        event.target.removeClass('detailson');
                        elemRow.addClass('hidden');

                    }


                });


            });


        } // End setupDetailsButtons: function() {

 
    } // End Site

    // Activate the site function on domready
    window.addEvent('domready', Site.start);