// when the DOM is ready...
var isFormValid = true;

$(document).ready(function () {

var $panels = $('#slider .scrollContainer > form > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
  
  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll
  .before('<img id="prevBtn" class="scrollButtons left hideIt" src="/wp-content/themes/teachers/images/btnPreviousStep.png" />')
  .after('<img class="scrollButtons right" src="/wp-content/themes/teachers/images/btnNextStep.png" />');

// handle nav selection
function selectNav() {
if (isFormValid) {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected')
    .fadeTo("fast", 1.0);
		}
}

// $('#slider .sliderNav').find('a').fadeTo("fast", 0.5).click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  document.getElementById('currentPage').value = data.id;

	if (data.id === '' || data.id === 'user-info') {
		document.getElementById('prevBtn').className = "scrollButtons left hideIt";
	} else {
		document.getElementById('prevBtn').className = "scrollButtons left";
	}

  var el = $('#slider .sliderNav').find('a[href$="' + data.id + '"]').get(0);
	selectNav.call(el);
}

function validatePage(e, panel, target, items, pos) {
	
	var isValid = true;
	var page = document.getElementById('currentPage').value;
	
	if (page === '' || page === 'user-info' && pos > 0) {

		var fn = document.getElementById('first_name').value;
		//added last name validation 2/26/2010
		var ln = document.getElementById('last_name') != null ? document.getElementById('last_name').value : 'x';
		var em = document.getElementById('email').value;
		var cem = document.getElementById('confirm_email').value;
		var st = document.getElementById('street') != null ? document.getElementById('street').value : 'x';
		var c = document.getElementById('city') != null ? document.getElementById('city').value : 'x';
		var s = document.getElementById('state') != null ? document.getElementById('state').value : 'x';

		isValid = (! (fn==='' || ln==='' || em==='' || cem==='' || c==='' || s==='XX' || st ===''));

		document.getElementById('first_name_l').style.color = (fn==='') ? 'red' : '';
		//added last name validation 2/26/2010
		if (document.getElementById('last_name_l') != null) {
			document.getElementById('last_name_l').style.color = (ln==='') ? 'red' : '';					
		}
		document.getElementById('email_l').style.color = (em==='') ? 'red' : '';
		document.getElementById('confirm_email_l').style.color = (cem==='') ? 'red' : '';
		document.getElementById('state_l').style.color = (s==='XX') ? 'red' : '';

		if (document.getElementById('city_l') != null) {
			document.getElementById('city_l').style.color = (c==='') ? 'red' : '';
			document.getElementById('streetAddress').style.color = (st==='') ? 'red' : '';
		}

		isValid = isValid && (em===cem);

		if (!(em===cem)) {
			document.getElementById('email_l').style.color = 'red';
			document.getElementById('confirm_email_l').style.color = 'red';
		}

	} else if (page === 'activity-info' && pos > 1) {

		var t = document.getElementById('post_title').value;
		var d = document.getElementById('post_content').value;
		var sub = (document.getElementById('art').checked || 
			document.getElementById('history').checked ||
			document.getElementById('readingWriting').checked ||
			document.getElementById('math').checked ||
			document.getElementById('music').checked ||
			document.getElementById('science').checked ||
			document.getElementById('specialEd').checked ||
			document.getElementById('clmgmt').checked ||
			document.getElementById('languageArts').checked);
		var grd = (document.getElementById('k').checked ||
			document.getElementById('frst').checked ||
			document.getElementById('scnd').checked ||
			document.getElementById('thrd').checked ||
			document.getElementById('frth').checked ||
			document.getElementById('ffth').checked ||
			document.getElementById('sxth').checked ||
			document.getElementById('svnth').checked ||
			document.getElementById('esl').checked ||
			document.getElementById('egth').checked);

		var piprd = (document.getElementById('pim_a').value === '' &&
			document.getElementById('pim_b').value === '' &&
			document.getElementById('pim_c').value === '' &&
			document.getElementById('pim_d').value === '' &&
			document.getElementById('pim_e').value === '' &&
			document.getElementById('pim_f').value === '');

		isValid = (! (t==='' || d === '' || !sub || !grd || piprd));

		document.getElementById('post_title_l').style.color = (t==='') ? 'red' : '';
		document.getElementById('description_l').style.color = (d==='') ? 'red' : '';
		document.getElementById('subject_l').style.color = (!sub) ? 'red' : '';
		document.getElementById('grade_l').style.color = (!grd) ? 'red' : '';
		document.getElementById('postItMaterials_l').style.color = (piprd) ? 'red' : '';

	} else if (page === 'directions' && pos > 2) {
		var dir = document.getElementById('directions1').value;
		isValid = (! (dir===''));
		document.getElementById('directions_l').style.color = (dir==='') ? 'red' : '';
	} else if (page === 'submit') {
		isValid = true;
	}

	isFormValid = isValid;
	
	return isValid;
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.sliderNav a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow
  
  // can be a selector which will be relative to the target
  items: $panels,
  
  navigation: '.sliderNav a',
  
  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left', 
  next: 'img.right',
  
  // allow the scroll effect to run both directions
  axis: 'xy',
  
  onBefore : validatePage, // or beginning callback
  
  onAfter: trigger, // our final callback
  
  offset: offset,
  
  // duration of the sliding effect
  duration: 500,
  
  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
// $.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});