// JavaScript Document

// One dataset to rule them all!!
var dsJobs= new Spry.Data.XMLDataSet('com/remotejobs.cfc?method=getjobs',"/jobs/job", {useCache:false});

// Since this JavaScript file can load before the browser has even read in and created the actual
// DOM elements we want to attach attributes to, we need to add a load listener that will set the
// attributes on the appropriate elements after the onload event fires.



/* -----------------------------------------------------------getURL()------------------------------------------------------------------*/

// getURL() is a setup function that defines the criteria of the query being passed to ds.loadData() to reload the dataset.

// This function takes two arguments, jobcategory and jobtype, both of which are required.  

// In short, two arrays are setup with values of the query options.  The arguments that are passed in are matched up, and their array values are
// appended to the query string returned to ds.loadData().  If either argument equals '0', the arguments are *NOT* appended to the query string, as
// they represent the "ALL" criterion which is equivalent to returning an unfiltered dataset.

function getURL(jobcategory,jobtype) {
	// Setup array of values for job categories
	var category= new Array(7)
		category[0]="";
		category[1]="Web Designer";
		category[2]="Web Developer";
		category[3]="Web Marketing";
		category[4]="Project Manager";
		category[5]="Technical";
		category[6]="Other";
	
	// Setup array of values for job types
	var job 	= new Array(4)
		job[0] = "";
		job[1] = 'Full-Time';
		job[2] = 'Part-Time';
		job[3] = 'Freelance';
	
	// Set default query string without arguments
	var url = 'com/remotejobs.cfc?method=getjobs';
	// Append arguments, if present
	if(jobcategory != 0) {
		url += '&category=' + category[jobcategory];	
	}
	if(jobtype != 0) {
		url += '&jobtype=' + job[jobtype];;
	}
	return url;
}

function getSearchURL(jobcategory,location) {
	// Set default query string without arguments
	var url = 'com/remotejobs.cfc?method=getjobs';
	if(jobcategory != '') {
		url += '&position=' + jobcategory;	
	}
	if(location != '') {
		url += '&location=' + location;;
	}
	return url;
}

function getSearchCategory() {
	return Spry.$('positionTitle').value;	
}
function getSearchLocation() {
	return Spry.$('location').value;	
}
/* -----------------------------------------------------------getJobType()------------------------------------------------------------------*/

// getJobType() is a function that loops through "Job Type" navigational structure to determine which tab is currently active.  When it determines
// this, the function returns either the object id of the html element to which the class is applied, or it returns the index of the html element
// in relation to the others.

// getJobType() takes one argument, 'type' which tells the function whether it needs to return an id (0) or an index value (1).

function getJobType(type) {
	var nav = Spry.$('nav');
	// Get collection of child list-items for 'nav' div
	var navList = nav.getElementsByTagName('li');
	// Loop over collection, looking for elements that have a class of "current"
	for(i=0;i<navList.length;i++) {
		if(navList[i].className=='current') {
			var jobType = new Array(2)
				jobType[0] = navList[i].id;	
				jobType[1] = [i];	
		}
	}
	if(type==0) {
		return jobType[0];
	}
	if(type==1) {
		return jobType[1];
	}
}

/* -----------------------------------------------------------getJobCategory()------------------------------------------------------------------*/

// getJobCategory() is a function that loops through "Job Category" navigational structure to determine which tab is currently active.  When it 	
//	determines this, the function returns either the object id of the html element to which the class is applied, or it returns the index of the html 
//	element in relation to the others.

// getJobCategory() takes one argument, 'type' which tells the function whether it needs to return an id (0) or an index value (1).

function getJobCategory(type) {
	var ul = Spry.$('TabbedPanels1');
	// Get collection of child list-items for 'TabbedPanels1' div
	var ulList = ul.getElementsByTagName('li');
	for(i=0;i<ulList.length;i++) {
		// Loop over collection, looking for elements that have a class of "TabbedPanelsTab TabbedPanelsTabSelected"
		if(ulList[i].className=='TabbedPanelsTab TabbedPanelsTabSelected') {
			var jobCategory = new Array(2)
				jobCategory[0] = ulList[i].id;	
				jobCategory[1] = [i];
		}
	}
	if(type==0) {
		return jobCategory[0];
	}
	if(type==1) {
		return jobCategory[1];
	}
}

