fw.Libs.load([
  'http://link.members.webs.com/JS/checkLogin.jsp',
  'http://images.freewebs.com/JS/mootools.js'
]);

var bbBox = new Class({

  type: 'bbBox',

  sMap: [
       { desc: 'angry', fn: 'angry.gif', code: ':angry:' },
       { desc: 'arrow', fn: 'arrow.gif', code: ':arrow:' },
       { desc: 'big grin', fn: 'biggrin.gif', code: ':D' },
       { desc: 'blink', fn: 'blink.gif', code: ':blink:' },
       { desc: 'cool', fn: 'cool.gif', code: '8)' },
       { desc: 'dry', fn: 'dry.gif', code: ':dry:' },
       { desc: 'huh?', fn: 'huh.gif', code: ':huh:' },
       { desc: 'laugh', fn: 'laugh.gif', code: ':lol:' },
       { desc: 'mad', fn: 'mad.gif', code: ':mad:' },
       { desc: 'oh my!', fn: 'ohmy.gif', code: ':ohmy:' },
       { desc: 'ph34r', fn: 'ph34r.gif', code: ':ph34r:' },
       { desc: 'disgusted', fn: 'puke.gif', code: ':puke:' },
       { desc: 'roll eyes', fn: 'rolleyes.gif', code: ':roll:' },
       { desc: 'sad', fn: 'sad.gif', code: ':(' },
       { desc: 'smile', fn: 'smile.gif', code: ':)' },
       { desc: 'tongue', fn: 'tongue.gif', code: ':tongue:' },
       { desc: 'unsure', fn: 'unsure.gif', code: ':unsure:' },
       { desc: 'wink', fn: 'wink.gif', code: ':wink:' },
       { desc: 'exclamation', fn: 'exclamation.gif',	code: ':!:' },
       { desc: 'question', fn: 'question.gif', code: ':?:' }
      ],

  initialize : function(cID, options) {
    this.containerID = cID;
    this.options = {
      write: false,
      width: '100%',
      height: 250,
      hideTabs: false,
      showName: false,
      showEmail: false,
      showSubject: false,
      showLogin: true,
	  showActionButtons: false,
	  tab1Label: 'message',
      tab2Label: 'preview',
      nameLabel: 'Name:',
      emailLabel: 'E-mail:',
      subjectLabel: 'Subject:',
      emailDesc: '',
      subjectDesc: '',
      messageLabel: 'Message:',
      btn1Label: 'post',
      btn2Label: 'cancel',
      onPost: '',
      onCancel: '',
      customCSS: '',
      hidden: false,
      container: ''
    }
    Object.extend(this.options, options || {});

    fw.Css.load('http://images.freewebs.com/Styles/bbBox.css');
    if (this.options.customCSS) fw.Css.load(this.options.customCSS);

    this.prepare();
    if (this.options.write) this.write();
    this.instance = fw.Instances.add(this);
  },

  prepare : function() {
    var w = this.options.width
    var d;
    if (isNaN(w) && w.indexOf('%') > 0) {
      if (this.options.write && !this.container) {
        document.write('<div id="dummyWidth" style="width:'+w+'">&nbsp;</div>');
        d = $('dummyWidth');
      }
      else {  // this.options.container must be defined if write is false
        d = document.createElement('div');
        d.style.cssText = 'width:' + (w == 0 ? '100%': w);  
        if (this.container && this.container.parentNode) {
          this.container.parentNode.appendChild(d);
        }
        else {
          $(this.options.container).appendChild(d);
        }
      }
      this.options.width = Math.max(d.offsetWidth, 395);
      d.parentNode.removeChild(d);
    }
    var inst = 'fw.Instances.get(\'' + this.containerID + '\')';

    var sHtml = '<div id="'+this.containerID+'smileContainer" class="smileContainer">';
    var m = this.sMap;
    for (var i = 0; i < m.length; i++) {
       sHtml += '<img width=20 height=20 title="' + m[i].desc + '" alt="' + m[i].desc + '"' +
                ' onmouseover="this.style.cursor=\'pointer\'"' +
                ' onclick="return '+inst+'.insertSmiley('+i+');"' +
                ' src="http://images.freewebs.com/Images/Smilies/Round/' + m[i].fn + '" />';
      if ((i+1) % 5 == 0) sHtml += '<br style="clear:left" />';
    }
    sHtml += '</div>';
    var w = this.options.width;
    var h = this.options.height;
    var iw = Math.max(Math.round(w/2.5), 150);
    var showCol = this.options.messageLabel != '';
    var tah = h - 100;
    tah -= (this.options.showName * 20) - (this.options.showSubject * 20) - (this.options.showEmail * 20) - (!this.options.hideTabs * 20) - (this.options.showActionButtons * 20);

    var col1Width = 60;
    var col2Width = w - 20 - col1Width;
    var btnsOffset = 'style="margin-left:'+(Math.round((((showCol ? 0:col1Width)+col2Width)-130)/2)-(showCol ? 0:col1Width))+'px"';
    this.HTML = '<div id="'+this.containerID+'" class="fw-bbBox" style="margin-top:10px;display:'+(this.options.hidden ? 'none':'block')+';width:'+w+'px;">';

this.innerHTML =
(! this.options.hideTabs ?
'  <div class="tabs">\
\
    <div id="'+this.containerID+'tab1" class="r tab label tab1" onclick="'+inst+'.switchTab(0);return false;">\
      <b class="o borderColor"><!----></b><b class="m borderColor bgcolor"><!----></b><b class="i borderColor bgcolor"><!----></b>\
      <div class="c borderColor bgcolor"><span class="activeCaption">'+this.options.tab1Label+'</span></div>\
      <b class="on tabState bgcolor borderColor"><!----></b>\
    </div>\
\
    <div id="'+this.containerID+'tab2" class="r tab label tab2" style="color:#b0b0b0" onclick="'+inst+'.switchTab(1);return false;">\
      <b class="o bgcolor borderColor"><!----></b><b class="m bgcolor borderColor"><!----></b><b class="i bgcolor borderColor"><!----></b>\
      <div class="c bgcolor borderColor"><span class="inactiveCaption">'+this.options.tab2Label+'</span></div>\
      <b class="off tabState borderColor"><!----></b>\
    </div>\
    <b class="emptyTab borderColor" style="width:'+(w-216)+'px">&nbsp;</b>\
    <br style="clear:left;" />\
  </div>\
\
  <div class="r">\
    <b class="m bgcolor borderColor" style="margin-left:0px;border-left-width:1px;"><!----></b>\
    <b class="i bgcolor borderColor" style="margin-left:0px;"><!----></b>\
  </div>': ''
) +

' <div class="r">' +
  (this.options.hideTabs ? '<b class="o borderColor"><!----></b><b class="m bgcolor borderColor"><!----></b><b class="i bgcolor borderColor"><!----></b>':'') + '\
    <div class="c bgcolor borderColor">\
      <b class="b"><!----></b>\
\
<div style="padding-left:3px;xposition:relative;">\
<table class="fw-bbBoxContent" cellpadding=0 cellspacing=0 border=0 style="margin:5px 0px 5px 0px; width:'+(col1Width+col2Width)+'px">' +

(this.options.showName ?
  '<tr>\
    <td style="width:'+col1Width+'px" class="label">Name:</td>\
    <td style="width:'+col2Width+'px;text-align:left;">\
  ' +
  (fwuser.loggedIn ? '<span style="font-weight:bold" class="label">'+fwuser.alias+'</span><input type="hidden" class="cbUserName" value="'+fwuser.alias+'">':
                     '<input class="cbUserName" style="width:'+iw+'px">') +
  (this.options.showLogin && fwuser.loggedIn ? '&nbsp;<a class="label" style="text-decoration:underline; margin-left:5px;" href="http://link.members.webs.com/logout.jsp?next='+escape(window.location)+'">Logout</a>': '') +
    '</td>\
  </tr>': ''
) +

(this.options.showEmail ?
  '<tr>\
    <td style="width:'+col1Width+'px" class="label">' + this.options.emailLabel + '</td>\
    <td style="width:'+col2Width+';text-align:left"><input class="cbEmail" style="width:'+iw+'px">' + this.options.emailDesc + '</td>\
  </tr>': ''
) +

(this.options.showSubject ?
  '<tr>\
    <td style="width:'+col1Width+'px" class="label">' + this.options.subjectLabel + '</td>\
    <td style="width:'+col2Width+';text-align:left"><input class="cbSubject" style="width:'+iw+'px">' + this.options.subjectDesc + '</td>\
  </tr>': ''
) +



'<tr>' +
(showCol ? '\
  <td style="width:'+col1Width+'px">&nbsp;</td>': ''
) +
' <td '+(showCol?'':'colspan="2" style="padding-left:5px;"')+' style="text-align:left"><div id="'+this.containerID+'cbToolbar" class="cbToolbar">\
    <a tabindex=-1 href="#" class="messageButton bold" title="Bold" onclick="return '+inst+'.setVal(\'[b]\', \'[/b]\');"></a>\
    <a tabindex=-1 href="#" class="messageButton italic" onclick="return '+inst+'.setVal(\'[i]\', \'[/i]\');"></a>\
    <a tabindex=-1 href="#" class="messageButton underline" onclick="return '+inst+'.setVal(\'[u]\', \'[/u]\');"></a>\
    <a tabindex=-1 href="#" class="messageButton link" onclick="return '+inst+'.setVal(\'[url=\'+prompt(\'Please enter the URL you would like to link to:\',\'http://\')+\']\',\'[/url]\');"></a>\
    <SELECT style="float:left" tabindex=-1 onchange="'+inst+'.setVal(\'[color=\'+this.value+\']\',\'[/color]\');this.value=\'\';">\
      <OPTION value="">[color]</OPTION>\
      <OPTION style="color:darkred;" value="darkred">Dark Red</OPTION>\
      <OPTION style="color:red;" value="red">Red</OPTION>\
      <OPTION style="color:orange;" value="orange">Orange</OPTION>\
      <OPTION style="color:brown;" value="brown">Brown</OPTION>\
      <OPTION style="color:yellow;" value="yellow">Yellow</OPTION>\
      <OPTION style="color:green;" value="green">Green</OPTION>\
      <OPTION style="color:olive;" value="olive">Olive</OPTION>\
      <OPTION style="color:cyan;" value="cyan">Cyan</OPTION>\
      <OPTION style="color:blue;" value="blue">Blue</OPTION>\
      <OPTION style="color:darkblue;" value="darkblue">Dark Blue</OPTION>\
      <OPTION style="color:indigo;" value="indigo">Indigo</OPTION>\
      <OPTION style="color:violet;" value="violet">Violet</OPTION>\
      <OPTION style="color:white;" value="white">White</OPTION>\
      <OPTION style="color:black;" value="black">Black</OPTION>\
    </SELECT>\
    <SELECT style="float:left" tabindex=-1 onchange="'+inst+'.setVal(\'[size=\'+this.value+\']\',\'[/size]\');this.value=\'\';">\
      <OPTION value="">[size]</OPTION>\
      <OPTION value="7">Tiny</OPTION>\
      <OPTION value="9">Small</OPTION>\
      <OPTION value="12">Normal</OPTION>\
      <OPTION value="18">Large</OPTION>\
      <OPTION value="24">Huge</OPTION>\
    </SELECT>' + sHtml + '\
    <a id="'+this.containerID+'smiley" tabindex=-1 href="#" class="messageButton smiley" title="Insert Smiley" onclick="'+inst+'.showSmilies(); return false;"></a>\
  </div></td>\
</tr>\
<tr style="padding:0px 0px 5px 0px;">' +
(showCol ? '\
  <td style="vertical-align:center" class="label">'+this.options.messageLabel+'</td>\
  <td': '<td colspan="2" style="padding-left:5px;"'
) +
   ' style="padding-top:0px; padding-bottom:5px;">\
    <textarea class="cbTaMessage" style="width:98%; height:' + tah + 'px;"></textarea>\
    <iframe class="cbPreviewFrame" name="'+this.containerID+'previewFrame" src="http://members.webs.com/previewBBCode.jsp?message="\
     marginheight=0 marginwidth=0 frameborder=0\
     style="width:98%;height:'+tah+'px;display:none;padding:0px;margin:1px 0px 1px 0px; border-style:dashed" noresize></iframe>\
  </td>\
</tr>' +

(this.options.showActionButtons ? '\
<tr>\
  <td>' +
   (this.options.showLogin && !fwuser.loggedIn ? '<a class="label" style="text-decoration:underline;" href="http://link.members.webs.com/relogin.jsp?next='+escape(window.location)+'">Login</a>': '&nbsp;') + '\
  </td>\
  <td style="text-align:left">\
    <input type="button" id="'+this.containerID+'btn1" class="cbBtn" value="'+this.options.btn1Label+'" onclick="return '+inst+'.onPost();" '+btnsOffset+'>&nbsp;\
    <input type="button" id="'+this.containerID+'btn2" class="cbBtn" value="'+this.options.btn2Label+'" onclick="return '+inst+'.onCancel();">\
    <span id="'+this.containerID+'processing" class="label processing" '+btnsOffset+'>\
      <img style="vertical-align:center" src="http://images.freewebs.com/Images/smallsnake.gif">\
      please wait...\
    </span>\
  </td>\
</tr>':''
) +

'</table></div>\
\
      <b class=b><!----></b>\
    </div><b class="i bgcolor borderColor"><!----></b><b class="m bgcolor borderColor"><!----></b><b class="o borderColor"><!----></b>\
  </div>';

    this.HTML += this.innerHTML + '</div>';
  },

  resize : function(w) {
    this.options.width = w;
    this.prepare();
    this.container.style.width = this.options.width + 'px';
    this.container.innerHTML = this.innerHTML;
    this.activate();
  },

  write : function() {
    document.write(this.HTML);
    this.activate();
  },

  activate : function() {
  	var c = '.fw-bbBoxContent ';
    var cid = this.containerID;
    this.container = $(cid);
    
    this.smileContainer = $(cid+'smileContainer');
    this.tab1 = $(cid+'tab1');
    this.tab1State = this.tab1.getElement('b.tabState');
    this.tab1Caption = this.tab1.getElement('span.activeCaption');
    this.tab2 = $(cid+'tab2');
    this.tab2State = this.tab2.getElement('b.tabState');
	this.tab2Caption = this.tab2.getElement('span.inactiveCaption');
    this.name = $E('input.cbUserName', cid);
    this.email = $E('input.cbEmail', cid);
    this.subject = $E('input.cbSubject', cid);
    this.toolbar = $(cid+'cbToolbar');
    this.smileButton = $(cid+'smiley');
    this.taMessage = $E('textarea.cbTaMessage', cid);
    this.previewFrame = $E('iframe.cbPreviewFrame', cid);
    this.processing = $(cid+'processing');
    
    this.btn1 = $(cid+'btn1');
    this.btn2 = $(cid+'btn2');
    if (!this.options.hideTabs) {
      this.activeTab = -1;
      this.switchTab(0);
    }
  },

  switchTab : function(tab) {

    function activate(t1, t2) {
      with (t1.style) {
        marginTop = '0px';
        lineHeight = '20px';
        height = '24px';
      }
      with (t2.style) {
        marginTop = '2px';
        lineHeight = '18px';
        height = '22px';
      }
    }

    if (tab == this.activeTab) return;
    this.activeTab = tab;

    var pf = this.previewFrame;
    var ta = this.taMessage;
    if (tab == 0) {
      this.tab1State.className = 'on tabState bgcolor borderColor';
      this.tab2State.className = 'off tabState borderColor';
      this.tab1Caption.className = 'activeCaption';
      this.tab2Caption.className = 'inactiveCaption';
      activate(this.tab1, this.tab2);
      pf.style.display = 'none';
      ta.style.display = '';
      this.toolbar.style.visibility = '';
    }
    else
    if (tab == 1) {
      this.tab1State.className = 'off tabState borderColor';
      this.tab2State.className = 'on tabState bgcolor borderColor';
      this.tab1Caption.className = 'inactiveCaption';
      this.tab2Caption.className = 'activeCaption';
      activate(this.tab2, this.tab1);
      this.toolbar.style.visibility = 'hidden';
      pf.style.display = '';
      ta.style.display = 'none';
      var f = document.createElement("form");
      f.action = "http://members.webs.com/previewBBCode.jsp";
      f.method = "POST";
      f.target = pf.name;
      f.innerHTML = '<textarea name="message">' + ta.value + '</textarea>';
      document.body.appendChild(f);
      f.submit();
      document.body.removeChild(f);
    }
    this.container.parentNode.replaceChild(this.container, this.container);
  },

  showSmilies : function() {
  	if(!this.smileysShown)
  		document.body.appendChild(this.smileContainer);
  	this.smileysShown = true;
  	
    var sb = this.smileButton;
	this.smileContainer.style.left = sb.getLeft() + 'px';
    this.smileContainer.style.top = (sb.getTop() + sb.offsetHeight) + 'px';
    this.smileContainer.style.display = 'block';
    $(document.body).addEvent('mousedown', this.domd = this.docOnMouseDown.bindAsEventListener(this));
  },

  hideSmilies : function() {
    this.smileContainer.style.display = '';
    $(document.body).removeEvent('mousedown', this.domd);
  },

  docOnMouseDown : function(e) {
    var el = e.target || e.srcElement;
    while ((el = el.parentNode) != null)
      if (this.smileContainer === el) return;
    this.hideSmilies();
  },

  insertSmiley : function(i) {
    this.setVal(this.sMap[i].code, '');
    this.hideSmilies();
    return false;
  },

  setVal : function(begin, end) {
    if (begin.indexOf("null") != -1 || begin == '[url=http://]' || begin=='[url=]') return false;
    var ta = this.taMessage;
    ta.focus();
    if (ta.ownerDocument.selection) {
      var r = ta.ownerDocument.selection.createRange();
      var str = (end != '' && ta.contains(r.parentElement())) ? r.text: "";
      r.text = begin + str + end;
    }
    else {
      var str = this.getText();
      var pre = str.substring(0, ta.selectionStart);
      var sel = end != '' ? str.substring(ta.selectionStart, ta.selectionEnd): '';
      var post = str.substring(ta.selectionEnd, str.length);
      var noSel = ta.selectionStart == ta.selectionEnd;
      this.setText(pre + begin + sel + end + post);
      if (noSel) {
        ta.selectionStart = ta.selectionEnd = pre.length + begin.length;
      }
      else {
        ta.selectionStart = pre.length + begin.length;
        ta.selectionEnd = end != '' ? ta.selectionStart+sel.length: ta.selectionStart;
      }
    }
    ta.focus();
    return false;
  },

  onPost: function() {
    if (this.options.onPost)
      this.options.onPost(this,
                          this.taMessage.value,
                          this.name ? this.name.value: '',
                          this.email ? this.email.value: '',
                          this.subject ? this.subject.value: '');
  },

  onCancel: function() {
    if (this.options.onCancel) this.options.onCancel();
  },

  toggleProcessing : function() {
    var on = this.processing.style.display == 'inline';
    this.btn1.style.display = on ? '': 'none';
    this.btn2.style.display = on ? '': 'none';
    this.processing.style.display = on ? 'none': 'inline';
  },
  
  setText: function(s) { this.taMessage.value = s; },
  
  setName: function(s)  { this.name.value = s; },
  
  setEmail: function(s) { this.email.value = s; },
  
  setSubject: function(s) { this.subject.value = s; },
  
  getText: function()  { return this.taMessage.value; },

  getName: function()  { return this.name.value; },

  getEmail: function() { return this.email.value; },
  
  getSubject: function() { return this.subject.value; }
  
});