/**
 * @filename activityDetails.js
 * @description attaches event handlers for UI components:
 * - expanding/collapsing of sections, including charts
 * - edit summary button
 * Copyright(c) 2009, Garmin International
 */

ActivityDetailsConstants = {
    css: {
        boxCollapseArea: '.detailsBoxCollapseArea',
        boxTitle: '.detailsBoxTitle',
        boxToggle: '.detailsBoxToggle',
        boxTrigger: '.detailsBoxTrigger',
        chartBox: '.chartContainer',
        collapsedLarge: 'collapsed',
        collapsedSmall: 'collapsedSmall',
        detailsBox: '.detailsBox',   
        expandedLarge: 'expanded',
        expandedSmall: 'expandedSmall',
        summaryStyle: 'summary',
        noIcon: 'noIcon'
    }
}
ActivityDetails = {
    initialize: function() {
        this.attachExpandCollapseEvents();
        this.loadCustomLayout();
    },
    
    attachExpandCollapseEvents: function() {
        // Collapse area when clicking titles and update the trigger icon
        jQuery(ActivityDetailsConstants.css.boxTrigger).click(function() {
            // Only save the layout if user is logged in
            ActivityDetails.expandCollapseComponent(jQuery(this), User.LOGGED_IN);
        });
        
        // Listener for map expanding
        jQuery(ActivityDetailsConstants.css.boxTitle+'.map').prevAll(ActivityDetailsConstants.css.boxTrigger).bind('click', function(e) {
            var boxTrigger = jQuery(this);
            if( boxTrigger.hasClass(ActivityDetailsConstants.css.expandedLarge) ) {
                mapLoader.initializeMap();
            }
        });
    },
    /**
     * Expands/collapses component based on the trigger element passed in. 
     * @param triggerEm {Element} trigger element of the component to expand/collapse
     * @param saveLayout {boolean} true to save the layout of the entire page, false otherwise
     */
    expandCollapseComponent: function(triggerEm, saveLayout) {
        // Update trigger icon
        ActivityDetails.toggleTriggerIcon(triggerEm);
        
        // If chart is present, toggle it too
        ActivityDetails.toggleChart( triggerEm.nextAll(ActivityDetailsConstants.css.chartBox) );
        
        // When parent sections are clicked, Keep child sections in sync
        var boxTitle = triggerEm.nextAll(ActivityDetailsConstants.css.boxTitle);
        if( boxTitle.hasClass(ActivityDetailsConstants.css.noIcon) &&  !boxTitle.hasClass(ActivityDetailsConstants.css.summaryStyle) ){
            
            var smallBoxTrigger = triggerEm.nextAll(ActivityDetailsConstants.css.boxCollapseArea).find(ActivityDetailsConstants.css.boxTrigger);
            smallBoxTrigger.each(function() {
                var collapsedArea = jQuery(this).nextAll(ActivityDetailsConstants.css.boxCollapseArea);
                var largeBoxTrigger = jQuery(this).parent().parent().prevAll(ActivityDetailsConstants.css.boxTrigger);
                
                if( ( largeBoxTrigger.hasClass(ActivityDetailsConstants.css.collapsedLarge) && collapsedArea.is(':hidden') ) 
                    || ( largeBoxTrigger.hasClass(ActivityDetailsConstants.css.expandedLarge) && collapsedArea.is(':visible') ) ) {
                    // They're the same! Don't do anything                    
                } else {
                    ActivityDetails.expandCollapseComponent(jQuery(this), false);
                }
            });
        } else {
            // Child sections - should get only one element
            triggerEm.nextAll(ActivityDetailsConstants.css.boxCollapseArea).toggle();
        }
        if(saveLayout) {
            ActivityDetails.saveLayout();
        }
    },
    
    toggleTriggerIcon: function(triggerEm) {
        if(triggerEm.hasClass(ActivityDetailsConstants.css.collapsedLarge) || triggerEm.hasClass(ActivityDetailsConstants.css.expandedLarge)) {
            triggerEm.toggleClass(ActivityDetailsConstants.css.collapsedLarge);
            triggerEm.toggleClass(ActivityDetailsConstants.css.expandedLarge);
        } else {
            triggerEm.toggleClass(ActivityDetailsConstants.css.collapsedSmall);
            triggerEm.toggleClass(ActivityDetailsConstants.css.expandedSmall);
        }
    },
    
    saveLayout: function() {
        EventBus.shout(EventBus.Events.CHANGE_LAYOUT, ActivityDetails.generateLayoutJson());
    },
    
    /**
     * Returns the layout (expanded/collapsed) of the page in JSON format.
     * Useful for preference saving. 
     */
    generateLayoutJson: function() {
        var json = {"collapsedIds":[]};
        // Adds all collapsed components to list (parents and children)
        jQuery(ActivityDetailsConstants.css.boxTrigger).each(function(){
            var trigger = jQuery(this);
            if( trigger.hasClass(ActivityDetailsConstants.css.collapsedSmall) || trigger.hasClass(ActivityDetailsConstants.css.collapsedLarge) ) {
                json.collapsedIds.push(trigger.parent().attr('id'));
            }
        });
        return json;
    },
    
    redirect: function(errorString) {
    	if(errorString == ""){
    		parent.location = '/activity/'+ Activity.ACTIVITY_ID;
    	}else{
    		alert(errorString);
    	}
    },
    
    disableButton: function(button){
    	button.disabled = true;
    },
    
    loadCustomLayout: function() {
        var collapsedIds = User.COLLAPSED_COMPONENTS.collapsedIds;
        for( var i=0; i < collapsedIds.length; i++) {
            var collapsedId = '#'+collapsedIds[i];
            var boxTrigger = jQuery(collapsedId).children(ActivityDetailsConstants.css.boxTrigger);
            
            // Only toggle expanded components
            if( boxTrigger.hasClass(ActivityDetailsConstants.css.expandedSmall) || boxTrigger.hasClass(ActivityDetailsConstants.css.expandedLarge)) {
                var boxTitle = boxTrigger.nextAll(ActivityDetailsConstants.css.boxTitle);
                if( boxTitle.hasClass(ActivityDetailsConstants.css.noIcon) &&  !boxTitle.hasClass(ActivityDetailsConstants.css.summaryStyle) ){
                    // For parent components, just toggle the trigger
                    ActivityDetails.toggleTriggerIcon(boxTrigger);   
                } else {
                    ActivityDetails.expandCollapseComponent(boxTrigger, false);
                }
            } 
        }
    },
    
    /**
     * Shows/hides the chart element passed in. Does this by setting height/width to 0 because
     * otherwise the chart data is lost due to Flash behavior.
     * @param chartContainer {Element} chart to toggle  
     */
    toggleChart: function(chartContainer) {
        // inner swfContainer needed for Safari
        var swfContainer = chartContainer.children('.swfContainer');
        if(chartContainer != null) {
            if( chartContainer.height() != '0' && chartContainer.width() != '0' ) {
                chartContainer.height('0');
                chartContainer.width('0');
                swfContainer.height('0');
                swfContainer.width('0');
            } else {
                // TODO make sure other styles aren't in there? larry says it's fine.
                chartContainer.removeAttr('style');
                swfContainer.removeAttr('style');
            }
        }
    }
}

jQuery(document).ready(function(){
   ActivityDetails.initialize();
});