define(["jquery","css!./component.css"],function( jq ) {
	"use strict";

	/**
	 * @constructor
	 */
	function ScoreOverall( context, metadata ) {

		// declare private members
		var scoreBar = null,

			parameters = metadata.parameters,

			borderColor = asRgbaValue( "borderColor", "#98a7b5", "borderTransparency" ),
			backgroundColor = asRgbaValue( "backgroundColor", "#d8dee3", "backgroundTransparency" ),
			barColor = asRgbaValue( "barColor", "#95b3d7", "barTransparency" ),

			borderSize = parameters.asNumber("borderSize", 1),
			showLabels = parameters.asNumber("hideLabels", 0) !== 1;

		function asRgbaValue( colorParameterName, defaultColor, transparencyParameterName ) {

			var color = hexToRgb( parameters.get(colorParameterName, defaultColor)),
				alpha = asAlpha( parameters.asNumber(transparencyParameterName, 0) );

			return "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + alpha + ")";
		}

		function hexToRgb( hex ) {
			var parsingResult = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

			return parsingResult ? {
				r: parseInt(parsingResult[1], 16),
				g: parseInt(parsingResult[2], 16),
				b: parseInt(parsingResult[3], 16)
			} : {
				r: 0,
				g: 0,
				b: 0
			};
		}

		function asAlpha( percentValue ) {
			return (100 - percentValue) / 100;
		}

		function createView() {
			var shellElement = jq(context.getElement())
				.css({
					"font-family": "Arial, Helvetica, sans-serif",
					"font-size": "12px",
					"font-wight": "normal",
					"width": metadata.getWidth() + "px",
					"height": metadata.getHeight() + "px",
					"padding-bottom": (2 * borderSize) + "px"
				})
				.append( createProgressBarTable() );

			if (context.stage.isInAuthoringMode()) {
				createAuthoringShield(shellElement);
			}
		}

		function createProgressBarTable(){

			return jq(document.createElement("table"))
				.addClass("score-bar-table")
				.append( createTableBody() );
		}

		function createTableBody() {
			return jq(document.createElement("tbody")).append(createTableRow());
		}

		function createTableRow(){

			var tableRow = jq(document.createElement("tr"));

			if (showLabels) {
				tableRow.append( createMinLabelCell() );
				tableRow.append( createProgressBarCell() );
				tableRow.append( createMaxLabelCell() );
			}
			else {
				tableRow.append( createProgressBarCell() );
			}

			return tableRow;
		}

		function createMinLabelCell(){
			return jq(document.createElement("td"))
				.addClass("score-bar-min-label-cell")
				.text("0%");
		}

		function createProgressBarCell(){
			return jq(document.createElement("td"))
				.css("height", "100%")
				.append( createBackgroundBar() );
		}

		function createBackgroundBar(){

			scoreBar = createScoreBar();

			return jq(document.createElement("div"))
				.height("100%")
				.css({
					"background-color": backgroundColor,
					"border": borderSize + "px solid " + borderColor
				})
				.append( scoreBar );
		}

		function createScoreBar() {
			return jq(document.createElement("div"))
				.height("100%")
				.width(context.stage.isInAuthoringMode() ? "50%" : "0")
				.css("background-color", barColor)
				.addClass("score-bar");
		}

		function createMaxLabelCell(){
			return jq(document.createElement("td"))
				.addClass("score-bar-max-label-cell")
				.text("100%");
		}

		function createAuthoringShield( shellElement ) {

			// create an object shield so we are able to select and drag the element in the editor
			var objShield = jq( document.createElement("div") );
			objShield.addClass("score-bar-shield");
			shellElement.append( objShield );
		}

		function refreshView() {
			if( !context.stage.isInAuthoringMode() ) {
				scoreBar.width( parseInt( context.quiz.getScore() ) + "%" );
			}
		}

		// revealing public API
		return {

			onLoading : function() {

				context.page.event.bindOnEnter( this );

				if( typeof( context.page.event.bindOnTransform ) === "function" ) {
					context.page.event.bindOnTransform( this );
				}

				createView();
			},

			onEnterPage : function() {
				refreshView();
			},

			onTransformPageStart : function() {
				refreshView();
			}
		};
	}

	return ScoreOverall;
});