Ext.onReady(function(){
	Ext.useShims = true;
	var navigation = new Ext.menu.Menu({
		id: 'mainMenu',
		width: 310,
		items: [
			{
				text: 'Pictures',
				handler: onSectionSelect,
				sectionId: 0
			},
			{
				text: 'Bio',
				handler: onSectionSelect,
				sectionId: 1
			},
			{
				text: 'Resume',
				handler: onSectionSelect,
				sectionId: 2
			},
			{
				text: 'Reviews',
				handler: onSectionSelect,
				sectionId: 3
			},
			{
				text: 'Sounds',
				handler: onSectionSelect,
				sectionId: 4
			},
			{
				text: 'News',
				handler: onSectionSelect,
				sectionId: 5
			},
			{
				text: 'Links',
				handler: onSectionSelect,
				sectionId: 6
			}
		]
	});
	
	var navButton= new Ext.Button({
            text: "Sounds",
            tooltip: 'Find out more about Mike...',
			id: 'navigation',
            menu: navigation
        });
	
	var news = new Ext.DataView({
	    itemSelector: 'div.article',
	    overClass: 'over',
		singleSelect: true,
		store: new Ext.data.Store({
			url: 'news.xml',
			autoLoad: true,
			reader: new Ext.data.XmlReader({
				record: 'article',
				id: 'id'
				},['id', 'category', 'headline', 'tagline', 'author', 'section', 'paper', {name:'published', type:'date'}, 'displaydate', 'url', 'content']
			)
		}),
	    tpl: new Ext.XTemplate(
			'<tpl for=".">',
			'<div class="article" id="article-{id}">',
				'<div class="article-inner">',
					'<span class="published">{displaydate}</span>',
					'<h1>{headline}</h1>',
					'<span>by {author}<br/><i>{paper}</i></span>',
					'<span class="content">{content}</span>',
				'</div>',
			'</div>',
			'</tpl>'
	    )
	});
	news.store.setDefaultSort('published', "DESC");
	news.on('beforeselect', function(panel,sel){
		if (!Ext.fly('showallNews')) {
			var back = new Ext.Button({
				id: 'showallNews',
				cls: 'showall',
				text: 'Show All Stories',
				handler: function(){
					this.ownerCt.removeClass('hide');
					this.clearSelections();
					back.destroy();
				},
				scope: panel
			});
			back.render(panel.getEl(), panel.getEl().dom);
			panel.ownerCt.addClass('hide');
			panel.getEl().scrollTo('top', panel.ownerCt.body.dom.scrollTop);
		}
    });
	
	var reviews = new Ext.DataView({
	    itemSelector: 'div.article',
	    overClass: 'over',
		singleSelect: true,
		store: new Ext.data.Store({
			url: 'reviews.xml',
			autoLoad: true,
			reader: new Ext.data.XmlReader({
				record: 'review',
				id: 'id'
				},['id', 'type', 'show', {name:'showdate', type:'date'}, 'content']
			)
		}),
	    tpl: new Ext.XTemplate(
			'<tpl for=".">',
			'<div class="article" id="article-{id}">',
				'<div class="article-inner">',
					'<span class="published">{type}</span>',
					'<h1>{show}</h1>',
					'<span class="content">{content}</span>',
				'</div>',
			'</div>',
			'</tpl>'
	    )
	});
	reviews.store.setDefaultSort('showdate', "DESC");
	reviews.on('beforeselect', function(panel,sel){
		if (!Ext.fly('showallReviews')) {
			var back = new Ext.Button({
				id: 'showallReviews',
				cls: 'showall',
				text: 'Show All Reviews',
				handler: function(){
					this.ownerCt.removeClass('hide');
					this.clearSelections();
					back.destroy();
				},
				scope: panel
			});
			back.render(panel.getEl(), panel.getEl().dom);
			panel.ownerCt.addClass('hide');
			panel.getEl().scrollTo('top', panel.ownerCt.body.dom.scrollTop);
		}
    });
	
	var pictures = new Ext.DataView({
	    itemSelector: 'div.pic',
	    overClass: 'over',
		multiSelect: true,
		simpleSelect : true,
		store: new Ext.data.Store({
			url: 'pictures.xml',
			autoLoad: true,
			reader: new Ext.data.XmlReader({
				record: 'picture',
				id: 'id'
				},['id', 'filename', 'caption']
			)
		}),
	    tpl: new Ext.XTemplate(
			'<div class="pad">',
				'<tpl for=".">',
				'<div class="pic" id="picture-{id}">',
					'<img src="images/pictures/{filename}" title="{caption}" />',
				'</div>',
				'</tpl>',
			'</div>'
	    )
	});
	pictures.on('beforeselect',function(dv,node,sel){
		dv.clearSelections();
	});
	
	var links = new Ext.DataView({
	    itemSelector: 'div.article',
	    overClass: 'over',
		store: new Ext.data.Store({
			url: 'links.xml',
			autoLoad: true,
			reader: new Ext.data.XmlReader({
				record: 'link',
				id: 'id'
				},['id', 'title', 'url']
			)
		}),
	    tpl: new Ext.XTemplate(
			'<tpl for=".">',
			'<div class="article" id="article-{id}">',
				'<div class="article-inner">',
					'<h1><a href="{url}" target="_blank">{title}</a></h1>',
				'</div>',
			'</div>',
			'</tpl>'
	    )
	});
    
    
    
	
	var bio = "<p>Michael Mahler is a Chicago-based composer/lyricist/actor.</p><p>He earned his BS in Theatre at Northwestern University, where he wrote about 50 songs for the annual Waa-Mu Show. His songs have been featured in STATUS and What U Will (The Music Theatre Company); The American Dream Songbook (Next Theatre Company); Moving Forward, Looking Back (Beechman Theater); and Ballads. Also, Uptempos (Ars Nova); as well as various songwriter showcases around the world, including the National Alliance for Musical Theatre New Works Summit, the MAC/ASCAP Songwriter Showcase, Monday Night New Voices, and an evening at the Kennedy Center.</p><p>Michael teamed up with Alan Schmuckler to write How Can You Run with a Shell on Your Back?, a critically-acclaimed family musical commissioned by the Tony Award-winning Chicago Shakespeare Theater. It has been performed at CST, The Marriott Lincolnshire Theater, The Spirit of Broadway Theater, the Chicago Humanities Festival, and others. Shell was featured in the 2009 NAMT Festival of New Musicals.</p><p>Michael was commissioned by The Music Theatre Company in Highland Park to write The 9/11 Report with Jessica Redish. It premiered in July of '09 and is currently being reworked with playwright Matt Moses.</p>With Tim Gregory, Michael wrote The Christmas Miracle of Jonathan Toomey, a holiday folk musical based on the award-winning picture book by Susan Wojcechowski. Toomey premiered at Provision Theater in November 2011 and was warmly received by critics and audiences alike.</p><p>With Buddy Farmer and David H. Bell, Michael wrote Knute Rockne: All-American, an original musical about the life of the legendary Notre Dame football coach, which premiered at Theatre at the Center in Munster, Indiana.</p><p>With Scott Ferguson, Michael wrote The Main Street Kids Club, a family musical based on the Mathstart series of books by Stewart J. Murphy. It has been performed at schools throughout the Chicagoland area as well as Theatre West Virginia and Playhouse on the Square.</p><p>Michael composed Painted Alice (with bookwriter William Donnelly) and Hero (with bookwriter Aaron Thielen) which both received staged readings as part of Northwestern's American Musical Theatre Project. Hero will premiere at the Marriott Lincolnshire Theater in 2012.</p><p>He is currently working with Schmuckler, Jarrod Zimmerman, Blake Silver, and Bruce Helford on an original musical comedy series entitled Boyfred. Boyfred is being executive-produced by Thomas Schlamme and Sony Pictures/TV.</p><p>Michael is a Jeff-nominated actor and musical director. He plays guitar and sings with his band, The Lincoln Squares.</p>";
	
	var card = new Ext.Panel({
		renderTo: 'portal',
		layout:'card',
		width: 314,
		height: 482,
		activeItem: 4,
		defaults: {
			border:false,
			autoScroll:true,
			cls: 'section'
		},
		tbar: [navButton],
		items: [{
			id: 'Pictures',
			items: [pictures]
		},{
			id: 'Bio',
			html: '<div class="article" id="article-{id}"><div class="article-inner">'+bio+'</div></div>'
		},{
			id: 'Resume',
			html: '<div class="article" id="article-{id}"><div class="article-inner"><a href="resume.pdf">Download my resume</a></div></div>'
			//html: '<div class="article" id="article-{id}" style="cursor: default"><div class="article-inner">Click the Fullscreen button <img src="images/flash-fullscreen.gif" width="13" height="10" /> below to view a larger version on my resume.</div></div><div class="pad" style="padding-top:0px"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="292" height="379"><param name="movie" value="resume.swf" /><param name="quality" value="high" /><embed src="resume.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="292" height="379"></embed></object></div>'
		},{
			id: 'Reviews',
			items: [reviews]
		},{
			id: 'Sounds',
			html: '<div class="pad"><div class="wrap"><div id="group" class="x-toolbar"></div></div><div id="player"></div></div>'
		},{
			id: 'News',
			items: [news]
		},{
			id: 'Links',
			items: [links]
		}]
	});
	
	
	function render(){
		changePlayer('demo');
		new Ext.Button({
			text: 'Demo',
			cls: 'group',
			enableToggle: true,
			toggleGroup: 'groupBtns',
			pressed: true,
			handler: function(){changePlayer('demo')},
			renderTo: 'group'
		});
		new Ext.Button({
			text: 'Knute Rockne: All American',
			cls: 'group',
			enableToggle: true,
			toggleGroup: 'groupBtns',
			handler: function(){changePlayer('rockne')},
			renderTo: 'group'
		});
		new Ext.Button({
			text: 'How Can You Run With A Shell On Your Back?',
			cls: 'group',
			enableToggle: true,
			toggleGroup: 'groupBtns',
			handler: function(){changePlayer('shell')},
			renderTo: 'group'
		});
		new Ext.Button({
			text: 'Interviews',
			cls: 'group',
			enableToggle: true,
			toggleGroup: 'groupBtns',
			handler: function(){changePlayer('interviews')},
			renderTo: 'group'
		});
	}

	function onSectionSelect(section){
		navButton.setText(section.text);
		card.layout.setActiveItem(section.sectionId);
	};
	
	function changePlayer(group){
		var so = new SWFObject("script/player/playerMultipleList.swf", "mymovie", "292", "282", "7", "#FFFFFF");  
		so.addVariable("autoPlay","no");
		so.addVariable("playlistPath","script/player/"+group+".xml");
		so.addVariable("playerSkin","5");
		so.addVariable("overColor","#000000");
		so.write("player");	
	}
	
	render();
});