var Demo = new Class({
	
	Implements: [Options, Events],
	options: {
		iframe: {
			src: '/wp-content/themes/hemingway/blank.htm',
			styles: {
				background: '#eee',
				border: '1px solid #ccc'
			}
		}
	},
	
	initialize: function(element){
		this.demo = element;
		
		this.sections = this.demo.getElements('.section');
		this.currentSection = 0;
		this.totalsections = this.sections.length - 1;
		
		this.stage = this.demo.getElement('.stage');
		this.createStage();
		this.createLinks();
	},
	
	createStage: function(){
		
		var self = this;
		
		this.stageframe = new IFrame({
			src: this.options.iframe.src,
			frameborder: 0,
			height: 150,
			width: 606,
			events: {
				load: function(){
					self.win = this.contentWindow || this.frame;
					self.doc = self.win.document;
					self.loadSection(self.sections[0]);
					self.showLinks();
					self.demo.addClass('loaded');
				}
			}
		}).setStyles(this.options.iframe.styles).inject(this.stage);
	},
	
	createLinks: function(){
	
		var self = this;
		this.numofsections = this.sections.length;
		this.currentsection = 0;
	
		this.links = new Element('div', {
			'class': 'links'
		}).inject(this.demo, 'top');
	
		this.previous = new Element('a', {
			href: '#',
			html: '« previous',
			'class': 'previous'
		}).inject(this.links).addEvent('click', function(e){
			e.stop();
			if (self.currentsection != 0) self.currentsection--;
			self.sections.setStyle('display', 'none');
			self.sections[self.currentsection].setStyle('display', '');
			self.loadSection(self.sections[self.currentsection]);
			self.showLinks();
		});
	
		this.next = new Element('a', {
			href: '#',
			html: 'next »',
			'class': 'next'
		}).inject(this.links).addEvent('click', function(e){
			e.stop();
			if (self.currentsection != (self.numofsections - 1)) self.currentsection++;
			self.sections.setStyle('display', 'none');
			self.sections[self.currentsection].setStyle('display', '');
			self.loadSection(self.sections[self.currentsection]);
			self.showLinks();
		});
	},
	
	showLinks: function(){
		if (this.currentsection == 0){
			this.previous.setStyle('display', 'none');	
			this.next.setStyle('display', '');
		} else if(this.currentsection < this.numofsections - 1){
			this.previous.setStyle('display', '');	
			this.next.setStyle('display', '');
		} else {
			this.previous.setStyle('display', '');	
			this.next.setStyle('display', 'none');
		}
	},
	
	injectHTML: function(html){
		$(this.doc.body).set('html', html);
	},
	
	injectCSS: function(css){
		var ss = this.doc.getElementById('style');
		try
		{
			$(ss).set('html', css);
		} catch(exc) {
			try {
				ss.innerText = css;	
			} catch(e){
				var parts = css.split(/\s*[{}]\s*/);
				for (var i=0; i<parts.length; i+=2)
					ss.styleSheet.addRule(parts[i],parts[i+1]);
			}
		}
	},
	
	injectScript: function(js){
		if (this.win.execScript){
			this.win.execScript(js);
		} else {
			var script = this.doc.createElement('script');
			script.setAttribute('type', 'text/javascript');
			script[(Browser.Engine.webkit && Browser.Engine.version < 420) ? 'innerText' : 'text'] = js;
			this.doc.head.appendChild(script);
			this.doc.head.removeChild(script);
		}		
	},
	
	loadSection: function(section){
	
		this.stage.setStyle('display', section.hasClass('showstage') ? 'block' : 'none');
		
		this.sections.setStyle('display', 'none');
		section.setStyle('display', 'block');					

		if (section.getElement('.html')) this.injectHTML(section.getElement('.html').get('html'));
		if (section.getElement('.css')) this.injectCSS(section.getElement('.css').get('text'));
		if (section.getElement('.js')) this.injectScript(section.getElement('.js').get('text'));
	}
	
});

window.addEvent('domready', function(){
	
	var demo = new Demo($$('.demo')[0]);
	
});