/**

 * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).

 * All rights reserved.

 * This component and the accompanying materials are made available

 * under the terms of the License "Eclipse Public License v1.0"

 * which accompanies this distribution, and is available

 * at the URL "http://www.eclipse.org/legal/epl-v10.html".

 *

 * Initial Contributors:

 * Contributors:

 */

///////////////////////////////////////////////////////////////////////////////

// The ContentPanel class is a control for displaying content. The panel

// can be expanded and collapsed.

// Constructor.

function ContentPanel(id, caption, content, foldable, expanded) {

    if (id != UI_NO_INIT_ID) {

        this.init(id, caption, content, foldable, expanded);

    }

}

// ContentPanel inherits from Control.

ContentPanel.prototype = new Control(UI_NO_INIT_ID);

// The element hierarchy in a content panel is as follows:

//

// rootElement

//     assemblyElement

//         captionElement

//             foldToggleElement

//                 captionLinkElement

//                     captionTextElement

//     contentElement

//

// captionTextElement is moved under foldToggleElement if disabled

// or captionElement if not foldable

// The fold toggle element used for folding content panels.

ContentPanel.prototype.foldToggleElement = null;

// The caption link element of this control.

ContentPanel.prototype.captionLinkElement = null;

// The caption text element of this control.

ContentPanel.prototype.captionTextElement = null;

// The content element of this control.

ContentPanel.prototype.contentElement = null;

// The foldable state of this control.

ContentPanel.prototype.foldable = false;

// The expanded state of this control.

ContentPanel.prototype.expanded = false;

// Enabled status.

ContentPanel.prototype.enabled = false;

// Initializer - called from constructor.

ContentPanel.prototype.init = function(id, caption, content, foldable, expanded) {

    uiLogger.debug("ContentPanel.init(" + id + ", " + caption + ", " + content + ", " + foldable + ", " + expanded + ")");

    // call superclass initializer

    Control.prototype.init.call(this, id, caption);

    // the control defaults to enabled

    this.enabled = true;

    // create caption text element

    this.captionTextElement = document.createElement("span");

    // disconnect the control element

    this.assemblyElement.removeChild(this.controlElement);

    // set the foldable state

    this.foldable = foldable;

    // is this a foldable content panel?

    if (foldable) {

        // create fold toggle element

        this.foldToggleElement = document.createElement("div");

        this.captionElement.appendChild(this.foldToggleElement);

        // create caption link and add to caption element

        this.captionLinkElement = document.createElement("a");

        this.captionLinkElement.href = "JavaScript:void(0)";

        this.foldToggleElement.appendChild(this.captionLinkElement);

        // add the text element to the link element

        this.captionLinkElement.appendChild(this.captionTextElement);

        // bind event listeners

        var self = this;

        this.captionLinkElement.addEventListener("focus", function() { self.focusStateChanged(true); }, false);

        this.captionLinkElement.addEventListener("blur", function() { self.focusStateChanged(false); }, false);

        this.foldToggleElement.addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false);

        this.foldToggleElement.addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false);

        this.foldToggleElement.addEventListener("mousedown", function(event) {

                                                                 self.captionClicked();

                                                                 event.stopPropagation();

                                                                 event.preventDefault();

                                                             }, true);

        this.foldToggleElement.addEventListener("keydown", function(event) {

                                                               // center and enter trigger the action

                                                               if (event.keyCode == 0 || event.keyCode == 13) {

                                                                   self.captionClicked();

                                                                   event.stopPropagation();

                                                                   event.preventDefault();

                                                               }

                                                           }, true);

        this.expanded = expanded;

    } else {

        // since this is not a foldable panel the content should be expanded

        this.expanded = true;

        // add the text element directly to the caption element

        this.captionElement.appendChild(this.captionTextElement);

    }

    // create content element

    this.contentElement = document.createElement("div");

    this.contentElement.style.display = this.expanded ? "block" : "none";

    this.rootElement.appendChild(this.contentElement);

    // set caption, content and expanded state

    this.setCaption(caption);

    this.setContent(content);

    // update style

    this.updateStyleFromState();

};

// Returns the enabled state.

ContentPanel.prototype.isEnabled = function() {

    return this.enabled;

};

// Sets the enabled state.

ContentPanel.prototype.setEnabled = function(enabled) {

    uiLogger.debug("ContentPanel.setEnabled(" + enabled + ")");

    // bail out early if there is no change in state

    if (this.enabled == enabled) {

        return;

    }

    // set the enabled state

    this.enabled = enabled;

    // is this a foldable content?

    if (this.foldable) {

         // the caption link must be disabled

        if (this.enabled) {

            // diabled -> enabled

            this.foldToggleElement.removeChild(this.captionTextElement);

            this.foldToggleElement.appendChild(this.captionLinkElement);

            this.captionLinkElement.appendChild(this.captionTextElement);

        } else {

            // enabled -> diabled

            this.captionLinkElement.removeChild(this.captionTextElement);

            this.foldToggleElement.removeChild(this.captionLinkElement);

            this.foldToggleElement.appendChild(this.captionTextElement);

        }

    }

    // update style

    this.updateStyleFromState();    

};

