//Load the selector(s)
window.addEvent('domready', function() {
  $$('form').each( function(form) {
    var validation = new FormValidation( form );
  });
});


var FormValidation = new Class({
  
  Implements: Options,
	options: {
    checkDisabledElements : false,
    doInitialLoading: true,
    checkDelay : 400,
    
    successClass : 'success',
    
    inputCheckEvent : 'keyup',
    textareaCheckEvent : 'keyup',
    selectCheckEvent : 'change'
  },
  
	
  initialize: function( form ) {	
		this.form = form; //The form
		this.elements = [];
		
		//Get all the elements
		//var formElements = form.getElements('.input-wrapper input ,.input-wrapper textarea ,.input-wrapper select, .input-data-wrapper input, .input-data-wrapper textarea, .input-data-wrapper select, input, textarea, select');
		var formElements = form.getElements('.input-data-wrapper'); //form.getElements('.input-data-wrapper input , .input-data-wrapper textarea, .input-data-wrapper select, .input-wrapper input ');
		
		
		//get the input elements
		formElements.each( function( div ) {
		  var elements = div.getChildren();
		  
		  elements.each( function( element ) {
		  
  		  var erased = false;
  		  var tag = element.get('tag');
  		  
  		  if( tag == 'input' || tag == 'textarea' || tag == 'select' || tag == 'checkbox' ) {
          
          //log( 'element[' + element.get('tag') + ']: ' + element + ',' + element.id );		  
    		  
    		  
    		  //Add the classes
    		  var type = element.get('type');
    		  if( type && type != '' && type != 'text' && type != 'hidden' && type != 'password' ) {
    		    element.addClass( element.get('type') );
    		  }
    		  
    		  //Remove all the [disabled,button,file,hidden] elements
    		  if( (!this.options.checkDisabledElements && element.get('disabled') ) || element.get('nocheck') == 'true' || element.get('type') == 'button' || element.get('type') == 'file' || element.get('type') == 'hidden' ) {
    		    formElements.erase( element );
    		    erased = true;
    		  }
    		  
    		  //Create the input class for the element
    		  if( !erased ) { 
            //store the extended element into the array
            this.elements.push( new FormInput( this, element ) );
          
          
            //Show a tip field?
            /*
            if( element.get('tiptitle') ) {
              //Set the title & text of the tip
              element.store('tip:title', element.get('tiptitle') );
              element.store('tip:text', element.get('tiptext') );
              
              var showTips = new Tips( element, {
              	showDelay: 100,
              	hideDelay: 400,
              	fixed: true,
              	offsets: {'x': element.offsetWidth + 20, 'y': 0}
              	
              	
                //onShow: function(tip) { tip.fade('in'); },
              	//onHide: function(tip) { tip.fade('out'); }
              });
            }
            */
         }
        }
        
        //if( !erased ) log('element: ' + element.id );  
  		  //if( erased ) log('erased element: ' + element.id );
  		}, this);
		}, this);
		
		//get & store the submit button
		var submitB = form.getElement('input[type="submit"]');
	  if( submitB ) {
      submitB.addClass('submit');
      this.submitElement = submitB;
	  }
		
		//Init the submit
		this.initSubmit();
	},
	
	initSubmit : function()
	{
    //only check if there is a submit button found	 
    if( this.submitElement == '' || this.submitElement == undefined ) return;
    
    //log( 'initing submit element..');
    
    //Attach the check when clicked
    //this.submitElement.addEvent('click', function(event) {  this.checkSubmit( event ); }.bind(this) ); 
    //attach the check event to the 'submit' event of the form
	  this.form.addEvent('submit', function(event) {  this.checkSubmit( event ); }.bind(this) );
    
    //Include the warning html [hidden]
    this.warningDiv = new Element('div', {
      'type': 'actionWarning',
      'id' : 'inputFormWarningMsg',
      'class': 'actionStatus actionWarning',
      'style' : 'display:none;',
      'html': '<p>Er zitten nog fouten in dit formulier</p><ul><li>Vul de velden juist in en probeer het opnieuw</li></ul>'
    });
    var parentNode = this.submitElement.parentNode;
    this.warningDiv.inject( parentNode, 'top');
    
    //Slide the warning html out, so it can be slided in again 
    var mySlide = new Fx.Slide( this.warningDiv, {mode: 'vertical'} ); 
    mySlide.slideOut(); 
  },
  
  /**
   * Called when the submit button is clicked
   */     
  checkSubmit : function(event)
  {
    var errors = false;
  
    //Check if the input fields are OK
    this.elements.each( function(element) {
      if( element.element.get('class') != this.options.successClass ) {
        //element is not succes, but has it been checked? First check again
        element.checkInput();
        if( !element.element.hasClass( this.options.successClass ) ) {
            errors = true;
            log('element [' + element.element.id + '] is not OK => ' + element.element.hasClass( this.options.successClass ) ); //element.element.get("class") );
        }
      }
    },this);
    
    
    //Prevent the default (eg. submit)?
    if( errors == true ) {
      event.preventDefault();
      this.showCannotSubmitMessage();
    } else {
      //All is OK, submit
      //event.preventDefault();
      this.submitElement.disabled = true;
    }
	},
	
	
	showCannotSubmitMessage : function()
	{
    //Set the display to block, in order to show it
    this.warningDiv.style.display = 'block';
    
    //Slide the element into view
    var mySlide = new Fx.Slide( this.warningDiv, {mode: 'vertical'} ); 
    mySlide.slideIn();
    
    //timer to hide the element after 3 seconds
    (function() { 
      var mySlide = new Fx.Slide( this, {mode: 'vertical'} ); 
      mySlide.slideOut(); } 
    ).delay( 3000, this.warningDiv );
    
    
    //window.setTimeout( "$('inputFormWarningMsg').style.display = 'none';" , 3000 );
	}
	
	
	
	
});
	
	
var FormInput = new Class({

  Implements: Options,
	options: {
    checkDelay : 400,
    
    inputCheckEvent : 'keyup',
    textareaCheckEvent : 'keyup',
    selectCheckEvent : 'change',
    
    elementLoadingClass : 'loading',
    elementSuccessClass : 'success',
    elementFailureClass : 'error'
  },
	
  initialize: function( form, element ) {
    this.form = form;
    this.element = element;
    this.className = this.options.elementSuccessClass; //Default success
    this.errorMsg = '';
    this.elementMsg = $(this.element.id + '-msg'); //The message span of the element
    
	  //Set the check function to be called
    this.check = function() { this.checkInput( ); }.bind(this);
    
    //defaults
    
      //Check the function on first run
		  if( this.form.options.doInitialLoading ) { this.check(); }

      //Determine the check event
      var eventTag = this.options.inputCheckEvent;
      if( this.element.get('tag') == 'select' ) { eventTag = this.options.selectCheckEvent; }
      if( this.element.get('tag') == 'textarea' ) { eventTag = this.options.textareaCheckEvent; }
		  
		  //Add the check event
      this.element.addEvent( eventTag , function( event ) {
        
        //Set the loading className
        this.setClass( this.options.elementLoadingClass );
    
        //Add a timer, so the function isn't called at every keypress
        if( this.element.timer ) $clear( this.element.timer );
        this.element.timer = this.check.delay(400, this.element);
        
      }.bind(this) ); 
    
    
    //Add the 'required' image
    if( this.element.get('required') == 'true'  || this.element.get('required') ) 
    {
      var dw = this.element.getParent('div.input-data-wrapper');
      if( dw ) {
        var itw = dw.getParent().getChildren('div.input-text-wrapper');
        if( itw ) {
          itw = itw[0]; //Get the first
          
          //Set the h3 to a 'required' classname
          var htxt = itw.getChildren('h3');
          if( htxt ) {
            htxt.addClass( 'required' );
          }
        }
      }
    }
      
      return this;
  },

  /**
   *
   */     
  setClass : function( className ) {
    
    //Remove all the classes options 	 
    this.element.removeClass( this.options.elementLoadingClass );
    this.element.removeClass( this.options.elementSuccessClass );
    this.element.removeClass( this.options.elementFailureClass );
    
    //Set the given class
    this.element.addClass( className );
	},
	/**
	 *
	 */   	
	setErrorMsg : function ( msg ) {
	 if( this.elementMsg ) this.elementMsg.set('text', msg );
	},
	
	
	/**
	 *
	 */   	
	checkInput : function() {
	 
	 //log('checking input for element: ' + this.element.id );
    
    //Set the default className & error msg
    this.className = this.options.elementSuccessClass; //Default success
    this.errorMsg = '';
    
    // Check required
    if( this.element.get('required') == 'true' || this.element.get('required') ) { this.checkRequired(); }
    
    //Only check the field when its not empty, or it is required
    if( this.element.get('required') == 'true' || this.element.value.trim() != '' )
    {
      // Check minlength
      if( this.element.get('minlength') ) { this.checkMinimalLength(); }
      
      //Only continue with the checks if no error has occured yet
      if( this.className != this.options.elementFailureClass ) { 
        
        //check if the element has a checktype [afterwards since it can use ajax]
        if( this.element.get('checktype') )
        {
          this.className = this.options.elementLoadingClass; //set to loading
          var type = this.element.get('checktype');
          
          if( type == 'username' ) this.checkValidUsername( );
          if( type == 'email' ) this.checkValidEmail( );
          if( type == 'date' ) this.checkValidDate( );
          if( type == 'knhburl' ) this.checkValidKnhbStandenHTML();
          if( type == 'domain' ) this.checkValidDomain();
          if( type == 'youtube' ) this.checkValidYoutubeUrl();
        }
      }
    }
    
    //Show the result
    this.setClass( this.className );
    this.setErrorMsg( this.errorMsg );
  },
  
  /**
   *
   */     
  checkRequired : function() 
  {
    var className = this.options.elementSuccessClass; //Default success
    var errorMsg = '';
    
    if( this.element.value.trim() == '' ) {
      className = this.options.elementFailureClass;
      errorMsg = 'Dit veld is verplicht';
    }
    
    this.storeValidationResult( className, errorMsg );
  },
  
  /**
   *
   */     
  storeValidationResult : function ( className , errorMsg ) {
    if( this.className != this.options.elementFailureClass ) {
      //log('className: ' + className + '[' + this.options.elementFailureClass + ']' );
      this.className = className;
      this.errorMsg = errorMsg;
    }
    
    
  },
  
  
  /**
   * Check the minimal length
   */     
  checkMinimalLength : function() 
  {
    var className = this.options.elementSuccessClass; //Default success
    var errorMsg = '';
    
    var elementLength = parseInt( this.element.value.trim().length );
    var minLength = parseInt( this.element.get('minlength') );
    
    if( minLength > elementLength ) {
      className = this.options.elementFailureClass; //input length is to small
      errorMsg = 'Dit veld moet minimaal ' + minLength + ' karakters bevatten';
    }
    
    this.storeValidationResult( className, errorMsg );
  }, 
  
  
  /**
   *
   */     
  checkValidUsername : function() 
  {
    var username = this.element.value.trim();
    var userID = this.element.get('userID');
    var failureClass = this.options.elementFailureClass;
    var successClass = this.options.elementSuccessClass;
    
    var uncheck = function( className,errorMsg) { this.storeValidationResult( className,errorMsg ); }.bind(this);
    var setClass = function( className) { this.setClass( className ); }.bind(this);
    var setErrorMsg = function( errorMsg) { this.setErrorMsg( errorMsg ); }.bind(this);
    
    var req = new Request({
      url: host + 'scripts/ajax/ajax.php', 
      element: this.element,
      method: 'post',
      data: 'class=validations&function=checkValidUsername&userID=' + userID + '&username=' + username ,
  		onSuccess: function(html) {
  		  var result = html.trim().split('|', 2 );
  		  
        var className = failureClass; //Default failure
        var errorMsg = '';
  		  
  			if( result[0] == 'true' ) { className = successClass; }
  			if( result[0] == 'false' ) { className = failureClass; }
  			
  			//Set the message
  			if( result[0] == 'false' && result[1] != '' ) { errorMsg = result[1]; }
        
        //Show the result
        uncheck( className, errorMsg );
        setClass( className );
        setErrorMsg( errorMsg );
        //log('className: ' + className + ', errorMsg: ' + errorMsg );
   		},
  		onFailure: function() {
  			//if( html == 'true' ) { element.set('class', 'error' ); }
  		}
  	});
  	
  	req.send();
    
	},
	
	/**
   *
   */     
  checkValidDomain : function() 
  {
    var domain = this.element.value.trim();
    var teamID = this.element.get('teamID');
    var failureClass = this.options.elementFailureClass;
    var successClass = this.options.elementSuccessClass;
    
    var uncheck = function( className,errorMsg) { this.storeValidationResult( className,errorMsg ); }.bind(this);
    var setClass = function( className) { this.setClass( className ); }.bind(this);
    var setErrorMsg = function( errorMsg) { this.setErrorMsg( errorMsg ); }.bind(this);
    
    var req = new Request({
      url: host + 'scripts/ajax/ajax.php', 
      element: this.element,
      method: 'post',
      data: 'class=validations&function=checkValidDomain&domain=' + domain + '&teamID=' + teamID,
  		onSuccess: function(html) {
  		  var result = JSON.decode( html );
  		  
        var className = failureClass; //Default failure
        var errorMsg = '';
  		  
  			if( result[0] == 'true' ) { className = successClass; }
  			if( result[0] == 'false' ) { className = failureClass; }
  			
  			//Set the message
  			if( result[0] == 'false' && result[1] != '' ) { errorMsg = result[1]; }
        
        //Show the result
        uncheck( className, errorMsg );
        setClass( className );
        setErrorMsg( errorMsg );
        //log('className: ' + className + ', errorMsg: ' + errorMsg );
   		},
  		onFailure: function() {
  			//if( html == 'true' ) { element.set('class', 'error' ); }
  		}
  	});
  	
  	req.send();
    
	},
	
	/**
	 *
	 */   	
	checkValidYoutubeUrl : function()
	{
	 var className = this.options.elementSuccessClass; //Default success
	 var errorMsg = '';
	 
	 this.storeValidationResult( className, errorMsg );
	},
	
	
	/**
	 *
	 */   	
	checkValidEmail : function() 
  {
    var className = this.options.elementSuccessClass; //Default success
    var errorMsg = '';
    
    var regexp = /^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
    var valid = regexp.test( this.element.value.trim() );
    
    if( !valid ) {
      className = this.options.elementFailureClass;
      errorMsg = 'Vul een correct email adres in';      
    }
    
    this.storeValidationResult( className, errorMsg );
  },
  
  
  /**
   *
   */     
  checkValidDate : function()
  {
    var className = this.options.elementSuccessClass; //Default success
    var errorMsg = '';
    
    var regexp = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/;
    var valid = regexp.test(this.element.value);
    
    if( !valid ) {
      className = this.options.elementFailureClass;
      errorMsg = 'Vul een correcte datum in';      
    }
    
    this.storeValidationResult( className, errorMsg );
  },
  
  
  checkValidKnhbStandenHTML : function() 
  {
    var className = this.options.elementSuccessClass; //Default success
    var errorMsg = '';
        
    //Set the correct begin
    var correctBegin = "http://www.knhb.nl/";
    
    //trim the value
    var value = this.element.value.replace(/^\s+|\s+$/,'');
    
    //Set the suburl to check
    var suburl = value.substring( 0 , correctBegin.length );
    
    if( suburl != correctBegin ) {
      className = this.options.elementFailureClass;
      errorMsg = 'Vul een correcte knhb standenmonitor url in';    
    }
    
    this.storeValidationResult( className, errorMsg );
  }
	
});












