$.namespace('EmailInterface');

EmailInterface = $.klass({
	initialize: function (config) {

		var that = this;
		//var groups = config.groups;
		
		this.bigcontainer = $('<div id="bigcontainer" style="display: none;" ><\/div>')
			.appendTo(that.element);

		this.tabcontainer = $('<div id="tabcontainer"><\/div>')
			.appendTo(that.bigcontainer);

		this.sidepanelcontainer = $('<div id="sidepanelcontainer"><b>The following people will receive this email:<b\/><\/div>')
			.appendTo(that.bigcontainer);

		this.tabnav = $('<ul id="tabnav"><\/ul>')
			.appendTo(that.tabcontainer);

		this.tabdiv = $('<div id="tabdiv"><\/div>')
			.appendTo(that.tabcontainer);
			
		// All Tab
		/*
		$('<li id="tab-nav-All"><a href="#tab-All">Selected<\/a><\/li>').appendTo(that.tabnav);

		$('<div id="tab-All" class="All tabtogglediv"><\/div>')
			.append($('<div class="email-forms" id="email-form-All"><\/div>')
			.append($('<tr><td><label for="id_subject_All">Subject:<\/label><\/td><td><input type="text" id="id_subject_All" name="subject" ><\/td><\/tr>'))
			.append($('<tr><td colspan="2"><textarea id="msgme_All" name="message" cols="43" rows="10"><\/textarea><\/td><\/tr>'))
			.append($('<tr><td colspan="2"><p class="help-manage-users"><\/p><\/td><\/tr>')))
			.appendTo(that.tabdiv);

		$('#id_subject_All').val("Subject here");
		$('#msgme_All').text("Enter the body of your email here");

		$('<div id="sidepanel-All" class="sidepanel"><\/div>')
				.append('<div style="visibility:hidden;">space<\/div>')
				.appendTo(that.sidepanelcontainer);
		*/	
		
		$.get(window.location.pathname, {
			c: randomString(20),
			getdata:''
			},function(data){
				groups = data.groups;
				groups.pop();
				subjects = data.subjects;
				messages = data.messages;
				/*console.log(groups);
				console.log(subjects);
				console.log(messages);*/
				for (var i = 0; i < groups.length; i++) {
				
					// Create tab for each group
					$('<li id="tab-nav-' + groups[i] + '" class="tabtoggle"><a href="#tab-' + groups[i] + '">' + groups[i] + '<\/a><\/li>').appendTo(that.tabnav);
					// remove table from here as well
					$('<div id="tab-' + groups[i] + '" class="' + groups[i] + ' tabtogglediv"><\/div>').append($('<div class="email-forms" id="email-form-' + groups[i] + '"><\/div>').append($('<tr><td><label for="id_subject_' + groups[i] + '">Subject:<\/label><\/td><td><input type="text" id="id_subject_' + groups[i] + '" name="subject" ><\/td><\/tr>')).append($('<tr><td colspan="2"><textarea id="msgme_' + groups[i] + '" name="message" cols="43" rows="10"><\/textarea><\/td><\/tr>')).append($('<tr><td colspan="2"><p class="help-manage-users"><\/p><\/td><\/tr>'))).appendTo(that.tabdiv);
					
					// Load messages & subjects
					$('#id_subject_' + groups[i]).val(subjects[i]);
					$('#msgme_' + groups[i]).val(messages[i]);
					
					
					// Side panels
					
					$('<div id="sidepanel-' + groups[i] + '" class="sidepanel"><\/div>').append('<div style="visibility:hidden;">space<\/div>').appendTo(that.sidepanelcontainer);
					
				}			
				
				$(".email-forms").wrapInner("<table><\/table>");

				$(".help-manage-users").append('<div>Include these <b>keywords<\/b> in your message and they will be<\/div>')
							.append('<div>replaced by the corresponding values: <\/div>')
							.append('<div><b>USERNAME<\/b> will be replaced by the recipients username <\/div>')
							.append('<div><b>FIRSTNAME<\/b> will be replaced by the recipients firstname <\/div>')
							.append('<div><b>LASTNAME<\/b> will be replaced by the recipients lastname <\/div>')
							.append('<div><b>REFERENCE-ID<\/b> will be replaced by the recipients reference-id <\/div>')
							.append('<div><b>LISTOF<\/b> If you are a reviewer, it will be replaced by the recipients assigned applicants.<\/div>')
							.append('<div><b>LISTOF<\/b> If you are an applicant, it will be replaced by the recipients assigned reviewers.<\/div>');
							
			}, 'json');
		
	}
	

});