///////////////////////////////////////////////////////
connect(window, "onload", function() 
{
   forEach(getAllByNodeAttributeValue("mkwType", "SimpleAccordion"), function(widgetNode) {
      new Accordion(widgetNode);
   });
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function Accordion(widgetNode)
{
   if(widgetNode != null) {
      this.m_WidgetNode = widgetNode;
      bindMethods(this);
      if(typeof(this._Init) == "function") {
         this._Init();
      }
   }
};

Accordion.prototype = update(new Accordion(),
{
   _Init : function()
   {
      //TODO: this next line should be in the widget base class, when we finally write one! (also, should we make it better so that it catches errors (e.g. in case of bad attribute value)?)
      if(eval((getNodeAttribute(this.m_WidgetNode, "ignore") || false)) != false) {
         return;
      }
      this.m_OpenText = (getNodeAttribute(this.m_WidgetNode, "openText") || " -");
      this.m_ClosedText = (getNodeAttribute(this.m_WidgetNode, "closedText") || " +");
      this.m_OpenImage = (getNodeAttribute(this.m_WidgetNode, "openImage") || "");
      this.m_ClosedImage = (getNodeAttribute(this.m_WidgetNode, "closedImage") || "");
      this.m_ImagesDefined = ((this.m_OpenImage != "") && (this.m_ClosedImage != ""));
      
      var backgroundImage = (getNodeAttribute(this.m_WidgetNode, "backgroundImage") || "");
      var backgroundColor = "";
      if(backgroundImage == "") {
         backgroundColor = (getNodeAttribute(this.m_WidgetNode, "backgroundColor") || "#DDDDDD");
      }
      var accordionActuatorStyle = String.Format("height:18px;background-color:{0};cursor:pointer;background-image:url('{1}');background-repeat:repeat-x;", backgroundColor, backgroundImage);
      var accordionStyle = "border:solid 1px #BBBBBB;";
      var containerStyle = "padding:5px;";

      var isOpen = eval(((getNodeAttribute(this.m_WidgetNode, "isOpen") != null) ? getNodeAttribute(this.m_WidgetNode, "isOpen") : true));
      var accordionActuator = DIV({"controls":this.m_WidgetNode.id,"style":accordionActuatorStyle}, ((this.m_ImagesDefined) ? this._GetImageByState(isOpen) : ((isOpen) ? this.m_OpenText : this.m_ClosedText)));
      var accordion =  DIV({id:this.m_WidgetNode.id + "_accordian", "style":accordionStyle}, accordionActuator);
      var container =  DIV({id:this.m_WidgetNode.id, "style":containerStyle}, this.m_WidgetNode.childNodes);
      
      connect(accordionActuator, "onclick", this._ToggleDisplay);
      appendChildNodes(accordion, container);

      this._ChangeVisibility(container, isOpen);
      swapDOM(this.m_WidgetNode, accordion);

		// we want to hold a reference to this control for later use
		this.m_WidgetNode = $(this.m_WidgetNode.id + "_accordian");
    },

   _ToggleDisplay : function(e) {
      var accordionActuator = e.src();
      var controlled = getElement(getNodeAttribute(accordionActuator, "controls").toString());
      var isOpen = (controlled.style.display != "none");
      this._ChangeVisibility(controlled, !isOpen);
      replaceChildNodes(accordionActuator, ((this.m_ImagesDefined) ? this._GetImageByState(!isOpen) : ((isOpen) ? this.m_ClosedText : this.m_OpenText)));
   },
   
   _ChangeVisibility : function(node, shouldBeVisible) {
      if(shouldBeVisible) showElement(node);
      else hideElement(node);
   },

   _GetImageDOMObject : function(imageUrl) {
      return IMG({src:imageUrl, "style":"margin:3px 0px 3px 0px;"});
   }, 
   
   _GetImageByState : function(isOpen) {
      return ((isOpen) ? this._GetImageDOMObject(this.m_OpenImage) : this._GetImageDOMObject(this.m_ClosedImage));
   }
});