/// <reference path="C:\References\jquery-1.4.1-vsdoc.js" />


// control-container htmllist-container 
	
	// ui-htmllist-container ui-htmllist-container-open

	// ui-htmllist-list ui-htmllist-open
	
		// ui-htmllist-list
			
			// ui-htmllist-listitem 
	
	
	// mp-control-data

// ********************************************************************
// 
// Manheim Retail Marketing
// ********************************************************************
// Copyright © 2010 Manheim Retail Marketing.
//
//  Summary
// ******************************
// $Workfile: HtmlList.js $
// Notes:
//
// File History Information
// ************************
// Created on:					    
// Last Modified:					$Modtime: 7/10/10 12:52 $
// Original Author:					Liam Prescott
// Last Modified by:				$Author: Prescottl $
// Last JS Lint:					
//
// Source Control Information
// **************************
// File Version:					$Revision: 2 $
// VSS Location:					$Archive: /Manheim.Portfolio/Manheim.Portfolio.Web.UI.Client.Assets/assets/js/mrm/lib/ui/controls/1.0/HtmlList.js $
//
// ********************************************************************


// Check / create namespace
if (!mrm.global.isNamespaceDefined("mrm.lib.ui.controls"))
{
	mrm.global.createNamespace("mrm.lib.ui.controls", "1.0");
}


