/*
	Copyright (c) 2006-2007, ePages GmbH
	All Rights Reserved.

	epages.cartridges.de_epages.design.widget.Toolsimpleinput $Revision: 1.21 $

*/

dojo.provide("epages.cartridges.de_epages.design.widget.ToolNewNavElement");
dojo.require("epages.widget.LocalizedWidget");
dojo.require("epages.widget.Modaldialog");
dojo.require("epages.cartridges.de_epages.design.widget.Navigationelement");
dojo.require("epages.cartridges.de_epages.design.widget.Navbarpreview");
dojo.require("epages.html");
dojo.require("epages.event");

epages.cartridges.de_epages.design.widget.ToolNewNavElementDialog = undefined;

dojo.declare(
	"epages.cartridges.de_epages.design.widget.ToolNewNavElement",
	[epages.widget.LocalizedWidget],
	{
		/**
		 * public properties
		 */
		objectId        : '', // style id
		navBar          : '', // navbar name
		languageId      : epages.vars.Locale.languageId,// language for snippet
		url             : '?',
		shopId          : epages.vars.SiteID, // shop identifier for feature request
		isAdvancedDesign : false, // If false, the context is QuickDesign. If true, nomen est omen.

		/**
		 * privat properties
		 */
		_disabledUserDefined : false,
		_isScrolling         : false, 				// flag - indcates that scrolling is active at the moment
		_modalDialog         : undefined,

		/**
		 * widget properties
		 */
		templatePath    : dojo.moduleUrl('epages.cartridges.de_epages.design.widget' , 'templates/ToolNewNavElement.html'),
		translationName : dojo.moduleUrl('epages.cartridges.de_epages.design.widget' , 'templates/translation'),
		imagePath       : epages.themeUrl('images'),
		navBarSelectTemplate: '<b class="RightPadding">{InsertElementToArea}</b>',

		insertToNavbar: function(/* string */ navbar, /* string */ alignment) {
			this.navBar = navbar;
			this.alignment = alignment || 'left';
			this.onOpenClick();
		},

		onOpenClick: function (/* event */ evt, /* string? */ highlightArea, /* string? */ selectElement) {
		// summary: open insert dialog (creates and initalizes the dialog content)
		// parameters
		//  evt            passed event object
		//  highlightArea  alias of navbar group e.g. Default (scroll to that area)
		//  selectElement  alias of element e.g. Default

			// hide NavbarSelection if exists
			var nsNode = $('NavbarSelection');
			if(nsNode) {
				nsNode.style.display="none";
			}
			if(this._modalDialog) {
				this._modalDialog.showInnerButtonBar();
			}

			//check UserDefinedNavBarElements Feature and UserDefinedNavBarElementCount
			var json = new epages.io.Json();
			var result = json.loadSync(this.url, {
				'ViewAction': 'JSONGet',
				'Attributes': 'UserDefinedNavBarElementCount',
				'ObjectID'  : this.objectId
			});
			if(!result.error){
				var userDefinedNavBarElementCount = result.data.UserDefinedNavBarElementCount;
			}
			var result = json.loadSync(this.url, {
				'ViewAction': 'JSONGetFeature',
				'Features'  : 'UserDefinedNavBarElements',
				'ObjectID'  : this.shopId
			});
			if(!result.error){
				var userDefinedNavBarElements = result.data.UserDefinedNavBarElements.max;
			}

			// create / open dialog widget
			var widgetFolder = epages.cartridges.de_epages.design.widget;
			if (widgetFolder.ToolNewNavElementDialog === undefined) {
				dojo.require('epages.io.json');
				var json = new epages.io.Json();
				var result = json.loadSync(this.url, {
					'ViewAction': 'JSONSnippet',
					'TemplateAction': 'NewNavElementSnippet',
					'TemplateLanguageID': this.languageId,
					'ObjectID': this.objectId
				});
				var w = new epages.widget.Modaldialog({
					'class' : 'ContentNoPadding',
					options:{
						title:   this.translate('CreateNewPageElement'),
						content: result.data.snippet,
						width : 810,
						height: 450,
						scroll: "hidden",  // y, x, scroll
						toolBox: this
					},
					buttons: [{
						label: this.translate('Insert'),
						cssClass: 'Active',
						buttonId : 'Insert',
						onclick: function() {
							this._modalDialogWidget.options.toolBox.onNewClick(this._modalDialogWidget.domNode);
						}
					}, {
						label: this.translate('Cancel'),
						onclick: function() {
							this._modalDialogWidget.options.toolBox.onAbortClick(this._modalDialogWidget.domNode);
						}
					}]
				});
				top.document.body.appendChild(w.domNode);
				widgetFolder.ToolNewNavElementDialog = w;
				this._modalDialog = w;

				// assign events to dialog elements
				var _this = this;
				var navElementLines = dojo.query(".ListRow.ItemLine", w.domNode);						// get all navelement types
				dojo.forEach(navElementLines, function(el) {
					var classname = el.className;
					if(!classname.match("FeatureDisabled")) {
						_this.connect(el, "onclick", "setSelectedNavElement");
					}
				});

				var selectElementLinks = dojo.query(".SelectNavElementGroup", w.domNode);		// get all navelement groups
				dojo.forEach(selectElementLinks, function(el) {
					_this.connect(el, "onclick", "evtSlideToNavElementGroup");
				});

				this.connect(window, "keypress", "onKeypress");
				dojo.subscribe('InsertElementNavbarpreview/select', this, '_selectNavbar');

			} else {
				widgetFolder.ToolNewNavElementDialog.options.toolBox=this;
			}

			// reset form (unselect all checkboxes)
			var newNavElementDialog = widgetFolder.ToolNewNavElementDialog;
			var newform=newNavElementDialog.containerNode.getElementsByTagName("form")[0];
			if(newform){
				newform.reset();
			}

			// highlight navelement group
			if(highlightArea) {
				var groupNo = epages.vars.navElementGroupMapping[highlightArea];
				if(groupNo) {
					this.slideToNavElementGroup(groupNo, 2000);
				}
			} else {
				this.slideToNavElementGroup(0, 500);
			}

			// preselect navelement
			var nodes = dojo.query("[ep_alias="+selectElement+"]", this._modalDialog.domNode);
			dojo.forEach(nodes, function(el) {
				epages.event.fire(el, "click");
				// wait because there is an animation
				window.setTimeout(function(){
					var offTop = el.offsetTop - 90; // 90 = head area hight
					var pNode = el.parentNode;
					offTop = (offTop > 0) ? offTop : 0;
					pNode.scrollTop = offTop;
				}, 100);
			});

			if(userDefinedNavBarElements != null && userDefinedNavBarElementCount != null){
				var userdefinedItems = $('SlideUserDefined');
				var elements = dojo.query("[ep_feature=UserDefinedNavBarElements]", userdefinedItems);

				if(userDefinedNavBarElementCount >= userDefinedNavBarElements){
					//disable
					this._disabledUserDefined = true;
					//disable UserDefined Navbar and add FeatureLimitReached Message
					for( var i=0,iLength=elements.length ; i<iLength ; i++ ){
						dojo.addClass(elements[i], 'FeatureDisabled');
						dojo.removeClass(elements[i], 'EnableHover');
						elements[i].title=this.translate('FeatureLimitReached');
					}
				} else if(this._disabledUserDefined == true){
					this._disabledUserDefined = false;
					//enable UserDefined Navbar and remove FeatureLimitReached message
					for( var i=0,iLength=elements.length ; i<iLength ; i++ ){
						dojo.removeClass(elements[i], 'FeatureDisabled');
						dojo.addClass(elements[i], 'EnableHover');
						elements[i].title='';
					}
				}
			}

			//need Timeout for Position error to avoid wrong position of dialog
			window.setTimeout(dojo.hitch(this,function(){
				newNavElementDialog.show();
			}),1);

		},

		onAbortClick: function(node) {
			this._hideDialog();
		},

		_showNavBarSelectLayer: function() {
			var nsNode = $('NavbarSelection');
			nsNode.style.display="";
			this._modalDialog.hideInnerButtonBar();
		},

		_selectNavbar: function(opt) {
			this.navBar = opt.navbar;
			this._insertNewElement();
		},

		_hideDialog: function() {
			this._modalDialog.hide();
			var nsNode = $('NavbarSelection');
			nsNode.style.display="none";
			this._modalDialog.showInnerButtonBar();
		},

		_insertNewElement : function() {
			this._hideDialog();
			dojo.publish("uimessage/startBusy", ["ToolNewNavElement", this.translate("InsertingPageElement")]);
			var newNavElementDialog = epages.cartridges.de_epages.design.widget.ToolNewNavElementDialog;
			var targetNavBar = this.navBar;
			if(newNavElementDialog.navBarSelectorNode !== undefined && this.navBar == '' && newNavElementDialog.navBarSelectorNode.value){
				targetNavBar = newNavElementDialog.navBarSelectorNode.value;
			}
			var widgets = [];
			var n = epages.cartridges.de_epages.design.widget.Navigation;

			// create new navelement widget
			var el = $('NavelementsAddID');
			var w = n.createElement(el.value, this.objectId, targetNavBar, undefined, this.alignment || 'left', this.isAdvancedDesign ? true : false);
			if(w == false) {
				console.warn('Navelement',this.id,'can not create Element');
				return false;
			} else {
				var starNode = $('ItemStarContainer'+el.value);
				if (starNode) {
					starNode.innerHTML="*";
				}
			}
			if (w.isCustomizable){
				widgets.push(w);
			}

			if (widgets.length == 1){
				widgets[0].onclickEditNode();
			}
			dojo.publish("uimessage/stopBusy", ["ToolNewNavElement"]);
			dojo.publish("ToolNewNavElement/onNewClickFinshed",[]);
		},

		onNewClick:function (node) {
			if(this.navBar != "") {
				this._insertNewElement();
			} else {
				this._showNavBarSelectLayer();
			}
		},

		setSelectedNavElement: function(/* event or string */ evt) {
		// summary: set navelementtype id to hidden input
			var newId = (evt != "") ? evt.currentTarget.getAttribute("ep_objectId") : "";			// event or empty string
			if(evt) {
				dojo.stopEvent(evt);	// don't pass click to body to avoid cssfix updateStyle
			}
			var classname = "";
			if(evt) {
				classname = evt.currentTarget.className;
			}

			var hiddenInputNode = $('NavelementsAddID');
			var oldId = hiddenInputNode.value;
			if(newId == oldId || classname.match("FeatureDisabled")) {  // deselect if its the same value again or feature not allowed
				newId="";
			}

			hiddenInputNode.value=newId;

			var pesaNode = $('PageElementsScrollArea');
			var selNodes = dojo.query(".Selected", pesaNode);

			//remove old selection
			if(selNodes) {
				dojo.forEach(selNodes, function(node) {
					dojo.removeClass(node, "Selected");
				});
			}

			if(newId != "") {
				var newSelectedDiv = $('ListRowPageElement_'+newId);
				dojo.addClass(newSelectedDiv, "Selected");
				this._modalDialog.enableButton("Insert");
			} else {
				this._modalDialog.disableButton("Insert");
			}
		},

		slideToNavElementGroup: function(/* integer */ itemNo , /* integer? */ delay) {
		//summary: slides the screen to specfied page element category
			this._isScrolling = true;
			if(!delay) {
				delay=0;
			}

			//reset selection selection display
			this.setSelectedNavElement("");

			var x = itemNo * 810 * -1;
			var fsblNode = $('FancySidebarLinks');
			var selNodes = dojo.query(".Selected", fsblNode);
			for(var el in selNodes) {
				dojo.removeClass(selNodes[el], "Selected");
			}

			var node = $('SelectNavElementGroup'+itemNo);
			if(node) {
				dojo.addClass(node, "Selected");
			}

			var pesaNode = $('PageElementsScrollArea');
			var listWrapperNodes = dojo.query(".SlideListContent",pesaNode);

			dojo.forEach(listWrapperNodes, function(node) {
				node.style.overflowY="hidden";
			});
			var _this = this;
			dojo.fx.slideTo({
				node: $('PageElementsScrollArea'),
				left: x,
				top: "0",
				unit:"px",
				delay: delay,
				duration: 650,
				easing: dojo.fx.easing.quadOut,
				onEnd: function() {
					dojo.forEach(listWrapperNodes, function(node) {
						node.style.overflowY="auto";
					});
					_this._isScrolling = false;
				}
			}).play();
		},

		evtSlideToNavElementGroup: function(evt)  {
		// summary: catch event props and then start to slide
			dojo.stopEvent(evt);	// don't pass click to body to avoid cssfix updateStyle
			if(!this._isScrolling) {
				var node = evt.currentTarget;
				itemNo = node.getAttribute("ep_groupcount");
				this.slideToNavElementGroup(itemNo);
			}
		},


		onKeypress: function(evt) {
		// summary: keypress event handler
			if(evt.keyCode == dojo.keys.ESCAPE) {		// deselect on ESCAPE
				this.setSelectedNavElement("");
			}
		}

});