function showMessageDetails(e, details, divId){
           
    var posx = 0;
    var posy = 0;
    e = (window.event) ? window.event : e;
    posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
            
    var finalString = "<br /><div onclick=\"HideDetails('" + divId + "')\" onmouseover=\"this.style.cursor='pointer';\" style=\"color: blue; width: 100%; text-align: right;\">Close&nbsp;&nbsp;&nbsp;</div><br />";
         
    document.getElementById(divId).innerHTML = details + finalString;
    document.getElementById(divId).style.visibility="visible";
    document.getElementById(divId).style.top=posy + "px";
    document.getElementById(divId).style.left=posx + "px";
}
        
function HideDetails(divId) {
    document.getElementById(divId).innerHTML = "";            
    document.getElementById(divId).style.visibility = "hidden";        
}

var usernameCheckerTimer;


function fieldChecker(e, valueToCheck, control, methodName) 
{
    if (e == null)
    {
    e = event;
    }
    
    if (e.type=="keyup")
    {
        if ((e.keyCode == 9)|| (e.keyCode == 16))
        {return;}
    }
    
    clearTimeout(usernameCheckerTimer);
    if (valueToCheck.length == 0)
        control[0].innerHTML = "";
    else
    {
        control[0].innerHTML = "<span style='color: #ccc;'>checking...</span>";
        usernameCheckerTimer = setTimeout(methodName + "('" + valueToCheck + "');", 500);
    }
}

function checkUsernameUsage(username) 
{
    var spnLoginAvailability = $("#spanLoginAvailability")[0];
    // initiate the ajax pagemethod call
    // upon completion, the OnSucceded callback will be executed
    PageMethods.IsUserAvailable(username, OnSucceeded, OnError, spnLoginAvailability);
}

function checkEmailUsage(email) 
{
    var spnEmailAvailability = $("#spanEmailAvailability")[0];
    var emailPattern = /^[-'+.\w]{1,64}@[-.\w]{1,64}\.[-.\w]{2,6}$/;
    if (emailPattern.test(email))
    {
    
        // initiate the ajax pagemethod call
        // upon completion, the OnSucceded callback will be executed
        PageMethods.IsEmailAvailable(email, OnSucceeded, OnError, spnEmailAvailability);
    }
    else
    {
       spnEmailAvailability.innerHTML = "<span class='unavailable'>Invalid email address</span>";
    }
}

// Callback function invoked on successful completion of the page method.
function OnSucceeded(result, userContext, methodName) 
{
        if (result == "Available")
            userContext.innerHTML = "<span class='available'>Available</span>";
        else
            userContext.innerHTML = "<span class='unavailable'>"+result+"</span>";  
}

// Callback function invoked on successful completion of the page method.
function OnError(result, userContext, methodName) 
{
      userContext.innerHTML = "<span class='unavailable'>Validation failed</span>";
}

function next() {
       var eDiv1 = document.getElementById("Introduction030210div1");
       var eDiv2 = document.getElementById("Introduction030210div2");
       var eDiv3 = document.getElementById("Introduction030210div3");
       var eDiv4 = document.getElementById("Introduction030210div4");
       var eDiv5 = document.getElementById("Introduction030210div5");
       var eDiv6 = document.getElementById("Introduction030210div6");
       var eDiv7 = document.getElementById("Introduction030210div7");
       var ea1 = document.getElementById("Introduction030210a1");
       var ea2 = document.getElementById("Introduction030210a2");
       if(eDiv1.style.display == 'block') {
            eDiv1.style.display = 'none';
            eDiv2.style.display = 'block';
            ea1.style.visibility='visible';
       } else {
            if (eDiv2.style.display == 'block') {
              eDiv2.style.display = 'none';
              eDiv3.style.display = 'block';
            } else {
              if (eDiv3.style.display == 'block') {
                eDiv3.style.display = 'none';
                eDiv4.style.display = 'block';
              } else {
                 if (eDiv4.style.display == 'block') {
                  eDiv4.style.display = 'none';
                  eDiv5.style.display = 'block';
                } else {
                  if (eDiv5.style.display == 'block') {
                    eDiv5.style.display = 'none';
                    eDiv6.style.display = 'block'; 
                  } else {
                    if (eDiv6.style.display == 'block') {
                      eDiv6.style.display = 'none';
                      eDiv7.style.display = 'block';
                      ea2.style.visibility='hidden';
                    } else {
                      eDiv7.style.display = 'none';
                      eDiv1.style.display = 'block';
                    }
                  }
                }
              }
            }
          }
}
    
 function back() {
       var eDiv1 = document.getElementById("Introduction030210div1");
       var eDiv2 = document.getElementById("Introduction030210div2");
       var eDiv3 = document.getElementById("Introduction030210div3");
       var eDiv4 = document.getElementById("Introduction030210div4");
       var eDiv5 = document.getElementById("Introduction030210div5");
       var eDiv6 = document.getElementById("Introduction030210div6");
       var eDiv7 = document.getElementById("Introduction030210div7");
       var ea1 = document.getElementById("Introduction030210a1");
       var ea2 = document.getElementById("Introduction030210a2");
       if(eDiv1.style.display == 'block') {
            eDiv1.style.display = 'none';
            eDiv7.style.display = 'block';
       } else {
            if (eDiv2.style.display == 'block') {
              eDiv2.style.display = 'none';
              eDiv1.style.display = 'block';
              ea1.style.visibility='hidden';
            } else {
              if (eDiv3.style.display == 'block') {
                eDiv3.style.display = 'none';
                eDiv2.style.display = 'block';
              } else {
                 if (eDiv4.style.display == 'block') {
                  eDiv4.style.display = 'none';
                  eDiv3.style.display = 'block';
                } else {
                  if (eDiv5.style.display == 'block') {
                    eDiv5.style.display = 'none';
                    eDiv4.style.display = 'block';
                  } else {
                    if (eDiv6.style.display == 'block') {
                      eDiv6.style.display = 'none';
                      eDiv5.style.display = 'block';
                    } else {
                      eDiv7.style.display = 'none';
                      eDiv6.style.display = 'block';
                      ea2.style.visibility='visible';
                    }
                  }
                }
              }
       }       
      }
}