/* -----------------------------------------------------------setCurrentTabs()------------------------------------------------------------------*/

// setCurrentTabs() handles onclick events for tabbed elements, applying and removing classes as necessary to reflect user interaction.

// setCurrentTabs() takes two arguments, 'tab' and 'tab2'.  These values help determine:
//		* Current state of selected tabs
//      * ID of tab which has been selected
//      * ID's of tabs which need to have class modifications

function setCurrentTabs(tab,tab2) {
	var ul = Spry.$('TabbedPanels1');
	// Get collection of child list-items for 'TabbedPanels1' div
	var ulList = ul.getElementsByTagName('li');
	for(i=0;i<ulList.length;i++) {
		// If current item has this class *AND* its ID is not equal to the passed 'tab' argument, remove the "current" state class from it
		if(ulList[i].className=='TabbedPanelsTab TabbedPanelsTabSelected' && ulList[i].id != tab) {
			var myID = '#' + ulList[i].id;
			Spry.$$(myID).removeClassName('TabbedPanelsTabSelected');
		}
	}
	// Add "current" class to element whose id is eqivalent to that of the passed argument 'tab'
	Spry.$$(tab).addClassName('TabbedPanelsTabSelected');
	
	var nav = Spry.$('nav');
	// Get collection of child list-items for 'nav' div
	var navList = nav.getElementsByTagName('li');
	for(i=0;i<navList.length;i++) {
		// If current item has this class *AND* its ID is not equal to the passed 'tab2' argument, remove the "current" state class from it
		if(navList[i].className=="current" && navList[i].id != tab2) {
			var myID2 = '#' + navList[i].id;
			Spry.$$(myID2).removeClassName('current');
		}
	}
	// Add "current" class to element whose id is eqivalent to that of the passed argument 'tab2'
	Spry.$$(tab2).addClassName('current');
}

Spry.Utils.addLoadListener(function()
{



// Attach the spry namespaced attributes unobtrusively.
	
// Below, event listeners are being added to elements unobtrusively to allow spry data to validate against W3C specifications

	Spry.Utils.addEventListener("filter-b1", "click", function(){
			setCurrentTabs('#filter-b1',getJobType(0));
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-b2", "click", function(){
			setCurrentTabs('#filter-b2',getJobType(0));
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-b3", "click", function(){
			setCurrentTabs('#filter-b3',getJobType(0));
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-b4", "click", function(){
			setCurrentTabs('#filter-b4',getJobType(0));
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-b5", "click", function(){
			setCurrentTabs('#filter-b5',getJobType(0));
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-b6", "click", function(){
			setCurrentTabs('#filter-b6',getJobType(0));
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-b7", "click", function(){
			setCurrentTabs('#filter-b7',getJobType(0));
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	
	
	Spry.Utils.addEventListener("filter-a1", "click", function(){
			setCurrentTabs(getJobCategory(0),'#filter-a1');
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-a2", "click", function(){
			setCurrentTabs(getJobCategory(0),'#filter-a2');
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-a3", "click", function(){
			setCurrentTabs(getJobCategory(0),'#filter-a3');
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	Spry.Utils.addEventListener("filter-a4", "click", function(){
			setCurrentTabs(getJobCategory(0),'#filter-a4');
			dsJobs.setURL(getURL(getJobCategory(1),getJobType(1)));
			dsJobs.loadData();}, false);
	
	
	Spry.Utils.addEventListener("filter-search", "click", function() {
			setCurrentTabs('#filter-b1','#filter-a1');
			dsJobs.setURL(getSearchURL(getSearchCategory(),getSearchLocation()));
			dsJobs.loadData();}, false);
	
// Tell Spry to process regions within the document.
	Spry.$('dataHolder').setAttribute("spry:region", "dsJobs");
	Spry.$$('div#dataHolder table').setAttribute("spry:repeat", "dsJobs");
	Spry.$$("div#dataHolder .loading").setAttribute("spry:state", "loading");
	Spry.$$("div#choose").setAttribute("spry:choose","spry:choose");
	Spry.$$("div#when").setAttribute("spry:when","'{@jobID}' != ''");
	Spry.$$("div#default").setAttribute("spry:default","spry:default");
	Spry.$$("div#dataHolder .error").setAttribute("spry:state", "error");
	Spry.$$("div#dataHolder .ready").setAttribute("spry:state", "ready");
	
	Spry.Data.initRegions();
});