/// <reference path="../../../../jQuery/1.3.2/jquery-1.3.2-vsdoc.js" />

/**
 *
 * DisplayManager
 *
 * This class manages the search configuration status within the client environment
 *
 * Managing status and communications between otherwise disparate page elements including:
 *	- Multiple, separate, flash display elements
 *	- Associated html display elements (checkbox links, html slider widgets etc) 
 *
 */

	// Check that namespace into which the Class definition will be creates has been defined & if not then create
	
	if (!mrm.global.isNamespaceDefined("mrm.common.controls")) mrm.global.createNamespace("mrm.common.controls", "1.0");
	
	
	// Class definition :

	mrm.common.controls.ImageListControls = Object.subClass
	(
		{
			/*
			=============================
			CONSTANTS
			=============================
			*/
			SELECTED_CLASS					: "selected",
			SELECTED_HOVER_CLASS			: "selected-hover",
			UNSELECTED_CLASS				: "unselected",
			UNSELECTED_HOVER_CLASS			: "unselected-hover",
			
			CLASS_IMAGELIST_CONTAINER		: "imagelist-container",
			
			SELECTOR_IMAGELIST_CONTAINER	: "div.imagelist-container",
			SELECTOR_FIELD_IMAGELIST		: "div.field-imagelist",
			
			/*
			=============================
			CONSTRUCTOR
			=============================
			*/
			init: function() 
			{
			
			},
			
			
			/*
			=============================
			PUBLIC MEMBERS
			=============================
			*/
			bindContainer : function(jqContainer)
			{
				this.bind(jqContainer.find(this.SELECTOR_IMAGELIST_CONTAINER));
			},
			
			//function used to configure the colour image buttons
			bind : function (jqContainer, unselectedClass, unselectedHoverClass, selectedClass, selectedHoverClass)
			{
				// set optional params
				unselectedClass			= (unselectedClass)?		unselectedClass			: this.UNSELECTED_CLASS;
				unselectedHoverClass	= (unselectedHoverClass)?	unselectedHoverClass	: this.UNSELECTED_HOVER_CLASS;
				selectedClass			= (selectedClass)?			selectedClass			: this.SELECTED_CLASS;
				selectedHoverClass		= (selectedHoverClass)?		selectedHoverClass		: this.SELECTED_HOVER_CLASS;
				
				// set class scope
				var _this = this;
				
				// ensure we are in correct sope
				if (!jqContainer.hasClass(this.CLASS_IMAGELIST_CONTAINER))
				{
					jqContainer = jqContainer.find(this.SELECTOR_IMAGELIST_CONTAINER);
				}
				
				jqContainer.find(this.SELECTOR_FIELD_IMAGELIST).each(function() {
					//store the imageButton wrapper
					var imageListContainer = $(this).closest(_this.SELECTOR_IMAGELIST_CONTAINER);
					var imageButtonContainer = $(this);
			        
					// work out the image code
					var src = imageButtonContainer.find("img:first").attr("src");
					var imageCode = src.substring(src.replace(/_selected/, '').lastIndexOf('_') + 1, src.replace(/_selected/, '').lastIndexOf('_') + 3);
			        
					// add image code to image button
					this.imageCode = imageCode;
			        
					//on the hover of each of its images, switch the container's class
					imageButtonContainer.find('img').each(function() {
						var image = $(this);
						
						image.hover(function() {
							if (imageButtonContainer.hasClass(unselectedClass)) {
								imageButtonContainer.removeClass(unselectedClass).addClass(unselectedHoverClass);
							}
							else {
								imageButtonContainer.removeClass(selectedClass).addClass(selectedHoverClass);
							}
						},function() {
							if (imageButtonContainer.hasClass(unselectedHoverClass)) {
								imageButtonContainer.removeClass(unselectedHoverClass).addClass(unselectedClass);
							}
							else {
								imageButtonContainer.removeClass(selectedHoverClass).addClass(selectedClass);
							}
						});
						
						// add references to parent objects
						this.imageListContainer = imageListContainer;
						this.imageButtonContainer = imageButtonContainer;
						
						//configure the click event
						var eventData =
						{
							"unselectedHoverClass"	: unselectedHoverClass,
							"selectedHoverClass"	: selectedHoverClass
						};
						
						image.bind("click.imageclick", eventData, function(e) { _this._handleClick(e); } );
						
					});
				});
			},
			
			
			/*
			=============================
			PRIVATE MEMBERS
			=============================
			*/
			
			//function used to handle the click of an imagebutton
			_handleClick : function (e)
			{
			    
				var _imageListContainer		= e.target.imageListContainer;
				var _imageButtonContainer	= e.target.imageButtonContainer;
				var _image					= $(e.target);
				var _unselectedHoverClass	= e.data.unselectedHoverClass;
				var _selectedHoverClass		= e.data.selectedHoverClass;
				var _imageCode				= _imageButtonContainer[0].imageCode;
			    
				//find the input that holds the values
				var _input = _imageListContainer.find('input');
			      
				if(_image.hasClass(_selectedHoverClass)) {
					_imageButtonContainer.removeClass(_selectedHoverClass).addClass(_unselectedHoverClass);
					_input.val(_input.val().replace(_imageCode, '').replace(/,,/, ','));
				}
				else {
					_imageButtonContainer.removeClass(_unselectedHoverClass).addClass(_selectedHoverClass);
					_input.val((_input.val() + ',' + _imageCode).replace(/,,/, ','));
				}
				_input.trigger("change");
			}
			
		}
	);