Ext.namespace('W');

W.Controler = Ext.extend(Ext.util.Observable, {
	lastPage:null,
	lastName:null,
	template:null,
	init: function() {
		try {
			this.template = new Ext.Template(
				'<div class="group" style="color:{lightColor}">',
					'<div class="roundDiv topBorder">',
						'<b class="xb1 roundedArc" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
						'<b class="xb2 roundedArc" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
						'<b class="xb3 roundedArc" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
						'<b class="xb4 roundedEdge" style="background-color:{lightColor}; border-color:{darkColor}"></b>',
						'<b class="xb5 roundedEdge" style="background-color:{lightColor}; border-color:{darkColor}"></b>',
						'<b class="xb6 roundedEdge" style="background-color:{lightColor}; border-color:{darkColor}"></b>',
						'<b class="xb7 roundedEdge" style="background-color:{lightColor}; border-color:{darkColor}"></b></div>	',
					'<div class="groupTitle">',
						'<div class="groupTitleText" style="background-color:{darkColor}">',
							'<a name="sites"><img class="icons" src="img/{icon}"><br>{shortTitle}</a>',
						'</div>',
						'<div class="groupTitleText roundDiv" style="background-color:{darkColor}">',
							'<b class="xb7 roundedEdge" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
							'<b class="xb6 roundedEdge" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
							'<b class="xb5 roundedEdge" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
							'<b class="xb4 roundedEdge" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
							'<b class="xb3 roundedArc" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
							'<b class="xb2 roundedArc" style="background-color:{darkColor}; border-color:{darkColor}"></b>',
							'<b class="xb1 roundedArc" style="background-color:{darkColor}; border-color:{darkColor}"></b></div>',
					'</div>',
					'<div class="content" style="background-color:{lightColor}">',
						'<h4 class="tabTitle">{title}</h4>',
						'{content}',
					'</div>',
					'<div class="content roundDiv" style="background-color:{lightColor} ;">',
						'<b class="xb7 roundedEdge" style="background-color:{lightColor}; border-color:{lightColor}"></b>',
						'<b class="xb6 roundedEdge" style="background-color:{lightColor}; border-color:{lightColor}"></b>',
						'<b class="xb5 roundedEdge" style="background-color:{lightColor}; border-color:{lightColor}"></b>',
						'<b class="xb4 roundedEdge" style="background-color:{lightColor}; border-color:{lightColor}"></b>',
						'<b class="xb3 roundedArc" style="background-color:{lightColor}; border-color:{lightColor}"></b>',
						'<b class="xb2 roundedArc" style="background-color:{lightColor}; border-color:{lightColor}"></b>',
						'<b class="xb1 roundedArc" style="background-color:{lightColor}; border-color:{lightColor}"></b>',
					'</div>',
				'</div>'
			);
			Ext.History.init();
			this.XMLModel = new W.XMLModel();
			this.on("pageLoaded", this.displayPage, this);
			Ext.History.on('change', this.loadHistory, this);
		}
		catch (e) {
			console.log("Error: " + e.message);
		}
	},
	
	load: function() {
		this.loadPage();
	},
	
	loadPage: function(name) {
		if(Ext.isEmpty(name)) { 
			if(!Ext.isEmpty(document.location.hash.replace(/#/,""))) {
				name = document.location.hash.replace(/#/,"");
			}
			else {
				name = "Home"; 
			}
		}
		Ext.History.add(name);
		this.lastName = name;
		this.XMLModel.load({
			url: 'pages/' + name + '.xml'
		});
		this.XMLModel.on('XMLLoaded', function() {
			this.lastPage = this.XMLModel.xml2json(this.XMLModel.selectNode("page"));
			this.fireEvent('pageLoaded'); 
		}, this, {single:true} );
	},
	
	displayPage: function() {
		Ext.get("BodyText").update("");
		Ext.get("pageTitle").update(" - " + this.lastPage.title);
		Ext.each(this.lastPage.section, function(section) {
			if(!Ext.isEmpty(section.src)) {
				//debugger;
				var id = Ext.id();
				var hiddenIframe = Ext.get("hiddenIframe")
				hiddenIframe.dom.src = "pages/getFeed.html"; //section.src;
				var fn = function() {
					if(this.hiddenIframe.dom.contentWindow.window.document.readyState === "complete") {
						//debugger;
						Ext.get(this.id).update(this.hiddenIframe.dom.contentWindow.document.body.innerHTML);
					}
					else {
						fn.defer(100,{id:this.id,hiddenIframe:this.hiddenIframe,fn:this.fn});
					}
				}
				fn.defer(300,{id:id,hiddenIframe:hiddenIframe,fn:fn});
				section.content = "<div class=\"" + section.className + "\" id=\"" + id + "\">Loading ...</div>"
	
			}
			this.template.append('BodyText', section);
		},this);
	},
	
	loadHistory: function(name){
		if(!Ext.isEmpty(name) && this.lastName !== name) {
			this.loadPage(name);
		}
	}
});

Ext.onReady( function(){ 
	W.Ctl = new W.Controler();
	W.Ctl.init(); 
	W.Ctl.load(); 
});