jQuery(document).ready(function(){
  DTV.init()
});

function meldingAgendaLoad(div, message) {
  jQuery(div).html(message);
}

var DTV = {
  apiUri : "/myblos-rest/eva/roster/40de779f-5239-4e65-948c-91fb0bea4da5.json",
  apiDomain : "http://www.werkenaanmijnonderneming.nl",
  container : "#agendaBlock",
  rosterItems : undefined,
  enrollUri : undefined,
  weekDays : ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
  months : ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],

  init : function() {
    var data;
    DTV.initMessage(DTV.container,"De agenda wordt opgehaald...");
    DTV.reqJSON(
      DTV.apiDomain+DTV.apiUri,
      {},
      function(data){DTV.rosterItems = data.result.rosterItems; DTV.enrollUri = data.result.callbackUri ;DTV.showAgenda()},
      function(xhr, status, error){DTV.initMessage(DTV.container,"De agenda is helaas even niet beschikbaar...")}
    )
    jQuery(".DTV_enroll").live("click",function(e){e.preventDefault(); DTV.showForm(e.target.href)})
    jQuery("#agendaLink").live("click",function(e){e.preventDefault();DTV.showAgenda()})
    jQuery("#verstuurButton").live("click", function(e){DTV.verstuurFormulier()})
  },

  initMessage : function(div, message) {
    jQuery(div).html(message);
  },

  reqJSON : function(url, params, success, error) {
    ///<summary>Make a JSON call</summary>
    ///<param name="url" type="String" optional="false">Url of handler to call</param>
    ///<param name="params" type="Object" optional="false">params to pass to handler, this event looks for ".Method" (GET/POST) as well</param>
    ///<param name="success" type="Object" optional="false">Event to call when complete</param>
    ///<param name="error" type="Object" optional="true">Event to call when an error is encountered</param>
              
    var callParams = {};
    callParams.type = "GET";  
    callParams.url = url;
    callParams.processData = true;
    callParams.data = params;
    callParams.dataType = "jsonp";
    //callParams.jsonp = true;
    //callParams.jsonpCallback = "_callback=?";
    callParams.success = success;
    if (error) {
      callParams.error = error;
    }
      jQuery.ajax(callParams);
    },

    showAgenda : function() {
	var html = ""
      if (DTV.rosterItems.length == 0) html += "Er zijn nog geen nieuwe workshops gepland."
	for (var i=0, ii= DTV.rosterItems.length; i < ii; i++) {
	  html += DTV.getDateSessionsHtml(DTV.rosterItems[i],i==0)
	}

	jQuery(DTV.container).html(html)		
    },
	
    getDateSessionsHtml : function (dateEntry,first) {
	var html ="";
	//html += "<h3>"
	//html += DTV.getDateString(dateEntry.date);
	//html += "</h3>";
	//html += "<table>"
	for (var i=0, ii= dateEntry.sessions.length; i < ii ; i++) {
		session = dateEntry.sessions[i];
		html += DTV.getSessionHtml(session, DTV.getDateString(dateEntry.date),first);
	}
	//html += "</table>"
         html += "<div class=\"end\"></div>"
	return html;
		
    },    

    getSessionHtml : function(session, dateString, first) {
	var html = "";
      html += "<p "
      if (first) html += "class=\"firstItem\""
      html += ">"
      html += "<span class=\"pHeader\">"
	html += session.name;
	if (session.participantCount >= session.maxParticipants && session.enrollable) {html += " (vol)"}	  
	if (!session.enrollable && session.externalLink == null) {html += " (besloten)"}
      html += "</span>"
      html += session.extraText
	html += "<br />";
      html += "<span class=\"agendaDetail\">"
      html += session.startTime
      html += " - "
      html += session.endTime
      html += "</span>"
      html += "<span class=\"agendaDetail\">"
	html += dateString;
      html += "</span>"
      html += "<span class=\"agendaDetail\">"
      html += session.locationName
      html += "</span><br />"
      html += "<a class=\"aanmeldButton\" "
         html += "href=\"inschrijfform.php?sessionId=" + session.id + "\">"
         html += "<img src=\"images/arrow-white.png\" alt=\"arrow\" "
         html += "/>Aanmelden</a>"

      html += "</p>"  
	return html;	
    },

    getDateString : function(dateMS) {
	var date = new Date(dateMS);

	var dateString = "";
	dateString += date.getDate();
	dateString +=" ";
	dateString += DTV.months[date.getMonth()];
	dateString +=" ";
	dateString += date.getFullYear();
	return dateString;
    },

	showForm : function(sessionHref) {
		var sessionId = (sessionHref.substring(sessionHref.indexOf("id=")+3));
		var selectedSession = undefined;
		var selectedDate = undefined;
		for (var i = 0,ii= DTV.rosterItems.length; i < ii ; i++) {
			var item = DTV.rosterItems[i];
			for (var j=0, jj=item.sessions.length ; j < jj ; j++) {
				session = item.sessions[j];
				if (session.id == sessionId){
					selectedSession = session;
					selectedDate = item.date;
					break;
				} 
			}
		}
		if (selectedSession != undefined) {
			DTV.createForm(selectedDate, selectedSession)
		}
	},
	
	createForm : function(date, session) {
		var html = "";
		html += "<h1>"+session.name+"</h1>"
		html += "<table>";
	      html += DTV.createDtvRow("Begeleider:", session.facilitator);
		//html += DTV.createDtvRow("Datum:", DTV.getDateString(date))
		//html += DTV.createDtvRow("Tijdstip:", session.startTime + "-" + session.endTime)
			//html += DTV.createDtvRow("Locatie:", session.locationName)
			//html += DTV.createDtvRow("Adres:", session.address);
		
		//if (session.showGoogleMaps) html += DTV.createDtvRow("Kaart:", "<a href=\"http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+session.address+"\" target=\"_blank\">Kaart</a>")
		if (session.extraText != null && session.extraText != "") html += DTV.createDtvRow("Bijzonderheden", session.extraText);
		if (session.externalLink != null && session.externalLink != "") {
    		if (session.enrollable) {
	    		html += DTV.createDtvRow("Meer info:", "<a href='"+session.externalLink+"' target='_blank'>"+(session.externalLinkText != null ? session.externalLinkText : "link")+"</a>")
		    } else {
				html += DTV.createDtvRow("Inschrijven:", "<a href='"+session.externalLink+"' target='_blank'>"+(session.externalLinkText != null ? session.externalLinkText : "link")+"</a>")
			}
		}
	    html += "</table>";
		if (session.enrollable) {
			//alert(session.participantCount + " " +  session.maxParticipants)
			if (session.participantCount < session.maxParticipants) {
    			html += "<div id=\"form\"><h1>Jouw gegevens</h1>"
				html += "<input type='hidden' id='sessieId' value='"+session.id+"' />";
	       		html += "<table>";
			    html += DTV.createDtvRow("Voornaam", "<input type='text' id='firstName' />")
			    html += DTV.createDtvRow("Achternaam", "<input type='text' id='lastName'/>")
			    html += DTV.createDtvRow("E-mail", "<input type='text' id='email' />")
			    html += DTV.createDtvRow("Telefoon", "<input type='text' id='telephone' />")
		    	    html += DTV.createDtvRow("Twitternaam", "<input type='text' id='twitter' />")
			    html += DTV.createDtvRow("Woonplaats", "<input type='text' id='residence' />")
			    html += DTV.createDtvRow("Bedrijf", "<input type='text' id='company' />")
			    html += DTV.createDtvRow("Website", "<input type='text' id='website' />")
			    html += DTV.createDtvRow("Bericht", "<textarea id='message' ></textarea>")

			    html += "</table>";
			    html += "<input type='button' id='verstuurButton' value='versturen' /></div>"
			} else {
			    html += "<span style='color: red'>Helaas, deze bijeenkomst is volgeboekt</span>"	
			}
		} else {
			if (session.externalLink == null) {
				html += "<span style='color: red'>Helaas is dit een besloten bijeenkomst. </span>"
			}
		} 
		
		html += "<div>&nbsp;</div>";
		html += "<a href=\"#\" id=\"agendaLink\">terug naar de agenda</a>"
		jQuery(DTV.container).html(html)
	},
	 
	createDtvRow : function(label, value) {
		var html = "";
		html += "<tr><td><strong>"
		html += label
		html += "</strong></td><td>"
		html += value
		html += "</td></tr>";
		return html;
	},

	verstuurFormulier : function() {
          if (DTV.checkForm()) {

		var params = "" 
		params += "?firstName="+jQuery("#firstName").val()
		params += "&lastName="+ jQuery("#lastName").val()
		params += "&sessionId="+ jQuery("#sessieId").val()
		params += "&email="+ jQuery("#email").val()
		params += "&telephone=" + jQuery("#telephone").val()
		params += "&twitterName=" + jQuery("#twitter").val()
		params += "&website=" + jQuery("#website").val()
		params += "&company=" + jQuery("#company").val()
		params += "&message=" + jQuery("#message").val()
 		params += "&residence=" +jQuery("#residence").val()
            params += "&_method=POST"
		jQuery("#verstuurButton").attr('disabled','disabled')
		DTV.reqJSON(DTV.apiDomain+DTV.enrollUri + params , {}, function(data){DTV.formSuccess(data)}, function(data){DTV.formError(data)})
          }
	},

      

      checkForm : function() {
         if (jQuery("#firstName").val() == "") {
           alert("Vul uw voornaam in!"); return false;
         }
         if (jQuery("#lastName").val() == "") {
           alert("Vul uw achternaam in!"); return false;
         }
         if (jQuery("#email").val() == "") {
           alert("Vul uw e-mailadres in!"); return false;
         }
         if (jQuery("#telephone").val() == "") {
           alert("Vul uw telefoonnummer in!"); return false;
         }

         return true;
      },

    formSuccess : function(data) {
		if (data.status.code == "200") {
		  jQuery("#form").html("<h3>Je aanmelding is ontvangen!</h3>")
		} else {
		  alert(data.status.text + " "+data.status.message);
		  jQuery("#verstuurButton").removeAttr('disabled')	
		}
		
	},
	
	formError : function(data) {
		alert("Er is iets misgegaan met het versturen van het formulier. Probeer opnieuw!" )
		jQuery("#verstuurButton").removeAttr('disabled')	
	},

}