$(document).ready(function () {
	
	Calc = {
		
		init: function(el, supportLocation) {
			$el = $(el);
			
			// import CSS and HTML via Ajax
			Calc.loadCSS(supportLocation);
			Calc.loadHTML(supportLocation, $el);
			Calc.bindHooks(el, supportLocation);
		},
		
		loadCSS: function(supportLocation) {
			cssContent = Calc.loadStringFile(supportLocation + 'css/calc.css');
			$('head').append('<style id="injectedCss" type="text/css">' + cssContent + '</style>');
		},
		
		loadHTML: function(supportLocation) {
			htmlContent = Calc.loadStringFile(supportLocation + 'calc.html');
			$el.replaceWith(htmlContent);
		},
		
		/* loads a chosen file and returns a string on the contents */
		loadStringFile: function(fileLocation) {
			returnData = new Object();
			$.ajax({
				async: false,
				cache: false,
				dataType: 'text',
				type: 'GET',
				url: fileLocation,
				success: function(data) {
					returnData = data;
				}
			});
			return returnData;
		},
		
		/* Binds evens on elements */
		bindHooks: function(el, supportLocation) {
			$el = $(el);
			
			/* bind image change on mouseover table row */
			$el.find('.datainput tr').not('.th').bind('mouseenter', function() {
				Calc.changeImage($(this), $el, supportLocation);
			});
			
			/* bind image change on inputbox focus */
			$el.find('.datainput tr input').focus( function() {
				$parent = $(this).parent().parent();
				Calc.changeImage($parent, $el, supportLocation);
			});
			
			/* bind space calculation */
			$el.find('.datainput tr input').keyup( function() {
				$parent = $(this).parent().parent();
				//console.log($parent);
				Calc.updateTotals(this, $parent, $el);
			});
			
			/* bind view */
			$el.find('.header input').toggle(
				function() {
					$(this).val('Edit Selection');
					Calc.displayPrintList($el, supportLocation);
				},
				function() {
					$(this).val('Printable Shortlist');
					Calc.hidePrintList();
				}
			);
		},
		
		displayPrintList: function($el, supportLocation) {
			$el.find('.inputarea').hide();
			$el.find('.plandisplay').hide();
			$el.find('.plansprint').show();
			
			// read selector and render printable list
			htmlContent = "";
			$el.find('.datainput tr').each( function() {
				
				$this = $(this);
				
				htmlAdd = "";
				
				if( $this.hasClass('th') ) {
					// store header (checked later if its needed)
					htmlHeader = '<tr class="th"><th colspan="4">' + $this.find('th').html() + '</th></tr>';
				} else {
					// only render lines with values in them 
					if ( $this.find('td.value input').val() > 0 ) {
						// render body line
						 htmlAdd = '\
						<tr>\
							<td class="count">' + $this.find('td.value input').val() + '</td>\
							<td class="x">x</td>\
							<td class="detail">\
								<span class="description">' + $this.find('td.description .title').html() + '</span>\
								<img src="' + supportLocation + 'images/plans/' + $this.find('td.value input').attr('name') + '.png' + '" alt="Meeting 1 (3.0x3.0)">\
							</td>\
							<td class="size">' + $this.find('td.area').html() + '</td>\
						</tr>\
						'
					}
				}
				
				// if we have some body content then add the header to it
				if (htmlAdd != "" ) {
					htmlContent += htmlHeader;
					htmlHeader = "";
				}
				
				htmlContent += htmlAdd;
				
			});
			
			//output tbody html
			$el.find('.plansprint table tbody').html(htmlContent);
			
			//output tfoot html
			htmlContent = '\
			<tr>\
				<td class="description" colspan="3">Total Square Metres</td>\
				<td class="total">' + $el.find('.dataresult td.total').html() + '</td>\
			</tr>\
			<tr>\
				<td class="description" colspan="3"><strong>Total Including 30% Circulation Space</strong></td>\
				<td class="totalinc">' + $el.find('.dataresult td.totalinc').html() + '</td>\
			</tr>';
			
			$el.find('.plansprint table tfoot').html(htmlContent);
					window.print();
		},
		
		hidePrintList: function() {
			$el.find('.inputarea').show();
			$el.find('.plandisplay').show();
			$el.find('.plansprint').hide();
		},
		
		updateTotals: function(inputbox, $row, $el) {
			$inputbox = $(inputbox);
			
			// update row
			value = Number($row.find('td.description .m2').html());
			inputvalue = Number($inputbox.val());
			if( value * inputvalue > 0 && inputvalue != NaN ) {
				$row.find('td.area').html(value * $inputbox.val());
			} else {
				$row.find('td.area').html('0');
			}
			
			// update totals
			total = 0;
			$el.find('.datainput td.area').each( function() {
				total += parseFloat($(this).html());
			});
			$el.find('.dataresult .total').html(Math.round(total*100)/100);
			total += (total * 0.30);
			$el.find('.dataresult .totalinc').html(Math.round(total*100)/100);
		},
		
		/* changes the image with a nice effect */
		changeImage: function($row, $el, supportLocation) {
			$image = $el.find('.plandisplay img');
			imageName = $row.find('.value input').attr('name') + '.png';
			imageLocation = supportLocation + 'images/plans/' + imageName;
			if (imageLocation != $image.attr('src')) {
				$image.fadeOut(100, function() {
					$image.attr('src',imageLocation);
					$image.attr('alt',imageName);
					$image.fadeIn(100);
					// update title
					$el.find('.plandisplay p.title').html($row.find('td.description span.title').html());
				});
			}
		}
		
	};
	
});