define([
	"dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
	"dojo/parser", 
	"dojo/ready", 
    "dojo/dom",
	"dojo/_base/xhr",
	"dojo/dom-construct",
	"dojo/_base/array",
	"dojo/on",
	"dijit/form/ToggleButton",
	"chy/widget/LayouteditorRow",
	"dojo/text!./templates/LayouteditorBlock.html"	
], function(declare, _WidgetBase, _TemplatedMixin, parser, ready, dom, xhr, domConstruct, array, on, ToggleButton, LayouteditorRow, template) {
	return declare("widget.LayouteditorBlock",[_WidgetBase, _TemplatedMixin], {
		//properties
		templateString: template,
		layoutConfigNode: null,
		rows: new Array(),
		contextInfo: null,
		
		//constructor
		constructor: function(args){
	        declare.safeMixin(this,args);	
			this.title = this.layoutConfigNode.attributes['title'].nodeValue;
			this.open = this.layoutConfigNode.attributes['open'].nodeValue;
			this.toggleable = this.layoutConfigNode.attributes['toggleable'].nodeValue;
			parser.parse();
		},
		
		postCreate:function(){
			this.inherited(arguments);
			array.forEach(this.layoutConfigNode.childNodes,function(layoutConfigNode){
				if(layoutConfigNode.localName == 'row'){
					var rowIndex = this.rows.length;
					this.rows[rowIndex] = new LayouteditorRow({layoutConfigNode: layoutConfigNode, contextInfo: this.contextInfo});
					domConstruct.place(this.rows[rowIndex].domNode,this.bodyTable,"last");
				}
			},this);
			
			this.addRowButton.thisBlock = this;
			on(this.addRowButton, "click", function(e){
				var cellLayoutConfigNode = this.thisBlock.layoutConfigNode.ownerDocument.createElementNS("http://www.innovationinvestments.nl/layout","xl:row");
				this.thisBlock.layoutConfigNode.appendChild(cellLayoutConfigNode);
				var rowIndex = this.thisBlock.rows.length;
				this.thisBlock.rows[rowIndex] = new LayouteditorRow({layoutConfigNode: cellLayoutConfigNode, contextInfo: this.thisBlock.contextInfo});
				domConstruct.place(this.thisBlock.rows[rowIndex].domNode,this.thisBlock.bodyTable,"last");
				parser.parse();
			});
			
			this.removeBlockButton.thisBlock = this;
			on(this.removeBlockButton, "click", function(e){
				var isEmpty = true;
				array.forEach(this.thisBlock.layoutConfigNode.childNodes,function(layoutConfigNode){
					if(layoutConfigNode.localName == 'row'){
						isEmpty = false;
					}
				},this);				
				if(!isEmpty){
					alert("Block is not emptey.");
					return;
				}
				this.thisBlock.destroy();
			});
			
			this.titleField.thisBlock = this;
			on(this.titleField, "change", function(e){
				this.thisBlock.title = this.value;
				this.thisBlock.titleLbl.innerHTML = this.value;
				this.thisBlock.layoutConfigNode.setAttribute('title',this.value);
			});
			
			this.openField.thisBlock = this;
			on(this.openField, "change", function(e){
				if(this.checked) {
					this.thisBlock.open = 'true';
					this.thisBlock.layoutConfigNode.setAttribute('open','true');
				} else {
					this.thisBlock.open = 'false';
					this.thisBlock.layoutConfigNode.setAttribute('open','false');
				}
			});
			if(this.open == 'true'){
				this.openField.checked = true;
			}
			
			this.toggleableField.thisBlock = this;
			on(this.toggleableField, "change", function(e){
				if(this.checked) {
					this.thisBlock.toggleable = 'true';
					this.thisBlock.layoutConfigNode.setAttribute('toggleable','true');
				} else {
					this.thisBlock.toggleable = 'false';
					this.thisBlock.layoutConfigNode.setAttribute('toggleable','false');
				}
			});
			if(this.toggleableField == 'true'){
				this.toggleableField.checked = true;
			}

			parser.parse();	
		},
		
		onStart: function(){
			this.inherited(arguments);
			
			parser.parse();
		},
		
		destroy:function(){
			this.inherited(arguments);
			this.layoutConfigNode.parentNode.removeChild(this.layoutConfigNode);
		}
	});
});	
