Type.registerNamespace("Aurigma");

Aurigma.FontDropDownList = function(element) {
	Aurigma.FontDropDownList.initializeBase(this, [element]);
	this._optionWidth = 0;
	this._optionHeight = 0;
	this._fontsSerialized = "";
	this._background = "";
	this._psdEditorId = null;
	this._inputId = null;
	this._containerId = null;
	
	this._listShowDelegate = null;
	this._listClickDelegate = null;
	this._cancelButtonClickDelegate = null;
	this._okButtonClickDelegate = null;
	
}

Aurigma.FontDropDownList.prototype = {

	_onListShow: function(e) {
		var popup = $get(this._popupId);
		var input = $get(this._inputId);
		if ((e.target == this.get_element()) || (e.target == input)) {
			this._createMenu();
		}
	},
	
	get_value: function() {
		var input = $get(this._inputId);
		return input.value;
		return "";
	},
	
	set_value: function(v) {
		var input = $get(this._inputId);
		input.value = v;
		$find(this._psdEditorId)._testProperties(false);
	},
	
	_onListClick: function(e) {
		var fontName = null;
		if (e.target.className == "Container") {
			fontName = e.target.firstChild;
		}
		if (e.target.className == "FontName") {
			fontName = e.target;
		}
		if (e.target.className == "FontImage") {
			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);
	},
	
	_onOKClick: function() {
		this._destroyMenu(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 = "FontDropDownPopup";
		
		mpBounds = Sys.UI.DomElement.getBounds($get(pe._modalDialogPanelId));
		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";
		
		var fontList = document.createElement("div");
		fontList.className = "FontList";
		
		for (i = 0; i < this._fonts.length; i++) {
			
			var container = document.createElement("a");
			var fontName = document.createElement("div");
			var fontImage = document.createElement("div");
			(this._fonts[i] == this.get_value())
			container.className = (this._fonts[i] == this.get_value()) ? "ContainerSelected" : "Container";
			container.href = "#void";
			fontName.className = "FontName";
			fontImage.className = "FontImage";
			fontName.innerHTML = this._fonts[i];
			fontImage.style.width = this._optionWidth + "px";
			fontImage.style.height = this._optionHeight + "px";
			fontImage.style.backgroundImage = "url(" + this._background + ")";
			fontImage.style.backgroundPosition = "0px " + -(this._optionHeight * i) + "px";
			fontImage.style.backgroundRepeat = "no-repeat";
			fontName = container.appendChild(fontName);
			fontImage = container.appendChild(fontImage);
			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);
	},
	
	_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);
				}
				$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._listShowDelegate) {
			this._listShowDelegate = Function.createDelegate(this, this._onListShow);
			$addHandler(el, 'click', this._listShowDelegate);
		}
		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);
		
		if (this._listShowDelegate) {
			$removeHandler(el, 'click', this._listShowDelegate);
			this._listShowDelegate = null;
		}
		
		this._listClickDelegate = null;
		this._cancelButtonClickDelegate = null;
		this._okButtonClickDelegate = null;
	},

	initialize: function() {
		Aurigma.FontDropDownList.callBaseMethod(this, 'initialize');
		this._fonts = Sys.Serialization.JavaScriptSerializer.deserialize(this._fontsSerialized);
		this._initializeOptions();
	},
	
	dispose: function() {
		this._disposeOptions();
		Aurigma.FontDropDownList.callBaseMethod(this, 'dispose');
	}
}

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