//Load the selector(s)
window.addEvent('domready', function() {
  $$('div.stars').each( function(voter) {
    var voteDiv = new Vote( voter );
  });
});

var Vote = new Class({
  
  Implements: Options,
	options: {
    oneStarClassname : 'onestar',
    twoStarClassname : 'twostar',
    threeStarClassname : 'threestar',
    fourStarClassname : 'fourstar',
    fiveStarClassname : 'fivestar'
  },
  
	
  initialize: function( vote ) {	
		this.vote = vote; //The vote div
		this.voteID = this.vote.id; //the vote ID
		this.voteRatingHolder = this.vote.getElement('ul');
		this.voteOptions = this.voteRatingHolder.getElements('li');
		
		//Set the voteoption events
		this.voteOptions.each( function(option) {
		  
		  //log('vote option: ' + option.get('class') );
		  option.addEvent('click', function(event) {
		    
        event.preventDefault();
		    this.doVote( option );
		    //alert( this );
		    
		  }.bind(this) );
		  
		},this);
	},
	
	
	/**
	 *
	 */   	
	doVote : function( option ) {
	
	 //Set the vote value
	 this.value = option.value;
	 
	 //Remove all the current classes
	 this.voteRatingHolder.className = 'rating';
	 
	 //Set the appropriate classname
	 if( this.value == 1 ) { this.voteRatingHolder.addClass( this.options.oneStarClassname ); }
	 else if( this.value == 2 ) { this.voteRatingHolder.addClass( this.options.twoStarClassname ); }
	 else if( this.value == 3 ) { this.voteRatingHolder.addClass( this.options.threeStarClassname ); }
	 else if( this.value == 4 ) { this.voteRatingHolder.addClass( this.options.fourStarClassname ); }
	 else if( this.value == 5 ) { this.voteRatingHolder.addClass( this.options.fiveStarClassname ); }
	 
	 //send the request
	 this.saveVote();
	},
	
	saveVote : function() 
  {
    //Set the variables that are needed for the request
    var value = this.value;
    var vote = this.vote;
    var options = this.options;
    
    //Get the edit field
    var req = new Request({
      url: host + 'scripts/ajax/ajax.php',
      method: 'post',
      data: 'class=vote&function=doVote&voteID=' + this.voteID + '&value=' + this.value ,
  		onSuccess: function(html) {
  		  var result = JSON.decode( html );
  		  
  		  if( result['success'] == 'true' )
  		  {
          //Show the result instead of the voting possibility
          vote.empty();
          vote.innerHtml = '&nbsp;';
          vote.className = 'rating';
          if( result['average'] == 1 ) { vote.addClass( options.oneStarClassname ); }
          else if( result['average'] == 2 ) { vote.addClass( options.twoStarClassname ); }
          else if( result['average'] == 3 ) { vote.addClass( options.threeStarClassname ); }
          else if( result['average'] == 4 ) { vote.addClass( options.fourStarClassname ); }
          else if( result['average'] == 5 ) { vote.addClass( options.fiveStarClassname ); }
                    
  		  }
  		  else
  		  {
  		    //could not edit..
  		    alert( 'De stem kon niet worden verwerkt' );
  		  }
  		},
  		onFailure: function() {
  			alert( 'De stem kon niet worden verwerkt' );
  		}
	  } ).send();
	}

});




