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

	epages.cartridges.de_epages.design.widget.Toolbuttonimages $Revision: 1.26 $

*/

dojo.provide("epages.cartridges.de_epages.design.widget.Toolbuttonimages");
dojo.require("epages.widget.LocalizedWidget");
dojo.require("epages.lang.hitch");
dojo.require('epages.event');
dojo['require']("epages.cartridges.de_epages.mediagallery.widget.Toolmediagallery");
dojo.require('epages.widget.Tooltip');
dojo.require("epages.widget.FormElement");

dojo.declare(
	"epages.cartridges.de_epages.design.widget.Toolbuttonimages",
	[epages.widget.LocalizedWidget], {
		/**
		 * public properties
		 */
		label						: "",
		fileNameLeft		: "",
		imageSetHidden	: "",
		imagesetLeft		: "",
		imagesetRight		: "",
		imageTiling			: "",
		imageType				: "",
		navBar					: "",
		objectId				: epages.vars.ObjectID,
		slaveWidgetId		: "",
		slaveWidget			: undefined,
		/**
		 * widget properties
		 */

		widgetType        : "Toolbuttonimages",
		templatePath      : dojo.moduleUrl('epages.cartridges.de_epages.design.widget' , 'templates/Toolbuttonimages.html'),
		translationName   : dojo.moduleUrl('epages.cartridges.de_epages.design.widget' , 'templates/translation'),
		imagePath         : epages.themeUrl('images'),
		widgetsInTemplate : true,

		// override
		postCreate	: function() {
		 // summary: initalize file upload widget and other background image related events
			this.inherited("postCreate", arguments);

			// pass callback function to toolMediaGalleryWidget
			var me=this;
			this.toolMediaGalleryWidget.onApply = function(pathFromSite) {
				me.setFileName(pathFromSite);
			};

			this.tilingCheckboxNode = new epages.widget.FormElement({}, this.tilingCheckboxNode).elementNode;

			// init events
			this._appendEvents();
		},

		startup: function() {
			this.inherited("startup", arguments);
			if(this.slaveWidgetId != "") {
				this.slaveWidget=$$(this.slaveWidgetId);
				if(this.slaveWidget === undefined) {
					console.warn('SlaveWidget with id ="'+this.slaveWidgetId+'" not found in '+this.declaredClass);
				}
				else {
					dojo.subscribe(this.slaveWidgetId+'/filenamechanged', this, '_showButtons');
				}
			} else {
					console.warn('No slaveWidgetId in '+this.declaredClass+'. Slave functions will be ignored.');
				}

			// init buttons
			this._showButtons();
		},

		setFileName: function(pathFromSite){
			this.fileNameLeftNode.value = pathFromSite;
			epages.event.fire(this.fileNameLeftNode, "change");
		},

		/**
		 * private methods
		 */
		_appendEvents: function() {
		// summary: append onclick and onchange events to buttons and inputs

			// add button events
			this.connect(this.clearImageLeftNode,   'onclick', '_clearImageLeft');
			this.connect(this.clearImageSetNode,    'onclick', '_clearImageSet');
			this.connect(this.restoreImageSetNode,  'onclick', '_restoreImageSet');
			this.connect(this.tilingCheckboxNode,		'onclick', '_toggleImageTiling');

			// add input events (listen to value changes and update display)
			this.connect(this.fileNameLeftNode,			'onchange', '_showButtons');
			this.connect(this.imageSetHiddenNode,  	'onchange', '_showButtons');
			this.connect(this.imageTilingNode,  		'onchange', '_showButtons');
		},

		_clearImageLeft: function(evt) {
		// summary: clears the value of left image file name input and throw change event
			this.fileNameLeftNode.value="";
			epages.event.fire(this.fileNameLeftNode,"change");
		},

		_clearImageSet: function(evt) {
		// summary: set value of "imageSetHidden" input to "1" and throw change event
			this.imageSetHiddenNode.value="1";
			epages.event.fire(this.imageSetHiddenNode,"change");
		},

		_restoreImageSet: function(evt) {
		// summary: set value of "imageSetHidden" input to "0" and throw change events
			this.imageSetHiddenNode.value="0";
			epages.event.fire(this.imageSetHiddenNode,"change");	// trigger undo, redo for this element
			epages.event.fire(this.imageSetNode,"change");				// trigger style rule to display ImageSet images
		},

		_showButtons: function() {
		// summary: decides which button is visible

			if(this.imageTilingNode.value=='1') {
				this.tilingCheckboxNode.checked=true;			// Checkbox checked->true if value in hidden input=1. This happens if the user presses the undo or redo button
			}
			else {
				this.tilingCheckboxNode.checked=false;
			}

			var fileNameRightNodeValue= "";
			if(this.slaveWidget) {
				fileNameRightNodeValue= this.slaveWidget.getFileName();
			}

			if(this.fileNameLeftNode.value!="" || fileNameRightNodeValue!="" ) {
				if(this.fileNameLeftNode.value!="") {
				// show hide clear button left
					this.clearImageLeftNode.style.display="";
				} else {
					this.clearImageLeftNode.style.display="none";
				}

				if(this.fileNameLeftNode.value!='' && fileNameRightNodeValue=='') {
					this.tilingAreaNode.style.display="";		// (image tiling=yes) && (left image) && (no right image) --> show tiling checkbox |else --> hide tiling checkbox
				}
				else {
					this.tilingAreaNode.style.display="none";
				}

				// hide: clear imageset / restore imageset
				this.clearImageSetNode.style.display="none";
				this.restoreImageSetNode.style.display="none";
			} else if(this.imageSetHiddenNode.value!="1"){
				this.clearImageLeftNode.style.display="none";
				this.clearImageSetNode.style.display="";
				this.restoreImageSetNode.style.display="none";
				this.tilingAreaNode.style.display="none";
			}	else {
				this.clearImageLeftNode.style.display="none";
				this.clearImageSetNode.style.display="none";
				this.restoreImageSetNode.style.display="";
				this.tilingAreaNode.style.display="none";
			}
		},

		_toggleImageTiling: function(evt) {
		// summary: hidden input / checkbox handler set
		// description: Handles the value of the hidden input element which depends on the visible checkbox.
		//		Afterwards it fires an change event to trigger the display handler (_showButtons).
			if(this.tilingCheckboxNode.checked==true) {
				this.imageTilingNode.value=1;
			} else {
				this.imageTilingNode.value=0;
			}
			epages.event.fire(this.imageTilingNode,"change");
		}
});