/* Set the height of the content container.
     There are three containers that make up the stained-parchment-like background:
     The top and bottom sections are each 292px high, so the overall size of the container is always at least 584px high.
     120px of that is top/bottom padding, so in the minimum case there is room for 464px of actual content.
     If that's not tall enough, then calculate what's needed and set the hight of the middle background container.
     1. Get the height of the left content (#ltCol)
     2. Get the height of the right content (#rtCol).
     3. Use whichever is larger.
     4. Extra space required is (height chosen in step3)-464px.
     5. If the amount determined in step 4 is > 0, then dynamically set the height of #paperBod.
  */
  function setContentHeight() { 
    var lch = $( "#mainContent" ).height();
    var rch = $( "#rtCol" ).height();
    var h = ( lch > rch ? lch : rch );
    h = h - 464;
    if ( h > 0 ) {
      $( "#paperBod" ).height( h );
      var elm = document.getElementById("sitemap");
      if (elm)
      {
        elm.style.display="none";
        var redrawFix = elm.offsetHeight;
        elm.style.display="block"; // or other value if required
      }

    }
  }
  
  /* iframe height adjuster
     Deal with the height of the iframe
     param str - something in the iframe that indicates the true height 
     needed - the body or the main div or something. */
  function adjustIframeHeight(){
	var f = $('iframe');
	if ( !f ) return;
	setHeight( f );
	f.load( adjustIframeHeight );
  }

  function setHeight( anIframe ) {
    var add;// amount to adjust the iframe height depends on the browser.
    var h = anIframe.height();
    var c = anIframe.contents().find("body");
    var ch = c.height();
    jQuery.each( jQuery.browser, function( i, val ) {
      //if Safari
      if ( i === "safari" && val === true ) {
	    add = 61;
	  } else if ( i === "msie" && val === true ) {
	    //alert( parseInt( jQuery.browser.version ) );
	    if ( parseInt( jQuery.browser.version ) === 8 ) {
	      add = 12;
	    } else if ( parseInt( jQuery.browser.version ) === 6 ) {
	      add = 67;
	    } else {
	      add = 12;
	    }
	  } else if ( i === "mozilla" && val === true ) {
	    add = 13;
	  }
    } );
    var h = ch + add;
    //alert( ch );
    anIframe.height( h );
  }
  /*end iframe height adjuster */

function doRadioBtnsAndLabels( aBtnClassName, aLabelClassName ) {
  $(aLabelClassName).hover( function() {
    $(this).css( {cursor:"pointer"} );
    }, function() { 
      $(this).css( {cursor:"default"} );
    } ).click( function() {
      // remove the radioSelected class from any radio buttons
      $( aLabelClassName).removeClass( "radioSelected" );
      $(this).addClass( "radioSelected" );
    } );
    $( aBtnClassName ).click( function() {
      // remove the radioSelected class from any radio buttons
      $( aLabelClassName ).removeClass( "radioSelected" );
      var f = $(this).attr( "id" );
      $( "label" ).each( function( item ) {
        var t = $(this);
        if ( t.attr( "for" ) === f ) {
          t.addClass( "radioSelected" );
        }
      } );
    } );
  }