//Load the selector(s)
window.addEvent('domready', function() {
  $$('.input-data-multiple-select').each( function(el) {
    var selector = new MultipleSelect( el );
  });
});


var MultipleSelect = new Class({
  
  Implements: Options,
		
	options: {},
	
  initialize: function() {	
		this.availableElement = $('available');
    this.available = this.availableElement.getElements('li');
		
		this.selectedElement = $('selected');
		this.selected = this.selectedElement.getElements('li');
		this.resultSelected = $('selectedIDs');
		
		this.selectAllButton = $('selectAll');
		this.submitButton = $('submit');
		
		
		this.init();
	},
	
	init : function() {
	
	  //attach the click event to all the available & selected options
	  this.available.each( function(el) {
	    el.addEvent('click', function() { 
        this.switchItem( el ); 
      }.bind(this) );
	  },this );
	  
	  //{this.available , this.selected}
	  //this.switchItem( el); 
	  
	  //Move all the selected items to the 'selected' box
	  this.available.each( function(el) {
	    if( el.get('selected') ) {
	     alert( el.id );
	      //el.fireEvent('click');
	      this.switchItem( el);
	    }
	  }, this );
	  
	  //Attach the serializable event to the submit in order to preload the list
    if( this.submitButton && this.resultSelected) {
      this.submitButton.addEvent('click', function( event ) {
        this.serializeResult();
      }.bind(this) );
    }
    
    //Attach the select all functionality
    if( this.selectAllButton ) {
      this.selectAllButton.addEvent('click', function( event ) {
        if( this.selectAllButton.get('tag') == 'a' ) event.preventDefault();
        this.selectAll();
      }.bind(this) );
    }
	},
	
	
	/**
	 * Moves the item from 'selected' to 'available' or visa versa
	 */     		
	switchItem: function( option ) {
	  var availableIndex = this.available.indexOf( option );
	  var selectedIndex = this.selected.indexOf( option );
	  
	  //this.log('availableIndex: ' + availableIndex);
	  //this.log('selectedIndex: ' + selectedIndex);
	  
	  //Is the current option under available
	  if( availableIndex >= 0 ) {
      //Move the option to the selected box
      this.available.erase( option );
      this.selected.include( option );
      
      //Show the option in the selected box
      option.fade('out');
      (function() { 
        option.inject( this.selectedElement );
        option.fade('in');
       }
      ).delay( 500, this );
      
      this.log('Moved' + option.id + ' to selected');
    }
    else {

      //Move the option to the available box
      this.selected.erase( option );
      this.available.include( option ); //.include ?
      
      //Show the option in the available box
      option.fade('out');
      (function() { 
        option.inject( this.availableElement );
        option.fade('in');
       }
      ).delay( 500, this );
      
      this.log('Moved' + option.id + ' to available');
    }
    
    
	},
	
	/**
	 *
	 */   	
	serializeResult : function() { 
	 this.resultSelected.value = ''; //Clear the list
    this.selected.each( function(argument, index) {
      this.resultSelected.value = this.resultSelected.value + ',' + argument.id;
    },this);
	},
	
	selectAll : function() {
    //first create a dummy holder array with all the available elements	
	  var holder = [];
    this.available.each( function(el) {
      holder.include( el );
    });
    
    //Switch all the items
    holder.each( function(el) {
      this.switchItem( el );
    }, this );
    
	},
	
	
	log: function(text, args) {
		if (window.console) console.log(text.substitute(args || {}));
	}
});
		


