/****************************************
* Copyright 2006 Ex-designz.net & Myasp-net.com
* JavaScript written by: Dexter Zafra
****************************************/

//--------------------------------------------------------//
// Multiple Functions to handle element OnFocus event
function UnameFocus() 
 {
   document.getElementById('username').style.backgroundColor = '#FFF9EC'; //Make the textbox color lightyellow
   document.getElementById('lbluname').style.color = '#000000'; //Make the label text color black
   document.getElementById('lbluname').innerHTML = 'Username:'; //On error raised textbox focus, assign label default text 
   document.getElementById('check').style.display='block';
}
function PassWordFocus() 
 {
   document.getElementById('password').style.backgroundColor = '#FFF9EC'; 
   document.getElementById('lblpass').style.color = '#000000';
   document.getElementById('lblpass').innerHTML = 'Password:';
}
function RetypePassFocus() 
 {
   document.getElementById('password').style.backgroundColor = '#FFF9EC'; 
   document.getElementById('lblretype').style.color = '#000000';
   document.getElementById('lblretype').innerHTML = 'Re-Type Pass:';
   document.getElementById('lblpass').style.color = '#000000';
   document.getElementById('lblpass').innerHTML = 'Password:';
}
function FUnameFocus() 
 {
   document.getElementById('fname').style.backgroundColor='#FFF9EC';
   document.getElementById('ufname').style.color = '#000000';
   document.getElementById('ufname').innerHTML = 'First name:';
}
function LUnameFocus() 
 {
   document.getElementById('lname').style.backgroundColor='#FFF9EC';
   document.getElementById('ulname').style.color = '#000000';
   document.getElementById('ulname').innerHTML = 'Last name:';
}
function FUageFocus() 
 {
   document.getElementById('age').style.backgroundColor='#FFF9EC';
   document.getElementById('ulage').style.color = '#000000';
   document.getElementById('ulage').innerHTML = 'Age:';
}
function UaddressFocus() 
 {
   document.getElementById('address').style.backgroundColor='#FFF9EC';
   document.getElementById('staddress').style.color = '#000000';
   document.getElementById('staddress').innerHTML = 'Address:';
}
function UCityFocus() 
 {
   document.getElementById('city').style.backgroundColor='#FFF9EC';
   document.getElementById('usercity').style.color = '#000000';
   document.getElementById('usercity').innerHTML = 'City:';
}
function UzipFocus() 
 {
   document.getElementById('zipcode').style.backgroundColor='#FFF9EC';
   document.getElementById('userzip').style.color = '#000000';
   document.getElementById('userzip').innerHTML = 'Zip/Postal code:';
}
function UemailFocus() 
 {
   document.getElementById('email').style.backgroundColor='#FFF9EC';
   document.getElementById('ulemail').style.color = '#000000';
   document.getElementById('ulemail').innerHTML = 'Email:';
}
function UTelPhoneFocus() 
 {
   document.getElementById('telephone').style.backgroundColor='#FFF9EC';
   document.getElementById('ulphone').style.color = '#000000';
   document.getElementById('ulphone').innerHTML = 'Telephone:';
}
//--------------------------------------------------------//