// Returns the caption; null if none.

ContentPanel.prototype.getCaption = function() {

    return this.caption;

};

// Sets the caption; null if none.

ContentPanel.prototype.setCaption = function(caption) {

    // bail out if the caption text element has not been created

    // this is to prevent the superclass init calling this before

    // we've initialized our custom caption

    if (this.captionTextElement == null)

        return;

    uiLogger.debug("ContentPanel.setCaption(" + caption + ")");

    // set the display style

    this.captionElement.style.display = (caption == null) ? "none" : "block";

    // set the caption

    this.caption = caption;

    this.captionTextElement.innerHTML = (caption == null) ? "" : caption;

    // update style

    this.updateStyleFromState();

};

// Returns the content.

ContentPanel.prototype.getContent = function() {

    return this.contentElement.innerHTML;

};

// Sets the content.

ContentPanel.prototype.setContent = function(content) {

    uiLogger.debug("ContentPanel.setContent(" + content + ")");

    this.contentElement.innerHTML = (content == null) ? "" : content;

};

// Returns the focusable state for the control.

ContentPanel.prototype.isFocusable = function() {

    // a content panel is focusable if it's foldable and enabled

    return (this.foldable && this.enabled);

};

// Sets the focused state for the control.

// Note: This may not always succeed.

ContentPanel.prototype.setFocused = function(focused) {

    uiLogger.debug("ContentPanel.setFocused(" + focused + ")");

    if (this.enabled && this.foldable) {

        if (focused) {

            this.captionLinkElement.focus();

        } else {

            this.captionLinkElement.blur();

        }

    }

    // note that this.focused gets set as a result of focusStateChanged() being called

    // rather than setting it explicitly here

};

// Returns the expanded state.

ContentPanel.prototype.isExpanded = function() {

    return this.expanded;

};

// Sets the expanded state.

ContentPanel.prototype.setExpanded = function(expanded) {

    uiLogger.debug("ContentPanel.setExpanded(" + expanded + ")");

    // make sure only foldable content panels are folded

    if (!this.foldable) {

        uiLogger.warn("Cannot fold a non-foldable content panel!");

        return;

    }

    this.expanded = expanded;

    if (this.expanded) {

        // expand

        this.contentElement.style.display = "block";

        // find out control top and bottom

        var controlTop = this.getAbsoluteTop(this.rootElement);

        var controlHeight = this.rootElement.clientHeight;

        var controlBottom = controlTop + controlHeight;

        // find out the viewport top and bottom

        var viewportTop = window.scrollY;

        var viewportHeight = window.innerHeight;

        var viewportBottom = viewportTop + viewportHeight;

        // make sure the control is positioned so that it can be seen

        var overflow = controlBottom - viewportBottom;

        if (overflow > 0) {

            // there's overflow so we need to scroll to get the control

            // into the viewport - however not so far that the control

            // goes past the viewport top.

            var distanceToTop = controlTop - viewportTop;

            var scrollAmount = Math.min(overflow, distanceToTop);

            window.scrollBy(0, scrollAmount);

        }

    } else {

        // collapse

        this.contentElement.style.display = "none";

    }

    // notify event listeners

    this.fireEvent(this.createEvent("ExpandedStateChanged", this.expanded));

    // update the style

    this.updateStyleFromState();

};

// Returns the absolute position (y) of the given element.

ContentPanel.prototype.getAbsoluteTop = function(element) {

    // traverse from element to root and add top-offset

    // for each element we find on the way

    var absTop = 0;

    while (element != null) {

        absTop += element.offsetTop;

        element = element.offsetParent;

    }

    return absTop;

};

// Callback for when the caption is clicked.

ContentPanel.prototype.captionClicked = function() {

    uiLogger.debug("ContentPanel.captionClicked()");

    // if we're enabled then a click results toggling the expanded state

    if (this.enabled) {

        // focus when clicked

        if (!this.focused) {

            this.captionLinkElement.focus();

        }

        // toggle the expanded state

        this.setExpanded(!this.expanded);

    }

};

// Updates the style of the control to reflects the state of the control.

ContentPanel.prototype.updateStyleFromState = function() {

    uiLogger.debug("ContentPanel.updateStyleFromState()");

    // determine the state name

    var stateName = this.getStyleStateName();

    // set root element class name

    this.setClassName(this.rootElement, "Control");

    // set the control assembly class names

    this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName);

    if (this.foldable) {

        // foldable content panel

        this.setClassName(this.captionElement, "ContentPanelCaptionFoldable");

        this.setClassName(this.foldToggleElement, "ContentPanelFoldToggle ContentPanelFoldToggle" + (this.expanded ? "Expanded" : "Collapsed"));

    } else {

        // non-folding

        this.setClassName(this.captionElement, "ContentPanelCaptionNonFoldable");

    }

    // set the content caption text class names

    this.setClassName(this.captionTextElement, "ContentPanelCaptionText ContentPanelCaptionText" + stateName);

    // set the content element class names

    this.setClassName(this.contentElement, "ContentPanelContent");

};