var textbox = new Class({
  //Options = {msg: 'Fill in Text', css: 'Orginial Class', over: 'On Over class'}
  initialize: function(element, options) {
    this.options = options;
          
    this.el = $(element);
    this.elid = element;
    
    this.el.className = this.options.css;
    this.el.value = this.options.msg;
    
    this.el.onfocus = function(){     
      this.onFocus()
    }.bind(this);
    
    this.el.onblur = function(){      
      this.onBlur()
    }.bind(this);
  },
  
  onFocus: function() {    
    if (this.el.value == this.options.msg) {      
      this.el.className = this.options.over;
      this.el.value = '';
    }
  },
  
  onBlur: function() {    
    if (this.el.value == '') {
      this.el.className = this.options.css;
      this.el.value = this.options.msg;
    }
  }
});

var tabs = new Class({
  initialize: function(element, select) {
    this.el = $(element);
    this.elid = element;    
    
    this.li = $$('#' + this.elid + ' li');
    this.li.each(function(item) {
      if ((select == null || select == '') && this.active == null) {
        this.active = item;
      } else if (item.title == select) {
       this.active = item;       
      }
       
      item.addEvent('mouseover', function() {
          if (this.active != item) {
            item.className=item.className + '_hover';
          }
        }.bind(this)
      );
      
      item.addEvent('mouseout', function() {
          if (this.active != item) {            
            item.className=item.className.replace(new RegExp("_hover\\b"), "");
          }
        }.bind(this)
      );
        
      item.addEvent('click', function(){          
          this.activateTab(item);
        }.bind(this)
      );
    }.bind(this));
    
    
    this.activateTab(this.active);    
  },

  
  activateTab: function(tab) {
    this._reset();
    this.active = tab;
    
    //span = tab.getFirst();
    //span.setStyle('background', 'none');
    
    tab.className=tab.className + '_active';        
    $(tab.title).setStyle('display', 'block');
  },
  
  _reset: function() {
    this.li = $$('#' + this.elid + ' li');
    this.li.each(function(item) {
     item.className=item.className.replace(new RegExp("_hover\\b"), "");
     item.className=item.className.replace(new RegExp("_active\\b"), "");
     $(item.title).setStyle('display', 'none');
    }.bind(this));
  }
});


 window.addEvent("domready", function() {
  
   var menu = $$('div.menu');    
   for (var i=0; i < menu.length; i++) {     
     menu[i].onmouseover=function() {
       this.className=this.className.replace(new RegExp("menu\\b"), "menu_over");       
     };
     menu[i].onmouseout=function() {       
       this.className=this.className.replace(new RegExp("menu_over\\b"), "menu");      
     };
   }
   
   var menu = $$('div.menu_s');
   for (var i=0; i < menu.length; i++) {
     menu[i].onmouseover=function() {
       this.className=this.className.replace(new RegExp("menu_s\\b"), "menu_over_s");       
     };
     menu[i].onmouseout=function() {       
       this.className=this.className.replace(new RegExp("menu_over_s\\b"), "menu_s");      
     };
   }
  
   $('contact').href = 'mailto:info@manifesto.com.hk';
   
   $('unsubscribe').href = 'mailto:info@manifesto.com.hk?subject=Unsubscribe';
   
   if ($('user') != null) { 
     ftpuser = new textbox('user', {msg : 'Client ID', css : 'login', over : 'login_over'});
     ftppassword = new textbox('password', {msg : '', css : 'login_pwd', over : 'login_over'});
   
     $('login_submit').onmouseover=function() {
       this.src=this.src.replace(new RegExp(".jpg\\b"), "_o.jpg");
     };
     $('login_submit').onmouseout=function() {
       this.src=this.src.replace(new RegExp("_o\\b"), "");
     };
   }
 });