﻿function rate_this_widget(element, rating)
{
	this.element = ( typeof element == "string" )?( $("rate_this:"+ element) ):( element );
	this.element_id = this.element.id;

	this.form = $(this.element_id +".form");
	this.stars = $(this.element_id +".stars");
	this.buttons = $(this.element_id +".buttons");
	this.comment_area = $(this.element_id +".comment_area");
	this.send_button = $(this.element_id +".send_button");
	this.cancel_button = $(this.element_id +".cancel_button");

	this.cells = this.stars.getElementsByTagName('TD');
	this.rating = rating || 0;


	this.is = 
	{
		commiting: false
	};

	this.events =
	{
	};

	this.handlers =
	{
		mouse_over: _rate_this__mouse_over,
		mouse_out: _rate_this__mouse_out,
		click: _rate_this__click,
		
		send: _rate_this__send,
		cancel: _rate_this__cancel
	};


	this.init();
}
rate_this_widget.prototype =
{
	init: _rate_this__init,
	reset: _rate_this__reset,

	commit: _rate_this__commit,


	set_cell: _rate_this__set_cell
}


function _rate_this__init()
{
	var arVersion = navigator.appVersion.split("MSIE")
	var version = parseFloat(arVersion[1])


	client.add_handler(this.element, 'MouseOut', client.new_delegate(this, this.handlers.mouse_out, -1));

	for( var count_cells = 0, num_cells = this.cells.length; count_cells < num_cells; count_cells++ )
	{
		var cell = this.cells[count_cells];
		var ordinal = count_cells + 1;

		client.add_handler(cell, 'MouseOver', client.new_delegate(this, this.handlers.mouse_over, ordinal));
		client.add_handler(cell, 'MouseOut', client.new_delegate(this, this.handlers.mouse_out, ordinal));
		client.add_handler(cell, 'Click', client.new_delegate(this, this.handlers.click, ordinal));


		if( (version >= 5.5) && (document.body.filters) )
		{
			var stars = cell.getElementsByTagName('IMG');

			stars[0].src = '/Apps/dfci.web/Media/Images/pixel - transparent (1x1).png';
			stars[1].src = '/Apps/dfci.web/Media/Images/pixel - transparent (1x1).png';
		}
	}

	client.add_handler(this.send_button, 'Click', client.new_delegate(this, this.handlers.send));
	client.add_handler(this.cancel_button, 'Click', client.new_delegate(this, this.handlers.cancel));


	this.reset();
}


function _rate_this__reset(rating)
{
	this.rating = ( typeof rating != 'undefined' )?( rating ):( this.rating );


	for( var count_cells = 0, num_cells = this.cells.length; count_cells < num_cells; count_cells++ )
	{
		var cell = this.cells[count_cells];
		var ordinal = count_cells + 1;
		if( count_cells < this.rating )
		{
			this.set_cell(ordinal, true);
		}
		else
		{
			this.set_cell(ordinal, false);
		}
	}
}


function _rate_this__commit()
{
	this.form['rate_this__rating'].value = this.rating;
	this.form.submit();
}


function _rate_this__mouse_over(ordinal)
{
	for( var count_cells = 0, num_cells = this.cells.length; count_cells < num_cells; count_cells++ )
	{
		var cell = this.cells[count_cells];
		if( count_cells < ordinal )
		{
			this.set_cell(count_cells + 1, true);
		}
		else
		{
			this.set_cell(count_cells + 1, false);
		}
	}
}


function _rate_this__mouse_out(ordinal)
{
	if( ordinal == -1 )
	{
		this.reset();
	}
}


function _rate_this__click(ordinal)
{
	this.reset(ordinal);
	
	this.buttons.style.display = "block";
	this.comment_area.style.display = "block";
}


function _rate_this__send()
{
	this.commit();
}


function _rate_this__cancel()
{
	this.reset(0);

	this.buttons.style.display = "none";
	this.comment_area.style.display = "none";
}


function _rate_this__set_cell(ordinal, on)
{
	var cell = this.cells[ordinal - 1];
	var stars = cell.getElementsByTagName('IMG');
	
	if( on )
	{
		stars[0].style.display = "none";
		stars[1].style.display = "block";
	}
	else
	{
		stars[1].style.display = "none";
		stars[0].style.display = "block";
	}
}


rate_this_widget.create = function(id, action, images)
{
  document.write(
'<div id="rate_this:'+ id +'" class="rate_this__control">\
	<form id="rate_this:'+ id +'.form" class="form" action="'+ action +'" method="post">\
		<h4 class="label">Was this useful?</h4>\
		<table id="rate_this:'+ id +'.stars" class="stars" style="float: left;">\
			<tr>\
				<td>\
					<img id="Img1" class="star" src="'+ images +'star.png" alt="star 1" title="Not useful" runat="server" />\
					<img id="Img2" class="star__filled" style="display: none;" src="'+ images +'star - filled.png" alt="star 1" title="Not useful" runat="server" />\
				</td><td>\
					<img id="Img3" class="star" src="'+ images +'star.png" alt="star 2" title="Slightly useful" runat="server" />\
					<img id="Img4" class="star__filled" style="display: none;" src="'+ images +'star - filled.png" alt="star 2" title="Slightly useful" runat="server" />\
				</td><td>\
					<img id="Img5" class="star" src="'+ images +'star.png" alt="star 3" title="Fairly useful" runat="server" />\
					<img id="Img6" class="star__filled" style="display: none;" src="'+ images +'star - filled.png" alt="star 3" title="Fairly useful" runat="server" />\
				</td><td>\
					<img id="Img7" class="star" src="'+ images +'star.png" alt="star 4" title="Very useful" runat="server" />\
					<img id="Img8" class="star__filled" style="display: none;" src="'+ images +'star - filled.png" alt="star 4" title="Very useful" runat="server" />\
				</td><td>\
					<img id="Img9" class="star" src="'+ images +'star.png" alt="star 5" title="Extremely useful" runat="server" />\
					<img id="Img10" class="star__filled" style="display: none;" src="'+ images +'star - filled.png" alt="star 5" title="Extremely useful" runat="server" />\
				</td>\
			</tr>\
		</table>\
		<div id="rate_this:'+ id +'.buttons" class="buttons" style="display: none; float: left;">\
			<button id="rate_this:'+ id +'.send_button" type="button">Send</button>\
			<button id="rate_this:'+ id +'.cancel_button" type="button">Cancel</button>\
		</div>\
		<div id="rate_this:'+ id +'.comment_area" class="comment_area" style="display: none; clear: both; float: none;">\
			<h4 class="instructions">\
				You may enter a comment below <strong>(optional)</strong>:<br />\
			</h4>\
			<textarea style="float: none;" name="rate_this__comment" cols="40" rows="7"></textarea>\
			<p class="note">\
				If you have a question or need a response, please <a href="/contact/contactform.asp">contact us</a>\
			</p>\
		</div>\
		<input type="hidden" name="rate_this" value="1" />\
		<input type="hidden" name="rate_this__rating" value="0" />\
	</form>\
</div>');

	client.handlers.load.push(
		function()
		{
			rate_this = new rate_this_widget(id);
		}
	);
}