// Class definition
mrm.lib.ui.controls.HtmlList = mrm.lib.ui.controls.BaseControl.subClass
({

	/*
	=============================
	CONSTANTS
	=============================
	*/
	/* These properties MUST stay the same based upon 'BaseControl' functionality */
	"SELECTOR_CONTROL": ".htmllist-container",
	"BINDER_NAME": "HtmlList",


	/* JQuery element targeting strings */
	"SE_CONTROL": ".ui-htmllist-container",

	"SE_CDATA": ".mp-control-data", //.mp-control-data:hidden
	"SE_CDATA_OPTION": "option",

	"SE_SELECTED_DISPLAY": ".ui-htmllist-summary > .ui-htmllist-header",
	"SE_LIST": ".ui-htmllist-list > .ui-htmllist-list",
	"SE_LIST_ITEM": ".ui-htmllist-listitem",

	"SE_BODY" : "body",


	/* JQuery element targeting string fragments */


	/* Class names */
	"CL_DISPLAY_OPEN": "ui-htmllist-container-open",
	"CL_LIST_ITEM_SELECTED": "selected",


	/* Class name fragments */



	/* Data object properties */
	"DOP_JQ_TARGET": "jqTarget",
	"DOP_JQ_CDATA": "jqControlData",
	"DOP_JQ_CDATA_OPTIONS": "jqControlDataOptions",

	"DOP_JQ_SELECTED_DISPLAY": "jqSelectedDisplay",
	"DOP_JQ_LIST_ITEMS": "jqListItems",

	"DOP_SELECTED_ID": "selectedId",
	"DOP_SELECTED_TEXT": "selectedText",

	"DOP_JQ_DOC_CONTAINER": "jqDocContainer",


	/* Event types */
	"EV_CHANGE": "HTMLLIST_CHANGE",
	"EV_OPEN": "HTMLLIST_OPEN",
	"EV_CLOSE": "HTMLLIST_CLOSE",
	"EV_CLICK_DOC_CLOSE" : "click.HTMLLIST_CLICK_DOC",


	"AC_HOVER" : "ACTION_HOVER",
	"AC_CLICK_OUTSIDE" : "ACTION_CLICK_OUTSIDE",

	/* Event object properties */
	"EOP_DATA_ID": "dataId",

	/* Constants */
	"DISABLED": "disabled",


	/* GENERAL PROPERTIES */
	/* Core settings (can be over written durning binding as required)*/
	"CLOSE_ON_SELECTION": true,
	"CLOSE_ACTION": "ACTION_HOVER",


	/*
	=============================
	CONSTRUCTOR
	=============================
	*/
	"init": function (tracing, settings) {
		// Create a new array in which to store data objects
		this._dataStore = new Array();

		// Call base class init
		this._super(tracing, settings);
	},


	/*
	=============================
	PUBLIC PROPERTIES
	=============================
	*/
	
	
	/*
	=============================
	PRIVATE PROPERTIES
	=============================
	*/


	/*
	=============================
	PRIVATE METHODS
	=============================
	*/
	/* Control initialisation / setup */
	"_initControl": function (controlElement, instanceId, settings) {
		var __this = this;
		var __status = false;

		// Create data object
		var dObj = {};

		// Store data object
		var dataId = this._storeData(dObj);

		// Get core control elements
		var t = $(controlElement);
		var cTarget = t.find(this.SE_CONTROL);

		// Get control data
		var cData = t.find(this.SE_CDATA);
		var cDataOptions = cData.find(this.SE_CDATA_OPTION);

		// Get summary and listItems
		var selectedDisplay = t.find(this.SE_SELECTED_DISPLAY);
		var listItems = t.find(this.SE_LIST_ITEM);

		// Current control state
		var selectedId;
		var selectedText;

		//if the internal select list is disabled then dont bind this control and attach a disabled class
		if (cData.attr(__this.DISABLED) == true || cData.attr(__this.DISABLED) == __this.DISABLED) {
			cTarget.addClass(__this.DISABLED);
		}
		else {

			// Process list items
			listItems.each(function (i) {
				var $this = $(this);

				// Add click functionality
				$this.click(function (e) { __this._handleItemSelected(e, i, dataId) });

				// Set current control state
				if ($this.selected) {
					selectedId = i;
					selectedText = $this.html();
				}
			}
			);

			// Make sure that the display shows currently selected
			selectedDisplay.html(selectedText);

			// Populate data object
			dObj[this.DOP_JQ_TARGET] = t;
			dObj[this.DOP_JQ_CTARGET] = cTarget;
			dObj[this.DOP_JQ_CDATA] = cData;
			dObj[this.DOP_JQ_CDATA_OPTIONS] = cDataOptions;
			dObj[this.DOP_JQ_SELECTED_DISPLAY] = selectedDisplay;
			dObj[this.DOP_JQ_LIST_ITEMS] = listItems;
			dObj[this.DOP_SELECTED_ID] = selectedId;
			dObj[this.DOP_SELECTED_TEXT] = selectedText;
			dObj[this.DOP_JQ_DOC_CONTAINER] = $(this.SE_BODY);

			// Add click and mouse-out event listeners to 
			cTarget.click(function (e) { __this._handleListOpen(e, dataId); });

			// Use mouseleave !mouseout so that no fired by children			
			if (this.CLOSE_ACTION == this.AC_HOVER) cTarget.mouseleave(function (e) { __this._handleListClose(e, dataId); });

			// Call subclass set stub method
			this._setupSubClass(dataId);
		}

		status = true;

		return status;
	},



	/* [VIRTUAL] : Subclass setup method */
	"_setupSubClass": function (dataId) { },



	/* Event handlers */

	"_handleListOpen": function (e, dataId) {
		e.stopPropagation();
		this._openDisplay(dataId);
	},

	"_handleListClose": function (e, dataId) {
		e.stopPropagation();
		this._closeDisplay(dataId);
	},

	"_handleItemSelected": function (e, itemIndex, dataId) {
		e.stopPropagation();

		// Get data
		var d = this._getData(dataId);

		//Set selected Id in data
		d[this.DOP_SELECTED_ID] = itemIndex;

		// Get item and option
		var items = d[this.DOP_JQ_LIST_ITEMS]
		var item = $(items[itemIndex]);
		var option = d[this.DOP_JQ_CDATA_OPTIONS][itemIndex];

		// Get display text
		var dText = d[this.DOP_SELECTED_TEXT] = item.html();

		// Set selected display text
		d[this.DOP_JQ_SELECTED_DISPLAY].html(dText);

		// Selected item class name
		var sClass = this.CL_LIST_ITEM_SELECTED;

		// Clear selected class name from all items 
		items.each(function (i) { $(this).removeClass(sClass); })

		// Add to selected item
		item.addClass(sClass);

		// Update control data
		var options = d[this.DOP_JQ_CDATA_OPTIONS];
		var currentO = options.filter(":selected")
		currentO.attr("selected", "");
		var selectedO = $(options[itemIndex]);
		selectedO.attr("selected", "selected");

		// Fire change event on underlying control data <select> element
		d[this.DOP_JQ_CDATA].trigger("change");

		// Fire custom change event on control
		var e_change = this._createEventObject(this.EV_CHANGE, dataId);
		d[this.DOP_JQ_TARGET].trigger(e_change);

		// Close display if required
		if (this.CLOSE_ON_SELECTION) this._closeDisplay(dataId);
	},



	/* Display manipulation */

	"_openDisplay": function (dataId) {
		
		var __this = this;
		var d = this._getData(dataId);

		if (this.CLOSE_ACTION == this.AC_CLICK_OUTSIDE)
		{
			// Bind click event on body to close active drop down.		
			var ev_close = new jQuery.Event(this.EV_CLICK_DOC_CLOSE);
			d[this.DOP_JQ_DOC_CONTAINER].trigger(ev_close);
			d[this.DOP_JQ_DOC_CONTAINER].bind(this.EV_CLICK_DOC_CLOSE, function (e) { __this._closeDisplay(dataId); })
		}		
		
		d[this.DOP_JQ_CTARGET].addClass(this.CL_DISPLAY_OPEN);

		// Fire custom OPEN event on control
		var e = this._createEventObject(this.EV_OPEN, dataId);
		d[this.DOP_JQ_TARGET].trigger(e);
	},

	"_closeDisplay": function (dataId) {
		var d = this._getData(dataId);
		d[this.DOP_JQ_CTARGET].removeClass(this.CL_DISPLAY_OPEN);

		// Fire custom OPEN event on control
		var e = this._createEventObject(this.EV_CLOSE, dataId);
		d[this.DOP_JQ_TARGET].trigger(e);

		if (this.CLOSE_ACTION == this.AC_CLICK_OUTSIDE)
		{
			// Unbind click event attached to body tag - to close active drop down.		
			d[this.DOP_JQ_DOC_CONTAINER].unbind(this.EV_CLICK_DOC_CLOSE);
		}
	},



	/* Data storage and access */

	"_dataStore": null,

	/*
	----
	@param	= data object to store
	@return = data reference id
	----
	*/
	"_storeData": function (dataObj) { return (this._dataStore.push(dataObj) - 1); },

	/*
	----
	@param	= data reference id
	@return = data object
	----
	*/
	"_getData": function (id) { return this._dataStore[id]; },



	/* Internal event object creation */

	/* Override as required : Please ENSURE THAT YOU CALL this._super(type, dataId) to call this method as first step and then build upon the event object */
	"_createEventObject": function (type, dataId) {
		var o = new jQuery.Event(type);
		o[this.EOP_DATA_ID] = dataId;
		return o;
	}




	/*
	=============================
	REFERENCE :: BASIC CONTROL CONSTRUCT
	=============================
	
	<div class="control-container htmllist-container clear">
	<label>Control label</label>
	<div class="a-auto-hover ui-htmllist-container">
	<div class="ui-htmllist-summary ui-htmllist-closed">
	<h6 class="ui-htmllist-header">A</h6>
	</div>
				
	<div class="ui-htmllist-list ui-htmllist-open">
	<ul class="ui-htmllist-list">
	<li class="a-auto-hover ui-htmllist-listitem first">A</li>
	<li class="a-auto-hover ui-htmllist-listitem">B</li>
	<li class="a-auto-hover ui-htmllist-listitem">C</li>
	<li class="a-auto-hover ui-htmllist-listitem">D</li>
	<li class="a-auto-hover ui-htmllist-listitem">E</li>
	<li class="a-auto-hover ui-htmllist-listitem">F</li>
	<li class="a-auto-hover ui-htmllist-listitem">G</li>
	<li class="a-auto-hover ui-htmllist-listitem">H</li>
	<li class="a-auto-hover ui-htmllist-listitem">I</li>
	<li class="a-auto-hover ui-htmllist-listitem last">J</li>
	</ul>
	</div>
	</div>
			
	<select class="mp-control-data" id="" name="" >
	<option value="A" selected="selected">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>
	<option value="F">F</option>
	<option value="G">G</option>
	<option value="H">H</option>
	<option value="I">I</option>
	<option value="J">J</option>
	</select>
	</div>
	
	=============================
	*/
});