// JScript File

Type.registerNamespace("Aurigma");

Aurigma.ImageDropDownList = function(element) {
	Aurigma.ImageDropDownList.initializeBase(this, [element]);
	this._optionWidth = 0;
	this._optionHeight = 0;
	this._imagesKeysSerialized = "";
	this._imagesValuesSerialized = "";
	this._imagesPreviewsSerialized = "";
	this._psdEditorId = null;
	this._inputId = null;
	this._containerId = null;
	this._value = "";
	
	this._listShowDelegate = null;
	this._listClickDelegate = null;
	this._cancelButtonClickDelegate = null;
	this._okButtonClickDelegate = null;
}

Aurigma.ImageDropDownList.prototype = {
	
	get_key: function() {
		return this._key;
	},
	
	set_key: function(v) {
		this._key = v;
	},
	
	get_value: function() {
		return this._value;
	},
	
	set_value: function(v) {
		this._value = v;
	},
	
	show: function() {
		this._createMenu();
	},
	
	_raiseEvent : function (name, args) {

		/// <param name="name" type="String" />
		/// <param name="args" />
		var h = this.get_events().getHandler(name);
		if (h) {
			if (args == undefined) {
				args = Sys.EventArgs.Empty;
			}
			h(this, args);
		}
	},
	
	add_closed: function(handle) {
		this.get_events().addHandler("closed", handle);
	},
	
	remove_closed: function(handle) {
		this.get_events().removeHandler("closed", handle);
	},
	
	_onListClick: function(e) {
		var fontName = null;
		if (e.target.className == "Container") {
			fontName = e.target.firstChild;
		}
		if (e.target.className == "ImageFileName") {
			fontName = e.target;
		}
		if ((e.target.className == "Thumbnail") || (e.target.className == "ThumbnailNoImage")) {
		    fontName = e.target.parentNode.firstChild;
		}
		if (fontName)
		{
			var popup = $get(this._popupId);
			var fontList = popup.firstChild;
			for (var i = 0; i < fontList.childNodes.length; i++){
				if (fontList.childNodes[i].className == "ContainerSelected")
					fontList.childNodes[i].className = "Container";					
				if ((fontList.childNodes[i].className == "Container") && (fontList.childNodes[i].firstChild.innerHTML == fontName.innerHTML)) {
					fontList.childNodes[i].className = "ContainerSelected";
				}
			}
		}
		return true;
	},
	
	_onCancelClick: function() {
		this._destroyMenu(false);
		this._raiseEvent("closed", false);
	},
	
	_onOKClick: function() {
		this._destroyMenu(true);
		this._raiseEvent("closed", true);
	},
	
	_createMenu: function() {
		var el = this.get_element();
		var i;
		
		var pe = $find(this._psdEditorId);
		pe._showModalDialogPanel();
		
		// create popup
		var popup = document.createElement("div");
		popup.id = this._popupId;
		popup.className = "ModalDropDownPopup";
		
		mpBounds = Sys.UI.DomElement.getBounds($get(pe._modalDialogPanelId));
		// TODO: remove jQuery
		popup.style.top = Math.round(mpBounds.y + mpBounds.height / 2 - jQuery('#cPcolorPicker').height() / 2) + "px";
		popup.style.left = Math.round(mpBounds.x + mpBounds.width / 2 - jQuery('#cPcolorPicker').width() / 2) + "px";
		
		if (this._imagesKeys.length > 0) {
			this._key = this._imagesKeys[0];
			this._value = this._imagesValues[0];
		}
		var fontList = document.createElement("div");
		fontList.className = "List";
		for (i = 0; i < this._imagesKeys.length; i++) {
			var container = document.createElement("a");
			var fontName = document.createElement("div");			
			container.className = (this._imagesValues[i] == this.get_value()) ? "ContainerSelected" : "Container";
			container.href = "#void";
			var thumbnail;
			if (this._imagesPreviews[i] != "") {
			    thumbnail = document.createElement("img");
			    thumbnail.className = "Thumbnail";
			    thumbnail.src = this._imagesPreviews[i];
			}
			else {
			    thumbnail = document.createElement("div");
			    thumbnail.className = "ThumbnailNoImage";
			}
			fontName.className = "ImageFileName";
			fontName.innerHTML = this._imagesValues[i];
			fontName.idKey = this._imagesKeys[i];
			fontName = container.appendChild(fontName);
			thumbnail = container.appendChild(thumbnail);
			container = fontList.appendChild(container);
			
			$addHandler(container, 'mousedown', this._listClickDelegate);
		}
		
		fontList = popup.appendChild(fontList);
		
		var okButton = document.createElement("div");
		okButton.className = "OKButton";
		okButton.innerHTML = "OK";
		okButton = popup.appendChild(okButton);
		
		var cancelButton = document.createElement("div");
		cancelButton.className = "CancelButton";
		cancelButton.innerHTML = "Cancel";
		cancelButton = popup.appendChild(cancelButton);
		
		$addHandler(cancelButton, 'click', this._cancelButtonClickDelegate);
		$addHandler(okButton, 'click', this._okButtonClickDelegate);
		
		popup = document.body.appendChild(popup);
		
		var bounds = Sys.UI.DomElement.getBounds(fontList);
		if (bounds.height > 150) {
			fontList.style.height = "150px";
		}
	},
	
	_destroyMenu: function(saveState) {
		var popup = $get(this._popupId);
		var fontList = popup.firstChild;
		
		var i;
		for (i = 0; i < fontList.childNodes.length; i++) {
			if (fontList.childNodes[i].className == "Container" || fontList.childNodes[i].className == "ContainerSelected") {
				if ((fontList.childNodes[i].className == "ContainerSelected") && (saveState)){
					this.set_value(fontList.childNodes[i].firstChild.innerHTML);
					this.set_key(fontList.childNodes[i].firstChild.idKey);
				}
				$removeHandler(fontList.childNodes[i], 'mousedown', this._listClickDelegate);
			}
		}
		
		// remove OK Cancel click handlers.
		$removeHandler(popup.lastChild, 'click', this._cancelButtonClickDelegate);
		popup.removeChild(popup.lastChild);
		$removeHandler(popup.lastChild, 'click', this._okButtonClickDelegate);
		
		popup.parentNode.removeChild(popup);
		
		var pe = $find(this._psdEditorId);
		pe._hideModalDialogPanel();
	},

	_initializeOptions: function() {
		var el = this.get_element();
		
		//var input = $get(this._inputId);
		this._popupId = this.get_id() + "popup";
		//input.onkeyup = input.onkeydown = input.onkeypress = function() { return false; };

		if (!this._listClickDelegate) {
			this._listClickDelegate = Function.createDelegate(this, this._onListClick);
		}
		if (!this._okButtonClickDelegate) {
			this._okButtonClickDelegate = Function.createDelegate(this, this._onOKClick);
		}
		
		if (!this._cancelButtonClickDelegate) {
			this._cancelButtonClickDelegate = Function.createDelegate(this, this._onCancelClick);
		}
	},
	
	_disposeOptions: function() {
		var el = this.get_element();
		var input = $get(this._inputId);
		
		this._listClickDelegate = null;
		this._cancelButtonClickDelegate = null;
		this._okButtonClickDelegate = null;
	},

	initialize: function() {
		Aurigma.ImageDropDownList.callBaseMethod(this, 'initialize');
		this._imagesKeys = Sys.Serialization.JavaScriptSerializer.deserialize(this._imagesKeysSerialized);
		this._imagesValues = Sys.Serialization.JavaScriptSerializer.deserialize(this._imagesValuesSerialized);
		this._imagesPreviews = Sys.Serialization.JavaScriptSerializer.deserialize(this._imagesPreviewsSerialized);
		this._initializeOptions();
	},
	
	dispose: function() {
		this._disposeOptions();
		Aurigma.ImageDropDownList.callBaseMethod(this, 'dispose');
	}
}

Aurigma.ImageDropDownList.registerClass("Aurigma.ImageDropDownList", Sys.UI.Control);