Ext.namespace("Flowz");

/**
 * Custom dialog to show a modal message prompt.
 *
 * @param config
 *  - width (optional - the width of the prompt window)
 *  - height (optional - the height of the prompt window)
 *  - mask (optional - set to false to disable masking the body)
 *  - saveLabel (optional the save button label)
 *  - onSave (optional - if a function, skips the close button and becomes a cancel/save setup)
 *  - onShow (function to call when showing)
 *  - onHide (function to execute when closing)
 *
 *  - items [{
 * 		label: 'text', // the label of the button shown on the first page
 * 		icon: 'url',  // the icon next to the label
 * 		html: mixed: el/string // the html page to show when the button is clicked
 *  }]
 */
Flowz.BranchPrompt = function(config) {
	this.mask = true;
    Ext.apply(this, config);
    Flowz.BranchPrompt.superclass.constructor.call(this, config);
};

Flowz.BranchPrompt = Ext.extend(Flowz.BranchPrompt, Flowz.Prompt, {
	width: 500,
	height: 300,
	menuLabel: 'Back',
	closeLabel: 'Close',
	
	show: function() {
        if(!this.el) {
			this.id = Ext.id();
            this.el = Ext.DomHelper.append(Ext.getBody(), {
                tag: 'div', id: this.id, cls: 'flowz-prompt x-hidden'
            }, true);

			this.viewport = Ext.DomHelper.append(this.el, {
				cls: 'flowz-prompt-viewport'
			}, true);

			this.viewport.setSize(this.width, this.height);
			
			this.menu = Ext.DomHelper.append(this.viewport, {
				cls: 'flowz-prompt-viewport-slide'
			}, true);

			this.menu.setSize(this.width, this.height);

			// IE is overflowing the menu page so we get a scrollbar.  Hack it up!
			var h1style = "";
			var pstyle = "";
			if(Ext.isIE) {
				h1style = "font-size: .9em !important; line-height: .9em !important; margin-bottom: 0 !important; padding-bottom: 3px !important;";
				pstyle = "font-size: .8em !important; line-height: .8em !important; margin-bottom: 0 !important; padding-bottom: 10px !important;";
			}
			Ext.DomHelper.append(this.menu, { tag: 'h1', html: this.menuTitle, style: h1style });
			Ext.DomHelper.append(this.menu, { tag: 'p', html: this.menuCaption, style: 'margin-bottom: 16px !important; ' + pstyle });


			var extra = "";
			if(this.items.length > 4)
				extra = " multi";

			// Note: this didn't originally declare a style: float: left because that was taken care of in the loop
			// But Firefox isn't picking up the float after the fact (in the loop). It is really weird. (NOTE:! Attempting to fix with the extra class "multi" above)
			var col = Ext.DomHelper.append(this.menu, { tag: 'div', cls: 'flowz-prompt-menu-column' + extra/*, style: 'float: left'*/}, true);
			for(var i = 0; i < this.items.length; i++) {
				if(i == 0 && i < 4) {
					col.applyStyles("margin-top: 50px;");
				}
				if(i > 0 && i % 4 == 0) {
					//hack hack hack: we know we only have two columns right now so adding margin will only affect the first one.
					col.applyStyles("margin-left: 100px; float: left;");
					col = Ext.DomHelper.append(this.menu, { tag: 'div', cls: 'flowz-prompt-menu-column' + extra/*, style: 'float: left'*/}, true);
				}
				var menuItem = Ext.DomHelper.append(col, {
					cls: 'flowz-prompt-menu-choice', html: this.items[i].label, children: [
						{ tag: 'img', style: 'vertical-align: middle', alt: this.items[i].label, src: this.items[i].icon },
						{ tag: 'span', html: " " + this.items[i].label }
					]
				}, true);

				this.items[i].el = Ext.DomHelper.append(this.viewport, {
					cls: 'flowz-prompt-viewport-slide x-hidden', width: this.width, height: this.height
				}, true);

				this.items[i].el.setBounds(this.viewport.getWidth(), 0, this.width, this.height);
				
				this.items[i].el.removeClass("x-hidden");
				this.items[i].index = i;
				this.items[i].prompt = this;

				Ext.DomHelper.append(this.items[i].el, this.items[i].html);

				// do the slide...
				menuItem.on('click', function() {
					//alert("clicked: " + this.label);
					this.prompt.selected = this.index;
					this.el.setTop(0);
					this.el.setLeft(this.prompt.viewport.getWidth());
					this.prompt.menu.syncFx();
					this.el.syncFx();
					this.prompt.menu.slideOut('l', { duration: .3});
					this.el.setTop(0);
					this.el.setLeft(0);
					this.el.slideIn('r', { duration: .3});
					this.prompt.backButton.show();
				}, this.items[i]);

				var input = Ext.DomQuery.selectNode("input[type='text']", this.items[i].el.dom);
				var submit = Ext.DomQuery.selectNode("input[type='submit']", this.items[i].el.dom);
				if(input) {
					input = Ext.get(input);
					if(submit) {
						submit = Ext.get(submit);
						input.on('keypress', function(event) {
							if(event.getKey() == Ext.EventObject.RETURN || event.getKey() == Ext.EventObject.ENTER) {
								this.submit.dom.click();
							} else {
								//console.log("keypress: " + event);//this.submit.dom.click();
							}
						}, {input: input, submit: submit});
					}
				}

			}

			this.statusId = Ext.id();
			if(this.onSave) {
				var saveId = Ext.id();
				var cancelId = Ext.id();
				if(!this.saveLabel)
					this.saveLabel = "Save";
				this.buttonBar = Ext.DomHelper.append(this.el, {
					cls: 'button-bar', children: [
						{ tag: 'span', html: this.saveLabel, cls: 'button right highlight', id: saveId },
						{ tag: 'span', html: 'Cancel', cls: 'button right', id: cancelId },
						{ tag: 'span', id: this.statusId, cls: 'status' },
						{ tag: 'div', style: 'clear:both;' }
					]
				}, true);
				var save = Ext.get(saveId);
				save.on('click', this.onSave, this);
				var cancel= Ext.get(cancelId);
				cancel.on('click', this.hide, this);
			} else {
				var buttonId = Ext.id();
				var backId = Ext.id();
				this.buttonBar = Ext.DomHelper.append(this.el, {
					cls: 'button-bar', children: [
						{ tag: 'span', html: this.closeLabel, cls: 'button right highlight', id: buttonId },
						{ tag: 'span', html: this.menuLabel, cls: 'button', id: backId },
						{ tag: 'span', id: this.statusId, cls: 'status' },
						{ tag: 'div', style: 'clear:both;' }
					]
				}, true);
				var button = Ext.get(buttonId);
				button.on('click', this.hide, this);

				this.backButton = Ext.get(backId);
				this.backButton.hide();
				this.backButton.on('click', this.showMenu, this);
			}
        }

		if(this.width) {
			this.el.setWidth(this.width + 30);
		}
		if(this.height) {
			this.el.setWidth(this.width + 50);
		}

		this.center();
        this.el.removeClass("x-hidden");

		if(Ext.isIE) {
			// Oh IE, how I hate thee
			this.buttonBar.show();
			this.viewport.show();
		}


		if(this.mask)
			Ext.getBody().mask();

		this.open = true;

        if(this.onShow) {
            this.onShow();
        }
    },

	hide: function() {
		this.viewport.hide();
		this.menu.hide();
		for(var i = 0; i < this.items.length; i++) {
			this.items[i].el.hide();
		}
		this.backButton.hide();
		Flowz.BranchPrompt.superclass.hide.call(this);
	},

	showMenu: function() {
		var el = this.items[this.selected].el;

		this.menu.setTop(0);
		this.menu.setLeft(-1 * this.viewport.getWidth());

		this.menu.syncFx();
		el.syncFx();

		el.slideOut('r', { duration: .3});
		this.menu.setTop(0);
		this.menu.setLeft(0);
		this.menu.slideIn('l', { duration: .3});
		this.backButton.hide();
	}

});