jQuery.validator.addMethod("lettersandspacesonly", function(value, element) {
	return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Letters only please"); 
 var groupValidator = $("#focusgroup").validate( 
    {
    errorContainer: "#errorCopy, #errors",
    errorLabelContainer: "#errors ul",
    wrapper: "li",
    rules: {
      zipcode: {
        required: true,
        number: true 
      },
      emailAddress: {
        required : true, 
        email : true
        }
       },
    showErrors: function(errorMap,elementList) {
              if (elementList.length > 0 && elementList[0].message.length > 0)
                handleErrorMsg(elementList[0].message);
    },
    messages: {
      zipcode: "Please enter a valid US zipcode",
      emailAddress: "Enter an email address so we can contact you about joining Tween Labs. We will not share your email address with anyone else. The address you enter must look like: name@example.com."
    }
}

  );$(document).ready( function() {
  /* This little snippet stops the navigation tab images from flickering 
      in IE6. */
   try {
      document.execCommand("BackgroundImageCache", false, true);
   } catch( err ) { }
   /* end IE6 flicker fix */ 
  // client-side validation of the billing info form (billingInformation.jsp)
  var validator = $("#billingInfoForm").validate( 

    {
    errorContainer: "#errorCopy, #errors",
    errorLabelContainer: "#errors ul",
    wrapper: "li",
    rules: {
      firstName: {
        required: true,
        lettersandspacesonly: true 
      },
      lastName: {
        required : true,
        lettersandspacesonly: true
        },
      parentEmailInput: {
        required: true,
        email: true
      },
      billingEmailAddress: {
        required:true,
        email:true
      },
      emailAddress: {
        required:true,
        email:true
      },
      email: {
        email:true
      },
      phone: {
        required:true,
        phone:true
      },
      password: "required",
      username: "required",
      message: "required",
      state: "required",
      city: "required",
      address1: "required",
      postalCode: "required",
      country: "required"
    },
    showErrors: function(errorMap,elementList) {
              if (elementList.length > 0 && elementList[0].message.length > 0)
                handleErrorMsg(elementList[0].message);
    },
    messages: {
      firstName: 
       {
            required : "Enter a first name for the billing contact for this account.",
            lettersandspacesonly: "Please only use letters in your name." 
        },
      lastName: 
        { 
            required : "Enter a last name for the billing contact for this account.",
            lettersandspacesonly: "Please only use letters in your name." 
        },
      parentEmailInput: "Enter a parent's email address so we can contact you if there is a problem with your account, like you forgot your password. We will not share your email address with anyone else. The address you enter must look like: name@example.com.",
      billingEmailAddress: "Enter an email address so we can contact you if there is a problem with your billing. We will not share your email address with anyone else. The address you enter must look like: name@example.com.",
      emailAddress: "Enter an email address so we can contact you if necessary. We will not share your email address with anyone else. The address you enter must look like: name@example.com.",
      email: "Please check the email addres you supplied. The address you enter must look like: name@example.com.",
      phone: "Enter your phone number (including the area code) so that we can contact you if there is a problem with your account. We promise not to share your phone number with anyone else.",
      password: "Password", 
      username: "Character Name", 
      country: "Please enter your country.",
      state: "Please enter your state.",
      city: "Please enter your city.",
      address1: "Please enter your address.",
      postalCode: "Please enter your postal code.",
      message: "The message field is empty, but we're sure you want to tell us something..."
    }
  } );

  
  function waiting( ) {
    // reset the hight of the content container
    setContentHeight();
  }
  function polling() { 
    setTimeout( waiting, 250 ); 
  }
  /*  Setting my own additional listener on the "Continue" button as well as 
      onblur on input fields that have errors. I need a way to adjust the 
      height of the content container when error messages appear. There is no 
      easy way to do that since the jquery-validate handles all that. These 
      call a polling function, which will wait for 250ms before fixing the 
      container height - long enough for the Validator to finish displaying 
      errors.
  */
   $("#continueBtn").click( function() {
     polling();
   } );
   $("#saveBtn").click( function() {
     polling();
   } );
   $("input").blur( function() {
     polling();
   } );
    $("#submitBtn").click( function() {
     polling();
   } );
   
   $("#reset").click( function() {
      validator.resetForm();
      $(".radioLabel").removeClass( "radioSelected" );
      $(".radioLabelOneCol").removeClass( "radioSelected" );
   } );

  /* Set the height of the iframe
     Important! We need to call this function whenever there is a change to 
     the iframe. This could be due to two things, only one of which is 
     handled right now:
     1. an iframe is loaded into the page - handled.
     2. The iframe changes (error messages or a change to processing message)
     The important question is how to monitor the iframe for changes. One idea
     is to poll for the height of the iframe, and when it changes, call this adjuster 
     function. */
  
  /* Rollovers - handles rollovers for the main nav, the membership tokens, and the Play Now! button */
  $("area").mouseover( function() {
    var n = $( "#"+$( this ).attr( "class" ) );
    n.addClass( "on" );
  } ).mouseout( function() {
    var n = $( "#"+$( this ).attr( "class" ) );
    n.removeClass( "on" );
  } );
  
  // rollovers for FAQ list items
  function magicListItemRollover( elementCollection ) {
    elementCollection.each( function() {
      $(this).mouseover( function() {
        $(this).parent("li").addClass( "on" );
      } ).mouseout( function() {
        $(this).parent("li").removeClass( "on" );
      } );
    } );
  }
  magicListItemRollover( $("div.magicList ul li a") );
  magicListItemRollover( $("div.staticList ul li a") );
  
  $( "a img" ).hover( function() {
    $( this ).addClass( "on" );
  }, function() {
    $( this ).removeClass( "on" );
  } );
  /* END Rollovers */

  /* Show FAQ items. For now, sans CMS, all the FAQs are already in the page 
     with display:none set. This function shows an item onclick. */
  function faqClickHandler() {
    // relink any item that isn't linked and set the linked item's li to "off"
    var relinkMe = $("div.magicList ul li span");
    var cn = relinkMe.attr( "class" );
    if ( cn ) {
      cn = cn.split( " " );
      cn = cn[0];
    }
    var relinkMeParent = relinkMe.parent("li");
    relinkMe.replaceWith("<a class=\"" + cn + "\" href=\"#magicItems\">" + relinkMe.text() + "</a>" );
    // get the new <a> element
    relinkMe = $( "." + cn );
    // reset mouseover/out listeners
    magicListItemRollover( relinkMe );
    // reset click handler
    relinkMe.click( faqClickHandler );
    relinkMeParent.removeClass( "on" );
    // set the list item to "on"
    $(this).parent("li").addClass( "on" );
    // unlink this item by removing the <a> and adding a <span>
    // retain the class
    $(this).replaceWith( "<span class=\"" + this.className + " on\">" + $(this).text() + "</span>" );
    // hide any questions that are currently visible
    $("#magicItems div").each( function( item ) {
      if ( $(this).css( "display" ) === "block" ) {
        $(this).css( "display", "none" );
      }
   } );
    // make the correct div show up
    $("#" + this.className).css( "display", "block" );
    // adjust the parchment height
    setContentHeight();
  }
  $("div.magicList ul li a").click( faqClickHandler );
  
  // Set the height of the content container.
  setContentHeight();

  // Listen to radio button and change the label styles
  doRadioBtnsAndLabels( ".radio", ".radioLabel" );
  doRadioBtnsAndLabels( ".radioOneCol", ".radioLabelOneCol" );
} );
function handleErrorMsg(errMsg)
{
    if (errMsg == null || errMsg.length == 0)
        return;
    var err = document.getElementById("errorCopy");
    if (err)
        err.style.display = "block";
    err = document.getElementById("errors");
    if (err)
    {
        err.style.display = "block";
        err = $("#errors ul");
        if (err)
            err.html("<li>" + errMsg +"</li>") ;
    }
        

}


function contactSS()
{
    window.open("mailto:support@supersecret.com" );
}