/*
	Copyright (c) 2006-2007, ePages GmbH
	All Rights Reserved.
*/
dojo.provide("epages.cartridges.de_epages.design.widget.Tooliconset");

dojo.require("epages.widget.LocalizedWidget");
dojo.require('epages.widget.Modaldialog');
dojo.require('epages.io.json');
dojo.require('epages.html');

dojo.declare(
	"epages.cartridges.de_epages.design.widget.Tooliconset",
	[epages.widget.LocalizedWidget],
	{
		/**
		 * public properties
		 */
		url             : '?',
		objectId        : epages.vars.ObjectID,
		languageId      : epages.vars.Locale.languageId,
		iconset         : '',
		undoWidget      : undefined,
		undoWidgetId    : 'undoWidget',
		objectId        : '',
		imagePath       : epages.themeUrl('images'),

		/**
		 * private properties
		 */
		_dialogWidget   : undefined,
		_htmlUndo       : undefined,
		_oldIconset     : undefined,
		//these are the css-classes that have an icon from the iconset as background-image
		_cssClassesWithIcon : {
			'LinkPrintView'   : 'ico_s_printer.png',
			'LinkBasket'      : 'ico_s_basket.png',
			'Action'          : 'img_actionlink.png',
			'TreeNode'        : {
				'NoSubCategories'       : 'img_tree_empty.png',
				'HasSubCategories'      : 'img_tree_plus.png',
				'HasSubCategoriesMinus' : 'img_tree_minus.png'
			}
		},
		/**
		 * constants
		 */
		 //css class for elements that have an icon from the iconset inside
		CSSCLASS: 'Icon',

		/**
		 * widget properties
		 */
		templateType       : 'default',
		defaultTemplateType: 'default',
		templatePath       : dojo.moduleUrl('epages.cartridges.de_epages.design.widget','templates/Tooliconset.html'),
		translationName    : dojo.moduleUrl('epages.cartridges.de_epages.design.widget','templates/translation'),
		_templateMapping: {
			'default' : {templatePath: dojo.moduleUrl('epages.cartridges.de_epages.design.widget', 'templates/Tooliconset.html')},
			'xlicon'  : {templatePath: dojo.moduleUrl('epages.cartridges.de_epages.design.widget', 'templates/Tooliconsetxlicon.html')}
		},

		postMixInProperties: function() {
			this._templateDirectory = dojo.moduleUrl('epages.cartridges.de_epages.design.widget','templates');
			this.inherited("postMixInProperties", arguments);
			if(epages.vars.Iconset){
				this.iconset = epages.vars.Iconset;
			}else{
				console.warn("epages.vars.Iconset not defined in "+this.declaredClass);
			}
		},

		postCreate  : function() {
			this.inherited("postCreate", arguments);
			this.connect(this.iconNode,'onclick', '_onClickIconNode');
			this.undoWidget = $$(this.undoWidgetId);
			if (this.undoWidget === undefined) {
				console.warn(this.id+' : undo widget not found in '+this.declaredClass);
			} else {
				this._htmlUndo = this.undoWidget.getUndoObject();
				this._htmlUndo.setDefaultValue(this.hiddenInput);
				this.connect(this.hiddenInput,'onchange', '_onChangeHiddenInput');
			}
		} ,

		_createDialog:function(){
			 var json = new epages.io.Json();
			var params = {
				'ViewAction': 'JSONSnippet',
					'TemplateAction': 'IconsetSnippet',
					'TemplateLanguageID': this.languageId,
					'ObjectID': this.objectId,
					'TemplateLanguageID': this.languageId
			};
			var output = json.loadSync(this.url, params);
			var me = this;
			var buttons = [{
				label: this.translation.get("Apply"),
				cssClass: 'Active',
				onclick: function(evt) {
					// get Undo-Widget
					var u = $$(me.undoWidgetId);

					if(u){
						// if already changes was made -> open ConfirmSaveDialog
						if(u.existsChanges()){
							if(!me._createConfirmSaveWidget){
								 me._createConfirmSaveDialog();
							}

							me._dialogWidgetTarget = evt.currentTarget;
							me._createConfirmSaveWidget.show();
						}else{
							this._modalDialogWidget.hide();
							me._onApplyClick();
						}
					}else{
						this._modalDialogWidget.hide();
						me._onApplyClick();
					}

				}
			},
			{
				label: this.translation.get("Cancel"),
				onclick: function() {
					this._modalDialogWidget.hide();
				}
			}];
			this._dialogWidget = new epages.widget.Modaldialog({
				id: "Tooliconset_DialogWidget",
				options:{
					title : this.translation.get("ChangeIconset"),
					width : 620,
					height: 200,
					content: output.data.snippet
				},
				buttons : buttons
			});
			document.body.appendChild(this._dialogWidget.domNode);

			var nodeList = dojo.query('img',this._dialogWidget.domNode);
			var img = new Image();
				img.onload = dojo.hitch(this,function(){ this._dialogWidget.layout(); });
				img.src = dojo.attr( nodeList[nodeList.length-1] , 'src');
			//we need the timeout to avoid a wrong position
			window.setTimeout(function(){
				me._dialogWidget.layout();
			},1);
		},

		_createConfirmSaveDialog: function(){
			var messageWidget = new epages.widget.Message({
				headline:this.translation.get("SaveQuestion"),
				message: this.translation.get("ChangeNavbarsDescription"),
				sizeClass:"Large",
				typeClass:"Warning"
			});

			var me =this;
			var buttons = [{
				label: this.translation.get("Save"),
				cssClass: 'Active',
				onclick: function() {
					me._onApplyClick();
					me._modalDialogWidget.hide();
					me._createConfirmSaveWidget.hide();
				}
			},
			{
				label: this.translation.get("Cancel"),
				onclick: function() {
					me._undoChange(me._dialogWidgetTarget);
				}
			}];
			this._createConfirmSaveWidget = new epages.widget.Modaldialog({
				id: "Designtoolcontroller_DialogWidget",
				options:{
					title : this.translation.get("ChangeOnNavbars"),
					width : 400,
					height: 120,
					content: messageWidget
				},
				buttons : buttons

			});

			document.body.appendChild(this._createConfirmSaveWidget.domNode);
		},

		_onClickIconNode: function(){
			if(!this._dialogWidget){
				this._createDialog();
			}
			this._dialogWidget.show();
		},

		_onApplyClick:function(){
			var newIconset = '';
			var radioButtons = document.getElementsByName('LayoutIconSet');

			for( var i=0,iLength=radioButtons.length ; i<iLength ; i++ ){
				if(radioButtons[i].checked){
					newIconset = radioButtons[i].value;
				}
			}

			if(newIconset != '' && newIconset != this.iconset){
				if(this.undoWidget){
					this.hiddenInput.value = newIconset;
					this._htmlUndo.addInput(this.hiddenInput);
				}
				this._oldIconset = this.iconset;
				this.iconset = newIconset;
				this._changeIconsInPage(this._oldIconset,this.iconset);
				dojo.publish("Tooliconsset/IconsetChanged",[]);
			}

			// trigger click on save button
			epages.event.fire(jq('#undoWidget').find("button.SaveButton")[0], 'click');
		},

		_changeIconsInPage:function(oldIconset,newIconset){
			var iframeDoc = $('EmbeddedStorefront').contentDocument || $('EmbeddedStorefront').contentWindow.document;
			var iframeWin = $('EmbeddedStorefront').contentWindow;
			for(var el in this._cssClassesWithIcon){
				var cssClass = el;
				var elementsArray = iframeWin.epages.html.getElementsByClassName(cssClass,iframeDoc);
				for( var i=0,iLength=elementsArray.length ; i<iLength ; i++ ){
					if(typeof this._cssClassesWithIcon[cssClass] == 'string'){
						var icon = this._cssClassesWithIcon[cssClass];
						if (dojo.style(elementsArray[i],'background-image') !== 'none') {
							elementsArray[i].style.cssText = 'background-image: url('+epages.vars.StoreRoot+'/'+newIconset+'/'+icon+') !important';
						}
					}
					else if(typeof this._cssClassesWithIcon[cssClass] =='object'){
						for(var elm in this._cssClassesWithIcon[cssClass]){
							var cssSubClass = elm;
							var subIcon = this._cssClassesWithIcon[cssClass][elm];
							if(dojo.hasClass(elementsArray[i],cssSubClass)){
								elementsArray[i].style.cssText = 'background: url('+epages.vars.StoreRoot+'/'+newIconset+'/'+subIcon+')0px 3px no-repeat !important';
							}
						}
					}
				}
			}
			var elementsArray = iframeWin.epages.html.getElementsByClassName(this.CSSCLASS, iframeDoc);
			for( var i=0,iLength=elementsArray.length ; i<iLength ; i++ ){
				if(elementsArray[i].filters) {
					elementsArray[i].filters(0).src = elementsArray[i].filters(0).src.replace(oldIconset, newIconset);
				}else{
					elementsArray[i].style.cssText = "background-image: " + $('EmbeddedStorefront').contentWindow.dojo.getComputedStyle(elementsArray[i]).backgroundImage.replace(oldIconset, newIconset) + " !important";
				}
			}
		},

		_onChangeHiddenInput:function(evt){
			var iconset = evt.currentTarget.value;
			this._oldIconset = this.iconset;
			this.iconset = iconset;
			this._changeIconsInPage(this._oldIconset,this.iconset);
		}
	}
);