//--------------------------------------------------------//
// Handle User Registration Form Validation
function RegValidate(RegForm) 
 {
// Declare Variables - get the textbox value and assign it into the variable
 var Uname = RegForm.elements['username'].value; 
 var Pass = RegForm.elements['password'].value;
 var RepeatPass = RegForm.elements['repass'].value;
 var FirstName = RegForm.elements['fname'].value;
 var LastName = RegForm.elements['lname'].value;
 var CheckAge = RegForm.elements['age'].value;
 var StreeAddress = RegForm.elements['address'].value;
 var CityName = RegForm.elements['city'].value;
 var ZipCode = RegForm.elements['zipcode'].value;
// If the first five required fields are empty, then do the textbox color magic
if (Uname == "" && Pass == "" && RepeatPass =="" && FirstName =="" && LastName =="" && CheckAge =="") 
  {
     // Change the background color of the textbox,border as well as label text
     document.getElementById('username').style.backgroundColor='#FFF4F4'; 
     document.getElementById('username').style.border = '1px solid #CC0000';
     document.getElementById('lbluname').style.color = '#CC0000';
     document.getElementById('lbluname').innerHTML = 'Empty Field:';
     document.getElementById('password').style.backgroundColor='#FFF4F4'; 
     document.getElementById('password').style.border = '1px solid #CC0000';
     document.getElementById('lblpass').style.color = '#CC0000';
     document.getElementById('lblpass').innerHTML = 'Empty Field:';
     document.getElementById('repass').style.backgroundColor='#FFF4F4';
     document.getElementById('repass').style.border = '1px solid #CC0000'; 
     document.getElementById('lblretype').style.color = '#CC0000';
     document.getElementById('lblretype').innerHTML = 'Empty Field:';
     document.getElementById('fname').style.backgroundColor='#FFF4F4';
     document.getElementById('fname').style.border = '1px solid #CC0000'; 
     document.getElementById('ufname').style.color = '#CC0000';
     document.getElementById('ufname').innerHTML = 'Empty Field:';
     document.getElementById('lname').style.backgroundColor='#FFF4F4';
     document.getElementById('lname').style.border = '1px solid #CC0000'; 
     document.getElementById('ulname').style.color = '#CC0000';
     document.getElementById('ulname').innerHTML = 'Empty Field:';
     document.getElementById('age').style.backgroundColor='#FFF4F4';
     document.getElementById('age').style.border = '1px solid #CC0000'; 
     document.getElementById('ulage').style.color = '#CC0000';
     document.getElementById('ulage').innerHTML = 'Empty Field:';
     alert("Please fill in the empty fields.\n- Username\n- Password\n- Password 2\n- Firstname\n- Lastname\n- Age");
     return false;
}
// Check Username
 if (Uname == "") // if is empty/blank alert
  {
     alert("You must enter a username");
     document.getElementById('username').style.backgroundColor='#FFF4F4'; //Change the background color of the textbox
     document.getElementById('username').style.border = '1px solid #CC0000';
     document.getElementById('lbluname').style.color = '#CC0000';
     document.getElementById('lbluname').innerHTML = 'Empty Field:';
     return false;
  }
else if (Uname.length < 6) // Check char count, if it is less than 6 alert
 {
     alert ("The username is too short.\n Please enter a username from 6 to 12 characters.");
     document.getElementById('username').style.backgroundColor='#FFF4F4';
     document.getElementById('username').style.border = '1px solid #CC0000';
     document.getElementById('lbluname').style.color = '#CC0000';
     document.getElementById('lbluname').innerHTML = 'Too Short:';
     return false;
}
else if (Uname.length > 12) // Check char count, if it is greater than 12 alert
 {
     alert ("The username is too long.\n Please enter a username from 6 to 12 characters.");
     document.getElementById('username').style.backgroundColor='#FFF4F4';
     document.getElementById('username').style.border = '1px solid #CC0000';
     document.getElementById('lbluname').style.color = '#CC0000';
     document.getElementById('lbluname').innerHTML = 'Too Long:';
     return false;
}
//Check for illegal characters in username - On this field we only allow letters, numbers, and underscores
var illegalCharsUname = /\W/; 
if (illegalCharsUname.test(Uname)) // test the illegalCharsUname variable against Uname variable, it it ecounter invalid char, then alert
  {
     alert ("The username contains illegal characters.\n Please try again.");
     document.getElementById('username').style.backgroundColor='#FFF4F4';
     document.getElementById('username').style.border = '1px solid #CC0000';
     document.getElementById('lbluname').style.color = '#CC0000';
     document.getElementById('lbluname').innerHTML = 'Illegal Char:';
     return false;
} 
// Password
 if (Pass == "")
  {
     alert("You must enter a password");   
     document.getElementById('password').style.backgroundColor='#FFF4F4'; 
     document.getElementById('password').style.border = '1px solid #CC0000';
     document.getElementById('lblpass').style.color = '#CC0000';
     document.getElementById('lblpass').innerHTML = 'Empty Field:';
     return false;
  }
else if (Pass.length < 6)
 {
     alert ("The password is too short.\n Please enter a password from 6 to 10 characters.");
     document.getElementById('password').style.backgroundColor='#FFF4F4';
     document.getElementById('password').style.border = '1px solid #CC0000';
     document.getElementById('lblpass').style.color = '#CC0000';
     document.getElementById('lblpass').innerHTML = 'Too Short:';
     return false;
}
else if (Pass.length > 10)
 {
     alert ("The password is too long.\n Please enter a password from 6 to 10 characters.");
     document.getElementById('password').style.backgroundColor='#FFF4F4';
     RegForm.elements['password'].style.border = '1px solid #CC0000';
     document.getElementById('lblpass').style.color = '#CC0000';
     document.getElementById('lblpass').innerHTML = 'Too Long:';
     return false;
}
//Check for illegal characters in password - allow only letters and numbers
var illegalCharsPass =/[\W_]/; 
if (illegalCharsPass.test(Pass)) 
  {
     alert ("The password contains illegal characters.\n Please try again.");
     document.getElementById('password').style.backgroundColor='#FFF4F4';
     document.getElementById('password').style.border = '1px solid #CC0000';
     document.getElementById('lblpass').style.color = '#CC0000';
     document.getElementById('lblpass').innerHTML = 'Illegal Char:';
     return false;
} 
// Repeat Password
 if (RepeatPass == "")
  {
     alert("Please repeat the password");   
     document.getElementById('repass').style.backgroundColor='#FFF4F4';
     document.getElementById('repass').style.border = '1px solid #CC0000'; 
     document.getElementById('lblretype').style.color = '#CC0000';
     document.getElementById('lblretype').innerHTML = 'Empty:';
     return false;
 }
 if (RepeatPass != Pass)
  {
     alert("Password did not match.\n Please try again");   
     document.getElementById('repass').style.backgroundColor='#FFF4F4';
     document.getElementById('repass').style.border = '1px solid #CC0000'; 
     document.getElementById('password').style.border = '1px solid #CC0000';
     document.getElementById('password').style.backgroundColor='#FFF4F4';
     document.getElementById('lblpass').style.color = '#CC0000';
     document.getElementById('lblpass').innerHTML = 'Did not Match:';
     document.getElementById('lblretype').style.color = '#CC0000';
     document.getElementById('lblretype').innerHTML = 'Did not Match:';
     return false;
 }
// First name
 if (FirstName == "")
  {
     alert("You must enter your name");
     document.getElementById('fname').style.backgroundColor='#FFF4F4';
     document.getElementById('fname').style.border = '1px solid #CC0000'; 
     document.getElementById('ufname').style.color = '#CC0000';
     document.getElementById('ufname').innerHTML = 'Empty Field:';
     return false;
  }
// Allow only letters 
else if (FirstName.search(/^[A-Z ]+$/i) == -1) 
  {
     alert ("Your name contained numbers. Only alphabetic characters are allowed..\n Please try again.");
     document.getElementById('fname').style.backgroundColor='#FFF4F4';
     document.getElementById('fname').style.border = '1px solid #CC0000'; 
     document.getElementById('ufname').style.color = '#CC0000';
     document.getElementById('ufname').innerHTML = 'Illegal Char:';
     return false;
} 
// Last name
 if (LastName == "")
  {
     alert("You must enter your last name");
     document.getElementById('lname').style.backgroundColor='#FFF4F4';
     document.getElementById('lname').style.border = '1px solid #CC0000'; 
     document.getElementById('ulname').style.color = '#CC0000';
     document.getElementById('ulname').innerHTML = 'Empty Field:';
     return false;
  }
// Allow only letters 
else if (LastName.search(/^[A-Z ]+$/i) == -1) 
  {
     alert ("Your last name contained numbers. Only alphabetic characters are allowed..\n Please try again.");
     document.getElementById('lname').style.backgroundColor='#FFF4F4';
     document.getElementById('lname').style.border = '1px solid #CC0000'; 
     document.getElementById('ulname').style.color = '#CC0000';
     document.getElementById('ulname').innerHTML = 'Illegal Char:';
     return false;
} 
// Age
 if (CheckAge == "")
  {
     alert("You must enter your age");
     document.getElementById('age').style.backgroundColor='#FFF4F4';
     document.getElementById('age').style.border = '1px solid #CC0000'; 
     document.getElementById('ulage').style.color = '#CC0000';
     document.getElementById('ulage').innerHTML = 'Empty Field:';
     return false;
  }
else if (CheckAge < 12) //If the user is younger than 12 years old, alert the parents
 {
     alert ("You are too young to register.\n Please notify your parents");
     document.getElementById('age').style.backgroundColor='#FFF4F4';
     document.getElementById('age').style.border = '1px solid #CC0000'; 
     document.getElementById('ulage').style.color = '#CC0000';
     document.getElementById('ulage').innerHTML = 'Too young:';
     return false;
}
//Check to make sure the user did not enter letter in the age field
if (isNaN(CheckAge) == true)
  {
     alert ("Age cannot contained letters and other characters.\n Please enter your age again");
     document.getElementById('age').style.backgroundColor='#FFF4F4';
     document.getElementById('age').style.border = '1px solid #CC0000'; 
     document.getElementById('ulage').style.color = '#CC0000';
     document.getElementById('ulage').innerHTML = 'Only Number:';
     return false;
} 
// Gender
 var SexGender = RegForm.elements['gender'].value;
 if (SexGender == "")
  {
     alert("You must select a gender/sex");
     return false;
 }
// Street Address
 if (StreeAddress == "")
  {
     alert("You must enter your address");
     document.getElementById('address').style.backgroundColor='#FFF4F4'; 
     document.getElementById('address').style.border = '1px solid #CC0000';
     document.getElementById('staddress').style.color = '#CC0000';
     document.getElementById('staddress').innerHTML = 'Empty Field:';
     return false;
  }
// City
 if (CityName == "")
  {
     alert("You must enter a city or town");
     document.getElementById('city').style.backgroundColor='#FFF4F4'; 
     document.getElementById('city').style.border = '1px solid #CC0000';
     document.getElementById('usercity').style.color = '#CC0000';
     document.getElementById('usercity').innerHTML = 'Empty Field:';
     return false;
  }
// State
 var CheckState = RegForm.elements['state'].value;
 if (CheckState == "")
  {
     alert("You must enter a state");
     return false;
  }
// Zipcode
 if (ZipCode == "")
  {
     alert("You must enter a zipcode");
     document.getElementById('zipcode').style.backgroundColor='#FFF4F4'; 
     document.getElementById('zipcode').style.border = '1px solid #CC0000';
     document.getElementById('userzip').style.color = '#CC0000';
     document.getElementById('userzip').innerHTML = 'Empty Field:';
     return false;
  }
else if (ZipCode.length > 10)
 {
     alert ("The zipcode is too long.\n Please enter zipcode i.e. 90650 or 90650-7221");
     document.getElementById('zipcode').style.backgroundColor='#FFF4F4'; 
     document.getElementById('zipcode').style.border = '1px solid #CC0000';
     document.getElementById('userzip').style.color = '#CC0000';
     document.getElementById('userzip').innerHTML = 'Too Long:';
     return false;
}
//Check zipcode format - 5 digits or  nine digits with hyphen i.e. 90650-7221
var ZipFormat = /\d{5}(-\d{4})?/;
if (!ZipFormat.test(ZipCode)) 
  {
     alert ("The zipcode contained illegal characters.\n Please enter zipcode i.e. 90650 or 90650-7221");
     document.getElementById('zipcode').style.backgroundColor='#FFF4F4'; 
     document.getElementById('zipcode').style.border = '1px solid #CC0000';
     document.getElementById('userzip').style.color = '#CC0000';
     document.getElementById('userzip').innerHTML = 'Illegal Char:';
     return false;
} 
 // Email
var UserEMail = RegForm.elements['email'].value;
 if (UserEMail == "")
  {
     alert("You must enter an email address");
     document.getElementById('email').style.backgroundColor='#FFF4F4'; 
     document.getElementById('email').style.border = '1px solid #CC0000';
     document.getElementById('ulemail').style.color = '#CC0000';
     document.getElementById('ulemail').innerHTML = 'Empty Field:';
     return false;
  }
else if (!(UserEMail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1))
 {
     alert("E-mail address is not valid.\n Please enter a valid email address.");
     document.getElementById('email').style.backgroundColor='#FFF4F4'; 
     document.getElementById('email').style.border = '1px solid #CC0000';
     document.getElementById('ulemail').style.color = '#CC0000';
     document.getElementById('ulemail').innerHTML = 'Invalid Email:';
    return false ;
}
// Telephone Number
 var PhoneNumber = RegForm.elements['telephone'].value;
 if (PhoneNumber == "")
  {
     alert("You must enter a telephone number");
     document.getElementById('telephone').style.backgroundColor='#FFF4F4'; 
     document.getElementById('telephone').style.border = '1px solid #CC0000';
     document.getElementById('ulphone').style.color = '#CC0000';
     document.getElementById('ulphone').innerHTML = 'Empty Field:';
     return false;
  }
else if (PhoneNumber.length > 12)
 {
     alert ("The telephone number is too long.\n Please enter a telephone number format 562-805-9656/5628050917 including area code");
     document.getElementById('telephone').style.backgroundColor='#FFF4F4'; 
     document.getElementById('telephone').style.border = '1px solid #CC0000';
     document.getElementById('ulphone').style.color = '#CC0000';
     document.getElementById('ulphone').innerHTML = 'Too Long:';
     return false;
}
//Check Telephone Number format - format 562-805-9656 including area code
var ZipFormat = /^\(?\d{3}\)?\s|-\d{3}-\d{4}$/;
if (!PhoneNumFormat.test(PhoneNumber)) 
  {
     alert ("The telephone number contained illegal characters.\n Please enter a telephone number format 562-805-9656/5628050917 including area code");
     document.getElementById('telephone').style.backgroundColor='#FFF4F4'; 
     document.getElementById('telephone').style.border = '1px solid #CC0000';
     document.getElementById('ulphone').style.color = '#CC0000';
     document.getElementById('ulphone').innerHTML = 'Illegal Char:';
     return false;
} 
return true;
}
//--------------------------------------------------------//