var Poll = new Class({
  
  Implements: Options,
	options: {
    
  },
  
	
  initialize: function( poll ) {	
		this.poll = poll; //The poll form
		this.pollID = this.poll.getElement('input#pollID').value; //the poll ID
		this.answers = this.poll.getElements('input[type=radio]');
		
		//Iterate over all answers?
		/*
		this.answers.each( function(el) {
		  log( el.id );
		});
		*/
		
		//Set the submit events
		this.poll.addEvent('submit', function(event) {
		  event.preventDefault();
		  this.doPollSubmit();
		}.bind(this) );
		  
	},
	
	
	doPollSubmit : function() 
  {
    //Get & set the variables that are needed for the request
    var pollID = this.pollID;
    var value = '';
    this.answers.each( function(el) {
      if( el.get('checked') ) {
        value = el.value;
      }        
    });
    var poll = this.poll;
    
    //Get the edit field
    var req = new Request({
      url: host + 'scripts/ajax/ajax.php',
      method: 'post',
      data: 'class=poll&function=processVote&pollID=' + pollID + '&answer=' + value ,
  		onSuccess: function(html) {
  		  //html contains the result display of the poll
  		  poll.getParent().set('html', html );
  		},
  		onFailure: function() {
  			alert( 'Je stem kon helaas niet worden verwerkt, probeer het later opnieuw' );
  		}
	  } );
	  
	  //Only sent when not an empty answer
	  if( pollID != '' && value != '' ) req.send();
	}

});




