// help javascript

window.addEvent('domready', function() {
  var help = new Help();
});

var Help = new Class({

  div: Object,
  img: Object,
  
  help_captcha: '<h4>Security Code</h4>' +
    '<p>Please enter the Security Code exactly as shown in the image. This is required to verify human users and prevent spam.</p>' +
    '<p>If you are unable to read the characters, click \'reload image\' to generate a new Security Code.</p>',
  
  help_package: '<h4>basic clean</h4>' +
    '<ul>' +
      '<li><h5>kitchen</h5> cooktop, splashback, benchtops, sink/taps, appliance exteriors, microwave</li>' +
      '<li><h5>bathrooms</h5> bath, shower cabin, counter tops, sink/taps, toilet, mirrors/splashbacks</li>' +
      '<li><h5>all rooms</h5> vacuum carpets, mop floors, dust surfaces, empty rubbish, general tidy up, deodorise</li>' +
    '</ul>' +
    '<h4>spring clean</h4>' +
    '<ul>' +
      '<li><h5>basic clean +</h5></li>' +
      '<li><h5>kitchen</h5> inside oven, rangehood, cupboard exteriors</li>' +
      '<li><h5>bathrooms</h5> scrub wall tiles/grout, cupboard exteriors</li>' +
      '<li><h5>all rooms</h5> windows *, mirrors, walls, doors, handles, light switches, skirting boards/sills, dust blinds, light fittings/fans, wall hangings, remove cobwebs, polish wooden furniture, vacuum soft furnishings, vacuum under beds</li>' +
    '</ul>' +
    '<h4>moving in/out clean</h4>' +
    '<ul class="last-child">' +
      '<li><h5>basic clean +</h5></li>' +
      '<li><h5>kitchen</h5> inside oven, rangehood, cupboard exteriors, cupboard interiors</li>' +
      '<li><h5>bathrooms</h5> scrub wall tiles/grout, cupboard exteriors, cupboard interiors</li>' +
      '<li><h5>all rooms</h5> windows *, mirrors, walls, doors, handles, light switches, skirting boards/sills, dust blinds, light fittings/fans, remove cobwebs</li>' +
	'</ul>',
  
  help_account_type: '<h4>Account Type</h4>' +
    '<p>Please choose the type of account you would like to create.</p>' +
    '<p>For individuals, choose a personal account type. If you represent a business, government, non-profit or other organisation, choose a business account type.</p>',
  
  help_organisation_no: '<h4>Organisation No</h4>' +
    '<p>For Australian businesses, including individuals (sole traders), partnerships, companies, trusts or charities, please enter your Australian Business Number (ABN).</p>',

  help_cc_cvn: '<h4>Card Verification Value</h4>' +
    '<p>The card verification value (CVV No) is a 3 or 4 digit security number, found on either the front or back of the card.</p>' +
    '<p>Visa &amp; MasterCard have a 3-digit no printed on the back signature panel of the card. The CVV No is always the last group of numbers.</p>' +
    '<p>American Express cards have a 4-digit no printed on the front side of the card just above and to the right of the main card no.</p>' +
    '<p>For more information about your CVV No visit: <a href="http://en.wikipedia.org/wiki/Card_Security_Code" target="_blank">http://en.wikipedia.org</a>.</p>',

  help_transaction_ref: '<h4>Transaction Reference</h4>' +
    '<p>Please enter your Invoice Reference No or your Surname/Address as the transaction reference.</p>' +
    '<p>We require this information in order to reconcile your payment to your account.</p>',
 
  initialize: function() {
	  $$('img.help').each(function(img) {
      img.addEvent('click', function(e) { this.show_help(img.id, e); }.bind(this));
  	}.bind(this));
    
  	this.div = new Element('div', {
  	  'class': 'help_popup'
  	});
	 
	  this.img = new Element('img', {
      'src': '/img/icon/close.gif',
      'title': 'Close',
      'styles': {'cursor': 'pointer'},
      'events': {
        'click': function() {
    	    this.src = '/img/icon/close.gif';
    	    if(Browser.Engine.trident) { this.parentNode.dispose(); } else { this.parentNode.fade('out'); }
    	  },
        'mouseover': function(){ this.src = '/img/icon/close-hover.png'; },
        'mouseout': function(){ this.src = '/img/icon/close.gif'; }
      }
    });
  },

  show_help: function(key, event) {
	  this.div.set('html', this[key]);
	  this.div.grab(this.img, 'top');
	  if(!Browser.Engine.trident) { this.div.set('styles', { 'opacity': 0 }); }
	  this.div.injectInside(document.body);
    this.div.set('styles', { 'top': event.page.y - (this.div.getSize().y / 2) - 10 + 'px', 'left': event.page.x + 20 + 'px' });
    if(!Browser.Engine.trident) { this.div.fade('in'); } 
	  this.div.makeDraggable();
  }
  
});