YAHOO.example.DynamicData = function() {
	var dateDropDown = document.getElementById("dateDropDown");
	var stateDropDown = document.getElementById("stateDropDown");
	var submitSearch = document.getElementById("submitSearch");

	var tQueryString;

	var defaultSort = "race_date";
	var defaultSortDir = YAHOO.widget.DataTable.CLASS_ASC;		
    
	this.raceNameFormatter = function(elCell, oRecord, oColumn, oData) {
		elCell.innerHTML = "<a href=\"" + oRecord.getData("race_site") + "\" target=\"_blank\" rel=\"nofollow\" title=\"Visit Official Race Site!\">" + oData + "</a><br/><strong>Distance:</strong> " + oRecord.getData("race_distance");	
    };
    
    this.submitQuery = function() {
		myDataTable.unsubscribe("initEvent", submitQuery);
		var queryString = "startIndex=0&results=25&month=" + dateDropDown.value + "&state=" + stateDropDown.value;    	
    	mySendRequest(queryString);
    	
    	//alert("here");
    };
    
    // Add the custom formatter to the shortcuts
    YAHOO.widget.DataTable.Formatter.raceNameFormatter = this.raceNameFormatter;    
    
    // Column definitions
    var myColumnDefs = [ // sortable:true enables sorting
        {key:"race_name", label:"Race", width:400, sortable:true, className:"cell-left", formatter:"raceNameFormatter"},
        {key:"race_date", label:"Date", width:80, sortable:true, sortOptions: {defaultDir:defaultSortDir}, className:"cell-center"},
        {key:"race_city", label:"City", width:130, sortable:true, className:"cell-left"},
        {key:"race_state", label:"State", width:70, sortable:true, className:"cell-center"}
    ];
    
    // DataSource instance
    var myDataSource = new YAHOO.util.DataSource("/find-a-triathlon/raceDataProvider.cfm?");
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    myDataSource.responseSchema = {
        resultsList: "races",
        fields: [
            {key:"race_id",parser:"number"},
            {key:"race_name"},
            {key:"race_site"},
            {key:"race_date"},
            {key:"race_day"},
            {key:"race_city"},
            {key:"race_state"},
            {key:"race_distance"},
            {key:"race_type"}
        ],
        metaFields: {
            totalRecords: "totalRecords" // Access to value in the server response
        }
    };
    
	var myPaginator = new YAHOO.widget.Paginator({   
	    containers         : ['paging'],   
	    pageLinks          : 5,   
	    rowsPerPage        : 25,   
	    template           : "{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}",
	    pageReportTemplate : "<span class='page-report-text'>Page&nbsp;&nbsp;{currentPage}&nbsp;&nbsp;of&nbsp;&nbsp;{totalPages}</span>",
	    nextPageLinkLabel : "<img src='/assets/images/paging_arrow_next.png' />",   
	    previousPageLinkLabel : "<img src='/assets/images/paging_arrow_previous.png' />",
	    lastPageLinkLabel : "<img src='/assets/images/paging_arrow_last.png' />",
	    firstPageLinkLabel : "<img src='/assets/images/paging_arrow_first.png' />",
	    alwaysVisible : false
	}); 
	
	var myRequestBuilder = function(oState, oSelf) {
	    // Get states or use defaults
	    oState = oState || {pagination:null, sortedBy:null};
	    var sort = (oState.sortedBy) ? oState.sortedBy.key : defaultSort;
	    var dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "desc" : "asc";
	    var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
	    var results = (oState.pagination) ? oState.pagination.rowsPerPage : null;
	    var qsObj = parseQueryString(tQueryString);
	    
	    // Build custom request
	    return  "sort=" + sort +
	            "&dir=" + dir +
	            "&startIndex=" + startIndex +
	            ((results !== null) ? "&results=" + results : "") +
	            ((qsObj.state !== undefined && qsObj.state != "") ? "&state=" + qsObj.state : "") + 
	            ((qsObj.month !== undefined && qsObj.month != "") ? "&month=" + qsObj.month : "");
	};	
	
    // DataTable configuration
    var myConfigs = {
        initialRequest: "startIndex=0&results=25&state=" + stateDropDown.value + "&month=" + dateDropDown.value, //&searchColumn=&query= 
        dynamicData: true, // Enables dynamic server-driven data
        sortedBy : {key:defaultSort, dir:defaultSortDir}, // Sets UI initial sort arrow
        paginator: myPaginator, // Enables pagination
        generateRequest : myRequestBuilder
    };
    
    // DataTable instance
    var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs);
    
    // Update totalRecords on the fly with value from server
	myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
		tQueryString = oRequest;

		if(oPayload) {
		   oPayload.totalRecords = oResponse.meta.totalRecords;
		}
		
		return oPayload;
		
	}
    
	function populateDateDropDown() {
		var today = new Date();
		var month=new Array(12);
		month[0]="January";
		month[1]="February";
		month[2]="March";
		month[3]="April";
		month[4]="May";
		month[5]="June";
		month[6]="July";
		month[7]="August";
		month[8]="September";
		month[9]="October";
		month[10]="November";
		month[11]="December";			
		
		var currentMonth = today.getMonth();
		var currentYear = today.getFullYear();
		
		while(currentMonth!=12) {			
			var y=document.createElement("option");
			y.text = month[currentMonth];
			y.value = currentMonth+1;
			
			addDropDownOption(y, dateDropDown);
			
			currentMonth++;
		}
		
	}
	
	function populateStateDropDown() {
		
		var State = new Array();
		var Code = new Array();
		
		State[0] = "Alabama";         Code[0] = "AL";
		State[1] = "Alaska";          Code[1] = "AK";
		State[2] = "Arizona";         Code[2] = "AZ";
		State[3] = "Arkansas";        Code[3] = "AR";
		State[4] = "California";      Code[4] = "CA";
		State[5] = "Colorado";        Code[5] = "CO";
		State[6] = "Connecticut";     Code[6] = "CT";
		State[7] = "Delaware";        Code[7] = "DE";
		State[8] = "Florida";         Code[8] = "FL";
		State[9] = "Georgia";         Code[9] = "GA";
		State[10] = "Hawaii";         Code[10] = "HI";
		State[11] = "Idaho";          Code[11] = "ID";
		State[12] = "Illinois";       Code[12] = "IL";
		State[13] = "Indiana";        Code[13] = "IN";
		State[14] = "Iowa";           Code[14] = "IA";
		State[15] = "Kansas";         Code[15] = "KS";
		State[16] = "Kentucky";       Code[16] = "KY";
		State[17] = "Louisiana";      Code[17] = "LA";
		State[18] = "Maine";          Code[18] = "ME";
		State[19] = "Maryland";       Code[19] = "MD";
		State[20] = "Massachusetts";  Code[20] = "MA";
		State[21] = "Michigan";       Code[21] = "MI";
		State[22] = "Minnesota";      Code[22] = "MN";
		State[23] = "Mississippi";    Code[23] = "MS";
		State[24] = "Missouri";       Code[24] = "MO";
		State[25] = "Montana";        Code[25] = "MT";
		State[26] = "Nebraska";       Code[26] = "NE";
		State[27] = "Nevada";         Code[27] = "NV";
		State[28] = "New Hampshire";  Code[28] = "NH";
		State[29] = "New Jersey";     Code[29] = "NJ";
		State[30] = "New Mexico";     Code[30] = "NM";
		State[31] = "New York";       Code[31] = "NY";
		State[32] = "North Carolina"; Code[32] = "NC";
		State[33] = "North Dakota";   Code[33] = "ND";
		State[34] = "Ohio";           Code[34] = "OH";
		State[35] = "Oklahoma";       Code[35] = "OK";
		State[36] = "Oregon";         Code[36] = "OR";
		State[37] = "Pennsylvania";   Code[37] = "PA";
		State[38] = "Rhode Island";   Code[38] = "RI";
		State[39] = "South Carolina"; Code[39] = "SC";
		State[40] = "South Dakota";   Code[40] = "SD";
		State[41] = "Tennessee";      Code[41] = "TN";
		State[42] = "Texas";          Code[42] = "TX";
		State[43] = "Utah";           Code[43] = "UT";
		State[44] = "Vermont";        Code[44] = "VT";
		State[45] = "Virginia";       Code[45] = "VA";
		State[46] = "Washington";     Code[46] = "WA";
		State[47] = "West Virginia";  Code[47] = "WV";
		State[48] = "Wisconsin";      Code[48] = "WI";
		State[49] = "Wyoming";        Code[49] = "WY";
		
		for(var i = 0; i < State.length; i++) {
			var y=document.createElement("option");
			y.text = State[i];
			y.value = State[i];			
			
			addDropDownOption(y, stateDropDown);
		}
	}		
    
    function mySendRequest(queryString) {
         var oState = myDataTable.getState();
         
         // Reset record offset, if paginated
         if(oState.pagination) {
             oState.pagination.recordOffset = 0;
         }
         
         // Update sortedBy to new values
         oState.sortedBy = {
             key: "race_date",
             dir: YAHOO.widget.DataTable.CLASS_DESC
         };    	
    	
         var callback = {
             success : myDataTable.onDataReturnInitializeTable,
             failure : myDataTable.onDataReturnInitializeTable,
             argument : oState, // Pass along the new state to the callback
             scope : myDataTable
         };  	
    	
    	myDataSource.sendRequest(queryString , callback);    
    }
    
    submitSearch.onclick = function() {
		var queryString = "sort=" + defaultSort + "&startIndex=0&results=25&month=" + dateDropDown.value + "&state=" + stateDropDown.value;
		mySendRequest(queryString);		
    }
    
  	populateDateDropDown();
  	populateStateDropDown();
  	
  	function parseQueryString(qs) {
		var myQs = new Object;
		
		var parms = qs.split('&');
		
		for (var i=0; i<parms.length; i++) {
			var pos = parms[i].indexOf('=');
			if (pos > 0) {
				eval("myQs['" + parms[i].substring(0,pos) + "'] = '" + parms[i].substring(pos+1) + "'");
			}
		}
		
		return myQs;
		
	}
	
	function addDropDownOption(opt, dropDown) {
		try {
		  dropDown.add(opt,null); // standards compliant
		} catch(ex) {
			dropDown.add(opt); // IE only
		}		
	}
    
    
    //helper function, prints properties of object passed in
    function printProps(obj) {
		var str = "";
		for(prop in obj)
		{
		str+=prop + " value :"+ obj[prop]+"\n";//Concate prop and its value from object
		}
		alert(str); //Show all properties and its value
	}
	
 	
    return {
        ds: myDataSource,
        dt: myDataTable,
        ha: this
    };
    
}();