/* Data Set & Custom Fade Effect */
//
// STEP 1: Create a data set.
//
var dsWork = new Spry.Data.XMLDataSet("data/web.xml", "work/project", { entityEncodeStrings: -1 });
Spry.Data.Region.addObserver('viewFlowPanels', {onPostUpdate:function(){sp = new Spry.Widget.SlidingPanels("viewFlowPanels");}});
//
// STEP 2: Define some global variables that will help us deal with the case
//         where the user may rapidly click on items in the master region. We
//         want our effect transitions to be as smooth as possible.
//
var gEffectInProgress = null;
var gPendingSetRowIDRequest = -1;
//
// STEP 3: Define a function observer that will fade-in the detail content
//         whenever the content in the region is re-generated and inserted into the
//         document.
//
//         Note that there is a CSS rule, defined in the style block above, for #description
//         that gives it an opacity of zero, which basically means that when the page
//         is first loaded, the detail region is completely invisible/see-thru. This
//         prevents an initial flash from occuring in some browsers if the content is
//         rendered to the screen before the fade-in effect kicks in.
//
function fadeInContent(notificationType, notifier, data)
{
	if (notificationType != "onPostUpdate")
		return;
	var effect = new Spry.Effect.Fade('viewFlowDetailsContent', { to: 100, from: 0, duration: 500, finish: function() {
		// The region is now showing. Process any pending row change request.
		gEffectInProgress = null;
		if (gPendingSetRowIDRequest >= 0)
		{
			var id = gPendingSetRowIDRequest;
			gPendingSetRowIDRequest = -1;
			fadeOutContentThenSetRow(id);
		}
	}});
	effect.start();
}
//
// STEP 4: Register the function as an observer on the detail region.
//
Spry.Data.Region.addObserver('viewFlowDetailsContent', fadeInContent);
//
// STEP 5: Define a function which will be used to fade-out the detail region. This
//         same function will define a custom finish function, which will be called by
//         the fade-out effect when it is finished, to trigger a call to setCurrentRow().
//         This custom finish function is registered with the effect by passing it as an
//         option to the effect constructor.
//
function fadeOutContentThenSetRow(rowID)
{
	// If we have an effect already in progress, don't do anything
	// We'll set the rowID when we're done.

	if (gEffectInProgress)
	{
		gPendingSetRowIDRequest = rowID;
		return;
	}

	// If the correct row is already showing, don't do anything!

	if (rowID == dsWork.getCurrentRowID())
		return;

	gEffectInProgress = new Spry.Effect.Fade('viewFlowDetailsContent', { to: 0, from: 100, duration: 500, finish: function() {
		dsWork.setCurrentRow(rowID);
	}});
	gEffectInProgress.start();
}


/* Tab Select Function */
function highlightTab(val) {
	//Clear any highlighted tabs. This will clear up to 5 tabs. If you have more you will need
	//to increase the "5" below with the number of tabs you have.
	for(i = 0; i < 5; i++) { 
		if(document.getElementById('tab' + i))
		document.getElementById('tab' + i).className = 'unselected';
	}
	
	//Highlight the appropriate tab
	document.getElementById('tab' + val).className = 'selected';
}


/* Highslide */ 
hs.registerOverlay(
	{
		thumbnailId: null,
		overlayId: 'controlbar',
		position: 'top right',
		hideOnMouseOut: true
	}
);

hs.graphicsDir = 'images/highslide/';
hs.outlineType = 'rounded-white';


/* jQuery */
$(document).ready(function() {
	$('#mainNavAbout').click(function() {
		$('#contentAboutContainer').fadeIn('normal');
	});
	
	$('#aboutClose').click(function() {
		$('#contentAboutContainer').fadeOut('normal');
	});
	
	$('#mainNavContact').click(function() {
		$('#contentContactContainer').fadeIn('normal');
	});
	
	$('#contactClose').click(function() {
		$('#contentContactContainer').fadeOut('normal');
		$('#contactForm').resetForm();
		$('.alertText').hide();
	});
	
	$('#contactForm').validate({
		rules: {
			Name: 'required',
			Email: {
				required: true, 
				email: true
			},
			Phone: 'required'
		},
		errorPlacement: function(label, element) {
			label.insertBefore( element.prev() );
		}
		/*
		messages: {
			Name: 'Please enter your NAME.',
			Email: 'Please enter your EMAIL.',
			Phone: 'Please enter your PHONE.'
		}
		*/
	});
	
	$('#contactForm').ajaxForm({
		target: '.alertText',
		beforeSubmit:  function() {
			//$('#loader').show();
			$('button.submit').attr('disabled', 'disabled');
		},
		success: function() {
			//$('#loader').hide();
			$('.alertText').fadeIn('normal');
			$('button.submit').removeAttr('disabled');
		}
	});
});