//Load the textarea(s) smilies tooltip
window.addEvent('domready', function() {
  $$('textarea').each( function(el) {
    //var txtarea = new SmiliesTooltip( el );
  });
});

/**
 * Shows a tooltip for the element containing all the smilies
 */ 
var SmiliesTooltip = new Class({
  
  Implements: Options,
		
	options: {},
	
  initialize: function( element ) 
  {	
    this.element = element;

    //Set the title & text of the tip
    this.element.store('tip:title', 'Smilies' );
    this.element.store('tip:text', this.getSmiliesText() );
    this.element.store('tip:closer', '<p>blaat..</p>' );
    
    var showTips = new Tips( this.element, {
    	showDelay: 100,
    	/*hideDelay: 400,*/
    	hideDelay : 0,
    	className : 'smilies',
    	fixed: true,
    	offsets: {'x': this.element.offsetWidth + 20, 'y': 0},
      onShow: function(tip) { tip.fade('in'); },
    	onHide: function(tip) { } //To prevent auto hide //tip.fade('out'); }
    });
    
    showTips.hide();
    
    this.setCloser();
    
  },
  
  setCloser : function(  ) {
    
    var html = '';
    
    var closeImg = new Element('p', {
      'class': 'close',
      'style' : 'display:block;',
      'html': 'close'
    });
    closeImg.addEvent('click', function() {
      $$('div.smilies').fade('out');;
    });
    
    $$('div.smilies').each( function(el) 
    { 
      var div = el.getChildren()[1]; //div .tip
      
      div.set('html', '<div class="tip-closer"></div>');
      
      alert( el.getElement('div.tip div.tip-title') );
      //closeImg.inject(  );
    });
    //var parentNode = this.submitElement.parentNode;
    //this.warningDiv.inject( parentNode, 'top');
    
    //html += closeImg;
    
    //return html;
  },
  
  getSmiliesText : function(  ) {
    var html = '';
    
    var closeImg = new Element('p', {
      'class': 'close',
      'style' : 'display:block;',
      'html': 'close'
    });
    closeImg.addEvent('click', function() {
      $$('div.smilies').fade('out');;
    });
    //alert( closeImg.innerHTML);
    
    
    //var parentNode = this.submitElement.parentNode;
    //this.warningDiv.inject( parentNode, 'top');
    
    //html = '<a href="#" onclick="this.fireEvent(\'hide\');return false;">Close</a>';
    
    html = closeImg;   
    
    return html;
  }

});