/*
 * jQuery AJAX polling
 * (c) 2009 Martin Edlman
 *
 * Script is called on form submit. The form must have class="poll-form".
 * The structure of calling HTML must be like this
 *
 * <div class="poll-pane">
 *   <form class="poll-form">
 *     <!-- form elements -->
 *     <label><input type="radio" name="choice" value="a" /> label A</label>
 *     <label><input type="radio" name="choice" value="b" /> label B</label>
 *     ...
 *     <input type="submit" value="Submit vote" />
 *   </form>
 *   <div class="poll-waiting">HTML code shown during submit/process</div>
 *   <div class="poll-message"></div>
 * </div>
 *
 * We use classes instead of IDs as classes allow to have more poll blocks on the same page.
 *
 * You can use other HTML tags instead of <div>s but you must keep the classes and keep 
 * the nesting: "poll-pane" is a parent of "poll-form" and "poll-waiting" and "poll-message"
 * are children of "poll-pane".
 *
 * Radio buttons must be named "choice" and they must be enclosed in <label> tags to allow 
 * correct display of results in case of "form_results" (see bellow).
 *
 * Resulting data must be returned as JSON with this structure:
 *
 * "data" : {
 *	"show" : "none" | "form" | "form_results" | "results",
 *	"error" : true | false,
 *	"choice" : value of selected radio button,
 *	"message" : message to be displayed in <div class="poll-message"></div>
 *	"data" : 
 *		[0] : {
 *			"html" : HTML code displayed after <label> of the corresponding
 *				 radio button,
 *			"answer" : text of the answer (displayed when "html" is not present),
 *			"value" : number of votes of the corresponding answer,
 *			"choice" : form value of the corresponding answer,
 *			"pct" : percentage,
 *			"width" : width for graphical display. "width" is in range <0-1>,
 *				  "width" of maximum value is 1
 *		[1] : ...
 *	}
 * }
 *
 * When "error" is false, "data" array and message must be defined, when "error" is true,
 * only "message" must be defined.
 *
 * Value of "show" can be one of these:
 * - "none" - hide poll, display nothing
 * - "form" - no results are shown and form keeps displayed
 * - "form_results" - form keeps displayed and results and displayed along
 * - "results" (default) - form is removed and only results are displayed
 *
 * Results are displayed either as preformated HTML code in data.data[i].html or as a pair of
 * data.data[i].answer - data.data[i].value (data.data[i].pct%).
 * There are 4 possibilites of displaying of the results:
 * 1 show = "form_results", data.data[i].html is set
 *   append <div class="result">data.data[i].html</div> after corresponding <label>
 * 2 show = "form_results", data.data[i].html is NOT set
 *   append <span class="results value">data.data[i].value (data.data[i].pct%)</span>
 *           after correspoding <label>
 * 3 show = "results", data.data[i].html is set
 *   insert data.data[i].html to <div class="poll-pane">
 * 4 show = "results", data.data[i].html is NOT set
 *   append <div class="result"><span class="answer">data.data[i].answer</span>
 *          <span class="value">data.data[i].value (data.data[i].pct%)</span></div> to
 *          <div class="poll-pane">
 *
 * If you have read it till here and you don't understand, nevermind, the best way to see it
 * is to test it. See poll.php and try to change "show" and "data".
 */
$(document).ready(function(){
	$('form.poll-form').submit(function() {
		var $form = $(this);
		var $pane = $form.parents('.poll-pane:first');
		var $waiting = $pane.find('.poll-waiting:first');
		var $message = $pane.find('.poll-message:first');

		var choice = $form.find('input:radio[name=choice]:checked').val();
		if(choice == undefined) {
			alert('Vyber moznost');
			return false;
		}

		$waiting.show(500);
		$message.hide(0);
		$.ajax({
			"type":	"POST",
			"url":	"anketa.php",
			"dataType": "json",
			"data": {
				"choice" : choice,
				"poll_id" : $form.attr('id'),
				"function" : "exec"
			},
			"success" : function(data){
				$waiting.hide(500);
				switch(data.show) {
				case "none":
					$form.hide(500);
					break;
				case 'form_results':
					// remove inserted results (<label> has class="result" already from last call),
					// result is very next to the <label>
					$('input:radio[name=choice]').parent('label').next('.result').remove();
					for(i = 0; i < data.data.length; i++) {
						var $html;
						if(data.data[i].html) 
							$html = $("<div/>").addClass("result").html(data.data[i].html);
						else {
							$html = $("<span/>").addClass("result value").text(data.data[i].value + ' (' + data.data[i].pct + '%)');
						}
						$('input:radio[value=' + data.data[i].choice + ']').parent('label').after($html);
					}
					break;
				case 'form':
					$('input:radio[name=choice]').parent('label').next('.result').remove();
					break;
				case 'results':
				default:
					//$form.children().remove();
					$form.remove();
					for(i = 0; i < data.data.length; i++) {
						if(data.data[i].html) 
							$pane.append(data.data[i].html);
						else
							$pane.append($("<div/>").addClass("result").
								append($("<span/>").addClass("answer").text(data.data[i].answer)).
								append($("<span/>").addClass("value").text(data.data[i].value + ' (' + data.data[i].pct + '%)')));
					}
					break;
				}
				$message.removeClass('error success').addClass((data.error === true) ? 'error' : 'success').text(data.msg).show(500);
			},
			"error" : function(XMLHttpRequest, textStatus, errorThrown) {
				$waiting.hide(500);
				$message.removeClass('error success').addClass('error').text('There was an error: ' + textStatus).show(500);
			}
		});
		return false;
	});
});