// JavaScript Document


/* Interactive Form Script 
 * Requires Prototype and Script.aculo.us Libraries
 * By: Henry YP Ho @ monKiKi.st
 * http://www.monkiki.st
 * This work is licensed under the Creative Commons Attribution-Share Alike 3.0
 * http://creativecommons.org/licenses/by-sa/3.0/us/
 */
 
if (typeof Effect == 'undefined')
  throw("You must have the script.aculo.us library to use this interactiveForm");

var interactiveForm = Class.create({
								   
	//initialise function
	initialize: function(id, results) {
		
		//init the form division
        if(!$(id)) throw("Attempted to initalize interactiveform with id: "+ id + " which was not found.");
		//get and set the slider results pages
		this.resultsin = $('treatment-planner-analysis-slides');
		this.resultsout = $('treatment-planner-analysis-results');
		//get the results display page
		this.daysresults = new Array();
		this.daysresults[0] = new Array();
		this.daysresults[1] = new Array();
		this.daysresults[2] = new Array();
		//set all result parameters
		this.daysresults.each(function(s,index) {
			
			s['day'] = $('day'+(index+1)+'dayshow');
			s['night'] = $('day'+(index+1)+'nightshow');
			s['total'] = $('day'+(index+1)+'totalshow');
			s['times'] = $('day'+(index+1)+'timesshow');
			s['final'] = $('day'+(index+1)+'finalshow');
							  
									  
		}.bind(this));
		
		//the results sentences
		this.resultsSentenceYes = $('analysis-results-sentence1');
		this.resultsSentenceMaybe = $('analysis-results-sentence2');
		this.resultsSentenceNo = $('analysis-results-sentence3');
		
		//the days
		this.daysNames = {
			day1: "day1",
			day2: "day2",
			day3: "day3"
			
		};	
		
		//setup the data array to be used in calculation
		this.data = new Array();
		
		//init values for day night and times
		this.initDayValue = 1250;
		this.initNightValue = 1250;
		this.initTimesValue = 5;
		
		//check the days
        if(!$(this.daysNames.day1)) throw("Attempted to initalize interactiveform with id: "+ this.daysNames.day1 + " which was not found.");
        if(!$(this.daysNames.day2)) throw("Attempted to initalize interactiveform with id: "+ this.daysNames.day2 + " which was not found.");
        if(!$(this.daysNames.day3)) throw("Attempted to initalize interactiveform with id: "+ this.daysNames.day3 + " which was not found.");
		
		
		//specify the days 
		this.days = new Array();
		this.days[0] = $(this.daysNames.day1);
		this.days[1] = $(this.daysNames.day2);
		this.days[2] = $(this.daysNames.day3);
		//specify the show date
		this.day1ShowDate = $('day1-date-show');
		this.day2ShowDate = $('day2-date-show');
		this.day3ShowDate = $('day3-date-show');
		
				
		//specify each day
		this.days.each(function(s) {
								
			//create the siders	
			//alert(s.select('.slider-bar'));
			this.createSliders (s);				
		
		
		}.bind(this));
		
		//the button tio do the calcualtions
		this.calBut = $('analysis-cal');
		this.resetBut = $('analysis-reset');
		this.printBut = $('analysis-print');
		
		//create the dates
		this.date1 = new Array();
		this.date2 = new Array();
		this.date3 = new Array();
		//create the dates
		this.date1['date'] = $('day1-date');
		this.date1['month'] = $('day1-month');
		this.date1['year'] = $('day1-year');
		
		this.date2['date'] = $('day2-date');
		this.date2['month'] = $('day2-month');
		this.date2['year'] = $('day2-year');
		
		this.date3['date'] = $('day3-date');
		this.date3['month'] = $('day3-month');
		this.date3['year'] = $('day3-year');
	

		
		//setup the buttons
        var calHandler =  this.calHandler.bindAsEventListener(this);
        this.calBut.observe('click', calHandler);
		
		var resetHandler = this.resetHandler.bindAsEventListener(this);
		this.resetBut.observe('click',resetHandler);
		
		//print results
		var printHandler = this.printHandler.bindAsEventListener(this);
		this.printBut.observe('click',printHandler);
		
		
		//hide the reset button
		this.resetBut.hide();
		//hide initial results
		this.resultsout.hide();
		//hide initial print button
		this.printBut.hide();
		//results all hide
		//the results sentences
		this.resultsSentenceYes.hide();
		this.resultsSentenceMaybe.hide();
		this.resultsSentenceNo.hide();
		
	},
	
	//calculation handler
	calHandler:function(el) {
		
		//calculate
		this.PerformCal();

		//hide submit button
		this.calBut.hide();
		//show results
		this.resultsin.hide();
		this.resultsout.show();
		//show the reset button
		this.resetBut.show();
		this.printBut.show();
		
	},
	
	//reset the data and button
	resetHandler:function(el) {
		
		this.calBut.show();
		this.resultsin.show();
		this.resultsout.hide();
		this.resetBut.hide();
		this.printBut.hide();
		//the results sentences
		this.resultsSentenceYes.hide();
		this.resultsSentenceMaybe.hide();
		this.resultsSentenceNo.hide();
		
	},
	
	//create printer friendly page
	printHandler:function(el) {
		//setting the new window options
		var sOption="toolbar=yes,location=no,directories=yes,menubar=no,"; 
       	sOption+="scrollbars=yes,width=750,height=600,left=100,top=100"; 
		
		var outputHTML='<table id="Table_01" width="800" height="450" border="0" cellpadding="0" cellspacing="0">';

		outputHTML+='<tr><td colspan="4">此夜尿成因分析由 <a href="http://www.night-toilet.com.hk/" target="_blank">night-toilet.com.hk</a> 提供</td></tr>';
		outputHTML+='<tr><td colspan="4"><a href="JavaScript:window.print();" >列印結果</a></td></tr>';
		
		outputHTML+='<tr>';
	  	outputHTML+='<td width="350" height="40"></td>';
		outputHTML+='<td align="left" valign="middle"><div id="day1-date-show" class="showdate-results">'+this.day1ShowDate.innerHTML+'</div></td>';
		outputHTML+='<td align="left" valign="middle"><div id="day2-date-show" class="showdate-results">'+this.day2ShowDate.innerHTML+'</div></td>';
		outputHTML+='<td align="left" valign="middle"><div id="day3-date-show" class="showdate-results">'+this.day3ShowDate.innerHTML+'</div></td>';
		outputHTML+='</tr>';
		outputHTML+='<tr>';
   	 	outputHTML+='<td bgcolor="#EAF2F7"><div class="day-description">日間總尿量</div></td>';
	 	outputHTML+='<td align="left" valign="middle" bgcolor="#EAF2F7"><div id="day1dayshow" class="dayresults">'+this.daysresults[0]['day'].innerHTML+'毫升</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#EAF2F7"><div id="day2dayshow" class="dayresults">'+this.daysresults[1]['day'].innerHTML+'毫升</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#EAF2F7"><div id="day3dayshow" class="dayresults">'+this.daysresults[2]['day'].innerHTML+'毫升</div></td>';
		outputHTML+='</tr>';
		outputHTML+='<tr>';
	  	outputHTML+='<td bgcolor="#FDF3F6"><div class="day-description">夜間總尿量</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#FDF3F6"><div id="day1nightshow" class="nightresults">'+this.daysresults[0]['night'].innerHTML+'毫升</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#FDF3F6"><div id="day2nightshow" class="nightresults">'+this.daysresults[1]['night'].innerHTML+'毫升</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#FDF3F6"><div id="day3nightshow" class="nightresults">'+this.daysresults[2]['night'].innerHTML+'毫升</div></td>';
		outputHTML+='</tr>';
		outputHTML+='<tr>';
	  	outputHTML+='<td bgcolor="#F9F9F3"><div class="day-description">全日總尿量</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#F9F9F3"><div id="day1totalshow" class="daytotalresults">'+this.daysresults[0]['total'].innerHTML+'毫升</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#F9F9F3"><div id="day2totalshow" class="daytotalresults">'+this.daysresults[1]['total'].innerHTML+'毫升</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#F9F9F3"><div id="day3totalshow" class="daytotalresults">'+this.daysresults[2]['total'].innerHTML+'毫升</div></td>';
		outputHTML+='</tr>';
		outputHTML+='<tr>';
	  	outputHTML+='<td bgcolor="#E4E7E5"><div class="day-description">夜間起床如廁次數</div></td>';
	 	outputHTML+='<td align="left" valign="middle" bgcolor="#E4E7E5"><div id="day1timesshow" class="waketimes">'+this.daysresults[0]['times'].innerHTML+'次</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#E4E7E5"><div id="day2timesshow" class="waketimes">'+this.daysresults[1]['times'].innerHTML+'次</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#E4E7E5"><div id="day3timesshow" class="waketimes">'+this.daysresults[2]['times'].innerHTML+'次</div></td>';
		outputHTML+='</tr>';
		outputHTML+='<tr>';
	  	outputHTML+='<td bgcolor="#999999"><div class="day-description">夜間尿量﹪</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#999999"><div id="day1finalshow" class="finalresults">'+this.daysresults[0]['final'].innerHTML+'%</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#999999"><div id="day2finalshow" class="finalresults">'+this.daysresults[1]['final'].innerHTML+'%</div></td>';
	  	outputHTML+='<td align="left" valign="middle" bgcolor="#999999"><div id="day3finalshow" class="finalresults">'+this.daysresults[2]['final'].innerHTML+'%</div></td>';
		outputHTML+='</tr>';
		outputHTML+='<tr><td colspan="4"></td></tr>';
		outputHTML+='</table>';
		
		var outResults = '';
		//to determine which to show
		if (this.resultsSentenceYes.visible()) {outResults = this.resultsSentenceYes.innerHTML;}
		else if (this.resultsSentenceMaybe.visible()) {outResults = this.resultsSentenceMaybe.innerHTML;}
		else if (this.resultsSentenceNo.visible()) {outResults = this.resultsSentenceNo.innerHTML;}
		
		outputHTML+='<div>'+outResults+'</div>';
		
		var winprint=window.open("","",sOption); 
       	winprint.document.open(); 
      	winprint.document.write('<html><LINK href="/assets/templates/night/css/print_analysis.css" rel=Stylesheet><body>'); 
      	winprint.document.write(outputHTML);          
      	winprint.document.write('</body></html>'); 
      	winprint.document.close(); 
      	winprint.focus(); 
	},
	
	//function to update all data
	PerformCal:function() {
		//the results sentences
		this.resultsSentenceYes.hide();
		this.resultsSentenceMaybe.hide();
		this.resultsSentenceNo.hide();
		
		//get each day
		this.days.each(function(s,index){

		//get the day night and times slider into different array
		daySlider = s.select('div.slider-bar.day-bar p.percent');
		nightSlider = s.select('div.slider-bar.night-bar p.percent');
		timesSlider = s.select('div.slider-bar.times-bar p.percent');
		
	
		//put in to results page
		this.daysresults[index]['day'].update(parseInt(daySlider[0].innerHTML));
		this.daysresults[index]['night'].update(parseInt(nightSlider[0].innerHTML));
		this.daysresults[index]['times'].update(parseInt(timesSlider[0].innerHTML));
		
		//put in the dates
		
		this.day1ShowDate.update(this.date1['year'].getValue()+'年'+this.date1['month'].getValue()+'月'+this.date1['date'].getValue()+'日');
		this.day2ShowDate.update(this.date2['year'].getValue()+'年'+this.date2['month'].getValue()+'月'+this.date2['date'].getValue()+'日');
		this.day3ShowDate.update(this.date3['year'].getValue()+'年'+this.date3['month'].getValue()+'月'+this.date3['date'].getValue()+'日');


		
		
		//the times
		var times = parseInt(timesSlider[0].innerHTML);
		//calculate and put total
		var total = parseInt(daySlider[0].innerHTML) + parseInt(nightSlider[0].innerHTML);
		
		this.daysresults[index]['total'].update(total);
		
		//calculate the percentage
		var percent = Math.round(100*parseInt(nightSlider[0].innerHTML) / total);
		this.daysresults[index]['final'].update(percent);
												 
				
		}.bind(this));		
		
		
		var totpercent = Math.round((parseInt(this.daysresults[0]['final'].innerHTML)+parseInt(this.daysresults[1]['final'].innerHTML)+parseInt(this.daysresults[2]['final'].innerHTML))/3);
		
		var tottimes = Math.round((parseInt(this.daysresults[0]['times'].innerHTML)+parseInt(this.daysresults[0]['times'].innerHTML)+parseInt(this.daysresults[0]['times'].innerHTML))/3);
		
		if (totpercent>=33) {parseInt(timesSlider[0].innerHTML)
			this.resultsSentenceYes.show();
			this.resultsSentenceMaybe.hide();
			this.resultsSentenceNo.hide();
		}
		
		if (totpercent<=32 && tottimes>=3) {
			this.resultsSentenceYes.hide();
			this.resultsSentenceMaybe.show();
			this.resultsSentenceNo.hide();
		}
		
		if (totpercent<=32 && tottimes<=2) {
			this.resultsSentenceYes.hide();
			this.resultsSentenceMaybe.hide();
			this.resultsSentenceNo.show();
		}
			
	},
	
	
	//function to create sliders for each day
	createSliders:function(s) {


		//get the day night and times slider into different array
		daySlider = s.select('div.slider-bar.day-bar');
		nightSlider = s.select('div.slider-bar.night-bar');
		timesSlider = s.select('div.slider-bar.times-bar');
		
		//set day slider
		daySlider.each(function(sl) {
									
			//set the init value when created
			outPercent = sl.select('p.percent');
			outPercent[0].update(Math.round(this.initDayValue));
			//create the controller
			new Control.Slider(sl.down('.slider-handle'), sl, {
				  range: $R(0.1, 2500),
				  sliderValue: this.initDayValue,
				  increment: 1,
				  onSlide: function(value) {
					  outPercent = sl.select('p.percent');
					  outPercent[0].update(Math.round(value));
					  this.PerformCal();

				  },
				  onChange: function(value) { 
					//alert ('hoho');
					//display.update ('<b>\u5c3f\u91cf: '+Math.round(value)+'ml</b>');
					 //this.calAverage(value, count);
					 //outPercent[0].update(Math.round(value));
				  }.bindAsEventListener(this)
				});	
		}.bind(this));
		
		//set night slider
		nightSlider.each(function(sl) {
			//set the init value when created
			outPercent = sl.select('p.percent');
			outPercent[0].update(Math.round(this.initNightValue));
			//create the controller
			new Control.Slider(sl.down('.slider-handle'), sl, {
				  range: $R(0.1, 2500),
				  sliderValue: 1250,
				  increment: 1,
				  onSlide: function(value) {
					  outPercent = sl.select('p.percent');
					  //alert (outPercent[0]);
					  outPercent[0].update(Math.round(value));
					  this.PerformCal();
				  },
				  onChange: function(value) { 
					//alert ('hoho');
					// outPercent[0].update(Math.round(value));
					 
				  }.bindAsEventListener(this)
				});	
		}.bind(this));
		
		
		//set times slider
		timesSlider.each(function(sl) {
			//set the init value when created
			outPercent = sl.select('p.percent');
			outPercent[0].update(Math.round(this.initTimesValue));
			//create the controller
			new Control.Slider(sl.down('.slider-handle'), sl, {
				  range: $R(0.1, 10),
				  sliderValue: 5,
				  increment: 1,
				  onSlide: function(value) {
 					  outPercent = sl.select('p.percent');
					  //alert (outPercent[0]);
					  outPercent[0].update(Math.round(value));
					  this.PerformCal();
				  },
				  onChange: function(value) { 
					//alert ('hoho');
					 //outPercent[0].update(Math.round(value));
					 this.PerformCal();
				  }.bindAsEventListener(this)
				});	
		}.bind(this));
	}
	
});

Event.observe(window, 'load', function(){
									   
									   
									   
});