/*
Habla Theme - template

This is a template that you can use to build your own themes

It does not have support for all functionality of the base template.

For example by default both the: "enable_buttons" and "hide_min_max_buttons"
config.vars will not work with templates generated using this method.

The preferred method of use it to:

1. Build a HTML template.
2. Render it to Javascipt.
3. Modify the Theme Javascript
4. Load the Theme Javascript
5. Celebrate!


If you decide to modify the Javascript you will NEED fireBug and
you will NEED to know what your doing :-)

*/


hbl.themes.eltima = function() {
  this.appended = true;
  this.last_msg = -1;

  this.visible       = false;
  this.highlighted   = false;
  this.state         = "compressed";

  // States:  compressed, closed, expanded,
  // visible: true or false


  // adds the theme, handlers.. to the page
  this.build = function (config, client) {
    this.client = client;
    this.config = config;
    this.set_config();

    this.div    = undefined;
    this.divid  = config.vars["divid"];

    this.build_dom();
    this.set_dom_event_handlers();
    this.set_styles();
    this.set_default_text();
    this.register_handlers();
  };

  this.set_config = function(){
    var t = new hbl.hconfig();
    /* set the default variables for T -- mostly CSS */


t.style_id =
{}
t.vars =
{}
t.style_classes =
{}
t.style_classes_map = {
	habla_wcsend_input:["habla_wcsend_input_normal"]
}


    /* set variables for the close/size button's text -- I need to incorporate this better */
    var t_vars = {
      habla_sizebutton_text_expanded : "_",
      habla_sizebutton_text_compressed : "^",
      habla_closebutton_text : "x"
    };

    /* copy the default vars in */
    for (i in t_vars) {
      if(! t.vars[i]) {
        t.vars[i] = t_vars[i];
      }
    }


    /* this should only take effect if habla_window_div_position is not alread defined */


    // set all the vars on T, and then merge it.
    this.config.merge(t);
    // we take this.config, and than apply theme specific configuration variables to it?
    var t2 = new hbl.hconfig();
    t2.load_defaults();

    // now load all the other defaults
    this.config.merge( t2 );
    this.config.remap_palette(); /* just in case.. people have themed it */

    this.config.init_from_config();

    // ok we should be good to go now.
  };

  this.build_dom = function() {
    // set the parent div for everything else
    // in general I want to have ONE parent DIV
    // that everything sits in..
    // so if I want to HIDE and perserve state.. I just hide the parent.

    // see if it exists
    if(document.getElementById(this.divid)) {
      this.appended = false;
    }
    this.habla_window_div = hbl.util.find_or_create_div(this.divid, (this.config.vars["not_append"] == undefined ? hbl.util.get_body() : undefined) );

    // hide everything while we are figuring it out.
    //hbl.util.hide_div(this.habla_window_div);



this.habla_conversation_div = hbl.util.find_or_create_el('habla_conversation_div', 'div');
this.habla_conversation_div.setAttribute('id',"habla_conversation_div");
this.habla_conversation_div.setAttribute('onclick',"function() {};return false;");
this.habla_conversation_div.innerHTML = "";
this.habla_chatform_form = hbl.util.find_or_create_el('habla_chatform_form', 'form');
this.habla_chatform_form.setAttribute('autocomplete',"off");
this.habla_chatform_form.setAttribute('action',"#");
this.habla_chatform_form.setAttribute('id',"habla_chatform_form");
this.habla_chatform_form.setAttribute('method',"get");
this.habla_input_div = hbl.util.find_or_create_el('habla_input_div', 'div');
this.habla_input_div.setAttribute('id',"habla_input_div");
this.habla_wcsend_input = hbl.util.find_or_create_el('habla_wcsend_input', 'textarea');
this.habla_wcsend_input.setAttribute('onmouseover',"function() {};");
this.habla_wcsend_input.setAttribute('id',"habla_wcsend_input");
this.habla_wcsend_input.setAttribute('onclick',"function() {};");
this.habla_expanded_div = hbl.util.find_or_create_el('habla_expanded_div', 'div');

this.messageSend = hbl.util.find_or_create_el('messageSend', 'a');


    this.hide();

  };

  // need to wrap some of these into
  // generic event handlers

  this.set_dom_event_handlers = function() {

    // conversation
    this.habla_conversation_div.onclick    = function() { return habla_window.eventmgr.handle("habla_conversation_div_onclick");};


    //Chat form
    this.habla_chatform_form.onfocus    = function() { habla_window.eventmgr.handle("habla_chatform_form_onfocus");};

    this.habla_chatform_form.onsubmit   = function(e) { habla_window.eventmgr.handle("window_form_submit", {'event' : e}); return false;};
    this.messageSend.onclick   = function(e) { habla_window.eventmgr.handle("window_form_submit", {'event' : e}); return false;};

    // Submit Events
    this.habla_wcsend_input.onkeypress = function(e) {
                                                        /* handle input processing on the form */
                                                        if(!e ) e = window.event;
                                                        habla_window.eventmgr.handle("window_submit", {'event' : e});
                                                        if( window.event )  {
                                                          e = window.event;
                                                          hbl.util.debug(e);
                                                          keynum = e.keyCode;
                                                        } else if( e.which ) {
                                                          keynum = e.which;
                                                        }
                                                        if(keynum == 13) return false;
                                                        return true;
                                                      };

    //function() { return hbl.hwindow.submit_on_enter(event) };
    // I can change this later.. if it turns out it matters
    this.habla_wcsend_input.onfocus        = function() { habla_window.eventmgr.handle("habla_wcsend_input_onfocus");};
    this.habla_wcsend_input.onclick        = function() { habla_window.eventmgr.handle("habla_wcsend_input_onclick");};
    this.habla_wcsend_input.onmouseover    = function() { habla_window.eventmgr.handle("habla_wcsend_input_onmouseover");};

    /* I need to abstract all these little functions out */

    // how do I handle roll overs.. when theming?
    /*this.habla_oplink_a.onmouseover = function() { habla_window.eventmgr.handle("habla_oplink_a_onmouseover");};
    this.habla_oplink_a.onmouseout  = function() { habla_window.eventmgr.handle("habla_oplink_a_onmouseout");};*/


    /* what do I do if there is no min or max button ? */
    if(this.config.vars["enable_buttons"]) {

      //this.habla_topbar_div.onclick = function() { habla_window.eventmgr.handle("window_topbar_clicked"); return false;};
      //this.habla_oplink_a.onclick = function() { habla_window.eventmgr.handle("window_oplink_clicked"); return false;};

      if( !this.config.vars["hide_min_max_buttons"] ) { // just hide the min_max buttons

        // hmm...
        //this.habla_closebutton_a.onmouseover = function() { habla_window.eventmgr.handle("habla_closebutton_a_onmouseover");};
        //this.habla_closebutton_a.onmouseout = function() { habla_window.eventmgr.handle("habla_closebutton_a_onmouseout");};
        //this.habla_closebutton_a.onclick    = function() { habla_window.eventmgr.handle("habla_closebutton_a_onclick"); return false;};
        //
        //
        //this.habla_sizebutton_a.onmouseover = function() { habla_window.eventmgr.handle("habla_sizebutton_a_onmouseover");};
        //this.habla_sizebutton_a.onmouseout = function() { habla_window.eventmgr.handle("habla_sizebutton_a_onmouseout");};
        //this.habla_sizebutton_a.onclick    = function() { habla_window.eventmgr.handle("habla_sizebutton_a_onclick"); return false;};

      } // let people just hide the min/max buttons

      /* set the class here */
      this.config.style_classes_map['habla_topbar_div'] = ['habla_topbar_div_normal', 'habla_topbar_clickable'];


    }else {
      this.habla_oplink_a.onclick = function() { return false;};
    }

  };

  // Set the styles
  this.set_styles = function() {
    // I need a better style renderer.

    if(! this.config.vars["disableJSStyles"]) {
      this.config.render_all_styles(this);
    }

  };

  // hbl.util.as_dom
  this.set_default_text = function() {
    // uses config to set the default text fields, before anything else is setup

    // might want to break this out
    //this.habla_say_text_span.innerHTML = this.config.vars["say_text"];

    if(this.habla_closebutton_a) this.habla_closebutton_a.innerHTML = this.config.vars['habla_closebutton_text']; // hmm.. move this into a config var?
    if(this.habla_sizebutton_a)  this.habla_sizebutton_a.innerHTML = this.config.vars['habla_sizebutton_text_compressed'];   // to expand

    this.setHeader(this.config.vars["check_for_status"]);
    this.setBody( this.config.vars["welcome_msg"] );
  };


  this.register_handlers = function() {


    hbl.eventmgr.register("habla_conversation_div_onclick",
      function(arg) {
            habla_window.eventmgr.handle("window_click");
      }
      ,0 );

    hbl.eventmgr.register("habla_chatform_form_onfocus",
      function(arg) {
            habla_window.eventmgr.handle("window_focus");
      }
      ,0 );



    // Register handlers for all the events I need to have.
    hbl.eventmgr.register("habla_sizebutton_a_onmouseover",
      function(arg) {
        arg["window"].config.render_class(arg["window"].theme.habla_sizebutton_a, "habla_button_a_hover");
      }
      ,0 );

    hbl.eventmgr.register("habla_sizebutton_a_onmouseout",
       function(arg) {
         arg["window"].config.render_class(arg["window"].theme.habla_sizebutton_a, "habla_button_a_normal");
       }
       ,0 );

     hbl.eventmgr.register("habla_sizebutton_a_onclick",
        function(arg) {
          hbl.eventmgr.handle("window_sizebutt_clicked");
          arg["window"].config.render_class(arg["window"].theme.habla_sizebutton_a, "habla_button_a_normal");
        }
        ,0 );

    hbl.eventmgr.register("habla_closebutton_a_onmouseover",
      function(arg) {
        arg["window"].config.render_class(arg["window"].theme.habla_closebutton_a, "habla_button_a_hover");
      }
      ,0 );

    hbl.eventmgr.register("habla_closebutton_a_onmouseout",
      function(arg) {
        arg["window"].config.render_class(arg["window"].theme.habla_closebutton_a, "habla_button_a_normal");
      }
      ,0 );

    hbl.eventmgr.register("habla_closebutton_a_onclick",
       function(arg) {
         arg["window"].config.render_class(arg["window"].theme.habla_closebutton_a, "habla_button_a_normal");
       }
       ,0 );

     /* focus events */
     hbl.eventmgr.register("habla_wcsend_input_onfocus",
        function(arg) {
          habla_window.eventmgr.handle("window_focus");
        }
        ,0 );

      hbl.eventmgr.register("habla_wcsend_input_onclick",
         function(arg) {
           habla_window.eventmgr.handle("window_focus");
         }
         ,0 );

       hbl.eventmgr.register("habla_wcsend_input_onclick",
          function(arg) {
            habla_window.eventmgr.handle("window_focus");
          }
          ,0 );

      hbl.eventmgr.register("habla_wcsend_input_onmouseover",
         function(arg) {
           habla_window.eventmgr.handle("window_focus");
         }
         ,0 );

     hbl.eventmgr.register("habla_oplink_a_onmouseover",
       function(arg) {
         arg["window"].config.render_class(arg["window"].theme.habla_oplink_a, "habla_oplink_a_hover");
       }
       ,0 );

     hbl.eventmgr.register("habla_oplink_a_onmouseout",
        function(arg) {
          arg["window"].config.render_class(arg["window"].theme.habla_oplink_a, "habla_oplink_a_normal");
        }
        ,0 );

  };

  /* standard methods for all themes  ---------------------------------------------------------------------- */

  // removes the theme from the page.  (if it was appended)
  this.remove = function() {
    if( this.appended ) {
      hbl.util.remove_element(this.divid);
    }
  };

  this.setBody    = function(txt) {
    // Put text into the body of the message
    this.habla_conversation_div.innerHTML = "";

    this.config.render_class(this.habla_conversation_div, 'habla_conversation_message_off');

    if(txt != "") {
      var txt = hbl.util.as_dom(txt);
      this.config.render_class(this.habla_conversation_div, 'habla_conversation_message_on');
      this.habla_conversation_div.appendChild(txt);

    }

    this.habla_conversation_div.scrollTop = this.habla_conversation_div.scrollHeight;
  };

  this.getBody = function() {
    return this.habla_conversation_div.innerHTML;
  };

  /*
   * This function appends content to the chat window 'nicely'
   * running the display pipeline on it,
   * and formatting it
   */
  this.appendNiceMessage = function( sender, txt, clear_body) {
    // formatting pipeline
    if(txt == undefined || sender == undefined) return;

     //var txt = this.display_pipeline.run(txt);
     if(txt) {
       var cls = "";

       if(sender == this.config.vars['myname']) {
         // one sender
         cls = "habla_conversation_person1";
       }else {
         // the other
         cls = "habla_conversation_person2";
       }

       // start building element
       var message = document.createElement("p");
       message.setAttribute("class", "habla_conversation_p_item");
       // style it
       this.config.render_class(message, "habla_conversation_p_item");  /* render a class */

       var span  = document.createElement("span");
       span.setAttribute("class", cls);

       if(sender == this.config.vars['myname']) {
         span.innerHTML = this.config.vars['local_user_display_name'];
         this.config.render_class(span, "habla_conversation_person1");   /* render a class */
       }else{
         span.innerHTML = (this.config.vars['local_name_override'] ? this.config.vars['local_name_override'] : sender ) + " : ";
         this.config.render_class(span, "habla_conversation_person2");   /* render a class */
       }

       var span2  = document.createElement("span");
       span2.setAttribute("class", "habla_conversation_text_span");
       span2.innerHTML = txt;

       message.appendChild(span);
       message.appendChild(span2);

       this.appendMessage( message, clear_body);
    }



  };

  // takes a message and appends it to the body
  this.appendMessage = function( txt, clear_body ) {
    // appends a message
    // might be useful to style it.. -- do I do that here?

    if(this.last_msg == -1 && clear_body) {
      this.setBody(""); // clear body on first message
                        // actually it would be good to know if
                        // the operator is online or online at this moment in time.
                        // and only clear, if the operator is online.
    }

    // maybe..
    var txt = hbl.util.as_dom(txt);
    this.last_msg += 1;
    txt.setAttribute("id", "habla_msg_" + this.last_msg);

    // in theory I could do more here..
    // but we can assume it's already formatted in some way.
    // or maybe toss a pipeline in here to format it.
    // as part of the theme.
    this.habla_conversation_div.appendChild(txt);
    this.habla_conversation_div.scrollTop = this.habla_conversation_div.scrollHeight;

  };

  // set Header text
  this.setHeader = function (txt ) {
      // may want to convert this to a SPAN? .. nah
      //this.habla_oplink_a.innerHTML = txt;
  };

  /*this.setOfflineWindow = function() {
  };*/

  this.getHeader = function ( ) {
      // may want to convert this to
      return this.habla_oplink_a.innerHTML;
  };

  this.hide = function () {
    /* execute the code to hide the theme */
    // hide all the key parts
    this.visible = false;

    if(this.habla_conversation_div) this.habla_conversation_div.style.overflow = "hidden";

    //hbl.util.hide_div(this.habla_window_div);
    hbl.util.hide_div(this.habla_both_div);
    hbl.util.hide_div(this.habla_closed_div);
    hbl.util.hide_div(this.habla_expanded_div);
    hbl.util.hide_div(this.habla_compressed_div);
  };

  this.expand = function() {
    /* executes the code to expand the theme */
    this.state = "expanded";

    if(this.habla_sizebutton_a)  this.habla_sizebutton_a.innerHTML = this.config.vars['habla_sizebutton_text_expanded'];   // to expand

    this.show();

  };

  this.compress = function() {
    /* executes the code to compress the theme */
    this.state = "compressed";

    if(this.habla_sizebutton_a)  this.habla_sizebutton_a.innerHTML = this.config.vars['habla_sizebutton_text_compressed'];   // to expand

    // might set the text fields for compressed here?
    this.show();
  };

  /*
    Show essentially, RENDERs state to the right
   */
   this.show = function() {

     this.visible = true;
     /* executes the code to show the theme */
     hbl.util.show_div(this.habla_window_div);

     if(this.state == "closed") {
       // Hide the un-needed DIVS
       hbl.util.hide_div(this.habla_expanded_div);
       hbl.util.hide_div(this.habla_panel_div);
       hbl.util.hide_div(this.habla_compressed_div);


       this.habla_conversation_div.style.overflow = "hidden";
       // show the DIV we need
       hbl.util.show_div(this.habla_closed_div);
     }
     else if(this.state == "expanded") {
       hbl.util.hide_div(this.habla_compressed_div);
       hbl.util.hide_div(this.habla_closed_div);

       hbl.util.show_div(this.habla_panel_div);
       hbl.util.show_div(this.habla_expanded_div);
       hbl.util.show_div(this.habla_both_div);
       this.habla_conversation_div.style.overflow = "auto";

       // Other fancy stuff for expanded
       this.habla_conversation_div.scrollTop = this.habla_conversation_div.scrollHeight;
       this.habla_wcsend_input.focus();

       if(this.habla_sizebutton_a)  this.habla_sizebutton_a.innerHTML = this.config.vars['habla_sizebutton_text_expanded'];   // to expand [I wish..]

       // Stupid Safari 3 fix.. probably won't hurt, 10 ms is not very long
       setTimeout(function() { habla_window.theme.getMessageInputField().focus(); }, 10);

     }
     else if(this.state == "compressed") {
       hbl.util.hide_div(this.habla_expanded_div);
       hbl.util.hide_div(this.habla_closed_div);

       hbl.util.show_div(this.habla_panel_div);
       hbl.util.show_div(this.habla_both_div);
       hbl.util.show_div(this.habla_compressed_div);
       this.habla_conversation_div.style.overflow = "hidden";

       if(this.habla_sizebutton_div)  this.habla_sizebutton_div.innerHTML = this.config.vars['habla_sizebutton_text_compressed'];   // to expand maybe a better way to customize?
     }

   };

   this.close = function() {
     /* executes the code to show the theme */
     this.state = "closed";
     this.show();
   };

   // a funky, yet useful function
   this.setWidth = function(width) {
     // filter for only the #

     this.div.style.width = width + "px";
     if( hbl.util.BrowserDetect.backwards_dimension ) {
       hbl.util.debug("212/24");
       this.habla_wcsend_input.style.width     = (width - 40) + "px";
       //this.wcsend.height     = (width - 38) + "px";
     } else {
       hbl.util.debug("202/18");
       this.habla_wcsend_input.style.width     = (width - this.config.vars["input_width_offset"]) + "px";
     //  this.wcsend.height     = (width - 38) + "px";
     }

   };

  this.close = function() {
    /* executes the code to show the theme */
    this.state = "closed";
    this.show();
  };

  // a funky, yet useful function
  this.setWidth = function(width) {
    // filter for only the #

    this.div.style.width = width + "px";
    if( hbl.util.BrowserDetect.backwards_dimension ) {
      hbl.util.debug("212/24");
      this.habla_wcsend_input.style.width     = (width - 40) + "px";
      //this.wcsend.height     = (width - 38) + "px";
    } else {
      hbl.util.debug("202/18");
      this.habla_wcsend_input.style.width     = (width - this.config.vars["input_width_offset"]) + "px";
    //  this.wcsend.height     = (width - 38) + "px";
    }

  };

  this.setInputHeight = function(height) {
    // filter for only the #
    //alert("setting input height" + height);

    if( hbl.util.BrowserDetect.backwards_dimension ) {
      hbl.util.debug("212/24");
      //this.habla_wcsend_input.style.height     = (height > 24? height : 24 ) + "px";
      //this.wcsend.height     = (width - 38) + "px";
    } else {
      hbl.util.debug("202/18");
      //this.habla_wcsend_input.style.height     = (height > 18? height : 18 ) + "px";
    //  this.wcsend.height     = (width - 38) + "px";
    }
    //alert(this.habla_wcsend_input.style.height);

  };




  this.getX = function(){
    return this.habla_window_div.style.left.match(/\d\d*/);
  };

  this.getY = function(){
    return this.habla_window_div.style.top.match(/\d\d*/);
  };


  this.setXY = function(x,y){
    this.habla_window_div.style.top = y;
    this.habla_window_div.style.left = x;
    /* the window level setXY, should probably have some sort of .. event */
  };

  this.setHeight = function(height) {
    // I can make this a lot smarter
    this.habla_conversation_div.style.height = height + "px";
  };

  this.highlight = function() {
    if (this.highlighted) return;

    /* I need to figure out how this works.. it seems like it is applying a class */

    /* ok, highlight the window now*/
    this.config.render_class(this.habla_closebutton_a, "habla_button_a_highlighted");
    this.config.render_class(this.habla_sizebutton_a, "habla_button_a_highlighted");

    this.config.render_class(this.habla_topbar_div, "habla_topbar_div_highlighted");
    this.config.render_class(this.habla_wcsend_input, "habla_wcsend_input_highlighted");
    this.highlighted = true;

  };
  this.normal   = function() {
    /* turn the window normal */
    if(!this.highlighted) return;

    this.config.render_class(this.habla_closebutton_a, "habla_button_a_normal");
    this.config.render_class(this.habla_sizebutton_a, "habla_button_a_normal");

    /* also applying a class */
    this.config.render_class(this.habla_topbar_div, "habla_button_a_normal");
    this.config.render_class(this.habla_topbar_div, "habla_topbar_div_normal");
    this.config.render_class(this.habla_wcsend_input, "habla_wcsend_input_normal");
    this.highlighted = false;
  };

  this.getMessageInputField = function() {
    return this.habla_wcsend_input;
  };

  this.getMessageInputFieldValue = function() {
    return this.habla_wcsend_input.value;
  };
  this.setMessageInputFieldValue = function(val) {
    this.habla_wcsend_input.value = val;
  };


  // Display pipeline will be theme related?
  /*this.display_pipeline = new hbl.util.pipeline(this);
  this.display_pipeline.add(hbl.pipelines.wrap_text,999);
  this.display_pipeline.add(hbl.pipelines.emoticons,1000);*/

};

/* fancy stuff for two kinds of preloading */

hbl.eventmgr.register("habla_preload_done",
   function(arg) {
     if(! hbl.config.vars["theme_path"] && ! hbl.config.vars["theme_obj"]) {
       hbl.config.vars["theme_obj"] = new hbl.themes.eltima();
     }
   }
   ,0 );

//for post definition
if(hbl.config) {
  if(! arg['window'].config.vars["theme_path"] ) {
    hbl.eventmgr.handle("theme_loaded",  {'obj' : new hbl.themes.eltima() } );
  }
}