//--------------------------------------------------------//
// Handle the registration form hide and unhide optional fields
window.onload = function()
 {
  if(document.getElementById)
   {
     var linkContainer = document.getElementById('optreqlink');
     var linebreak = linkContainer.appendChild(document.createElement('br'));
     var toggle = linkContainer.appendChild(document.createElement('a'));
     toggle.href = '#';
     toggle.appendChild(document.createTextNode(' Hide optional fields?'));

   toggle.onclick = function()
    {
      var linkText = this.firstChild.nodeValue;
      this.firstChild.nodeValue = (linkText == ' Hide optional fields?') ? ' Display optional fields?' : ' Hide optional fields?';

      var tmp = document.getElementsByTagName('div');
      for (var i=0;i<tmp.length;i++)
      {
      if(tmp[i].className == 'optfield')
       {
         tmp[i].style.display = (tmp[i].style.display == 'none') ? 'block' : 'none';
       }
     }
     return false;
    }
  }
}
//--------------------------------------------------------//

//--------------------------------------------------------//
// Handle hint tooltip boxes onmouseover
var offsetfromcursorX = 12;
var offsetfromcursorY = 10; 
var offsetdivfrompointerX = 10; 
var offsetdivfrompointerY = 14;

document.write('<div id="hinttooltip"></div>')
document.write('<img id="hintpointer" src="images/arrow_tooltip.gif">')

var ie = document.all;
var ns6 = document.getElementById && !document.all;
var enabletip=false;

if (ie||ns6)
  var tipobj=document.all? document.all["hinttooltip"] : document.getElementById? document.getElementById("hinttooltip") : "";
  var pointerobj=document.all? document.all["hintpointer"] : document.getElementById? document.getElementById("hintpointer") : "";

function ietruebody()
 {
   return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function showtooltip(thetext, thewidth, thecolor)
 {
    if (ns6||ie)
    {
       if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px";
       if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor;
       tipobj.innerHTML=thetext;
       enabletip=true;
       return false;
    }
}

function positiontip(e)
 {
    if (enabletip)
      {
         var nondefaultpos=false;
         var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
         var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;

         var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20;
         var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20;

         var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX;
         var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;

         var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000;

   if (rightedge<tipobj.offsetWidth)
       {
          tipobj.style.left=curX-tipobj.offsetWidth+"px";
          nondefaultpos=true;
      }
      else if (curX<leftedge)
          tipobj.style.left="5px";
     else
     {
          tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
          pointerobj.style.left=curX+offsetfromcursorX+"px";
}

if (bottomedge<tipobj.offsetHeight)
    {
       tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";
       nondefaultpos=true;
   }
   else
   {
       tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
       pointerobj.style.top=curY+offsetfromcursorY+"px";
}
tipobj.style.visibility="visible";
if (!nondefaultpos)
    pointerobj.style.visibility="visible";
else
    pointerobj.style.visibility="hidden";
 }
}
function hidetooltip()
  {
     if (ns6||ie)
         {
            enabletip=false;
            tipobj.style.visibility="hidden";
            pointerobj.style.visibility="hidden";
            tipobj.style.left="-1000px";
            tipobj.style.backgroundColor='';
            tipobj.style.width='';
  }
}
document.onmousemove=positiontip
//--------------------------------------------------------//