/*
 * 	Created on Apr 17, 2008
 *
 * 	Maestas Taekwondo
 *	Avarada, Colorado
 *	Author: Paul Voris
 *	Description:
 *
 *	Revisions:
 *		20080417:Created
 *
 *
*/
var cm;
var s1;
Ext.BLANK_IMAGE_URL = './images/s.gif';
function myInit() {
	var aboutData = [
		['maestas', 'about','North Jefferson TKD','images/tinyturtle.png'],
		['instructors', 'about','Instructors','images/icons/user_gray.png'],
		['schedule', 'about','Class Schedule','images/icons/calendar_view_day.png'],
		['join', 'about','How to Join','images/icons/group.png'],
		['challenge', 'about','Team Challenge','images/icons/medal_gold_3.png']
	];
	aboutStore = new Ext.data.SimpleStore({
		storeId:'aboutStore',
		fields:[
	    	{name:'pid'},
	    	{name:'target'},
	    	{name:'title'},
	    	{name:'icon'}
	    ]
	});
	aboutStore.loadData(aboutData);
	cm = new Ext.grid.ColumnModel([{
		   header:'Date',
		   width:160,
		   css:'font-weight:bold;',
		   menuDisabled:true,
		   sortable:false,
		   fixed:true, 
		   dataIndex:'EVENTDATE',
		   renderer:renderEventDate
		},{
		   header:'Event',
		   width:320,
		   css:'font-weight:bold;',
		   menuDisabled:true,
		   sortable:false,
		   fixed:true, 
		   dataIndex:'TITLE'		
		},{
		   header:'Location',
		   width:300,
		   css:'font-weight:bold;',
		   menuDisabled:true,
		   sortable:false,
		   fixed:true, 
		   dataIndex:'LOCATION'		
		}
	]);	
	var navbar = new Ext.Toolbar({
		id:'navbar',
		renderTo:'toolbar' 
	});
	var btnHome = new Ext.Button({
		id:'home',
		scripted:false,
		text:'<b>Home</b>',
		icon:'images/icons/house.png',
		cls:"x-btn-text-icon",
		handler:loadHome
	});
	navbar.addItem(btnHome);	
	navbar.addSeparator();
	var btnAbout = new Ext.Button({
		id:'about',
		scripted:true,
		text:'<b>About Us</b>',
		icon:'images/icons/information.png',
		cls:"x-btn-text-icon",
		handler:loadPage
	});
	navbar.addItem(btnAbout);		
	navbar.addSeparator();
	var btnCalendar = new Ext.Button({
		id:'cal',
		scripted:false,
		text:'<b>Calendar</b>',
		icon:'images/icons/calendar.png',
		cls:"x-btn-text-icon",
		handler:loadCal
	});
	navbar.addItem(btnCalendar);
	navbar.addSeparator();
	var menuMedia = new Ext.menu.Menu({
		id:'menuMedia',
		items:[{
					text:'Video',
					id:'video',
					scripted:false,
					icon:'images/icons/film.png',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'Audio',
					id:'audio',
					scripted:false,
					icon:'images/icons/sound.png',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'Images',
					id:'images',
					scripted:false,
					icon:'images/icons/picture.png',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'Documents',
					id:'docs',
					scripted:false,
					icon:'images/icons/page_white_swoosh.png',
					cls:"x-btn-text-icon",
					handler:loadPage
				}]	
	});
	navbar.add({
		text:'<b>Media</b>',
		menu:menuMedia  
	}); 
	var menuBelts = new Ext.menu.Menu({
		id:'menuBelts',
		items:[{
					text:'Introduction',
					id:'intro',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'10th gup White',
					id:'white',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'9th gup White/Yellow Stripe',
					id:'highwhite',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'8th gup Yellow ',
					id:'yellow',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'7th gup Yellow/Green Stripe',
					id:'highyellow',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'6th gup Green',
					id:'green',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'5th gup Green/Blue Stripe',
					id:'highgreen',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'4th gup Blue',
					id:'blue',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'3rd gup Blue/Red Stripe',
					id:'highblue',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'2nd gup Red',
					id:'red',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'1st gup Red/Black Stripe',
					id:'highred',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'1st Degree Black',
					id:'black',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				},{
					text:'Sparring',
					id:'sparring',
					scripted:false,
					icon:'images/s.gif',
					cls:"x-btn-text-icon",
					handler:loadPage
				}]	
	});
	navbar.add({
		text:'<b>Guide</b>',
		menu:menuBelts  
	}); 
	var btnLinks = new Ext.Button({
		id:'links',
		text:'<b>Links</b>',
		scripted:false,
		icon:'images/icons/world.png',
		cls:"x-btn-text-icon",
		handler:loadPage
	});
	navbar.addItem(btnLinks);
	navbar.addSeparator();
	var btnRss = new Ext.Button({
		id:'rss',
		//text:'<b>RSS</b>',
		scripted:false,
		icon:'images/icons/rss_a.png',
		cls:"x-btn-icon"
	});
	navbar.addItem(btnRss);
	
	
	
	navbar.addFill();
	var btnSignIn = new Ext.Button({
		id:'signin',
		text:'<b>Sign In</b>',
		handler:function(){
			window.open('sign_in/');
		}
	});
	navbar.addItem(btnSignIn);	
	loadHome();
}
function loadPage(btn) {
	Ext.get('content').load({
        url:"ajax.php",
        scripts:true,
        params:{action:'GetPage', pid:btn.id, scripted:btn.scripted, value:'_REQUEST'}
	});
}
function loadHome() {
	Ext.get('content').update('<div id="flashimg"></div><div id="mini-event"></div>');
	mkFlashImg();
	var tkdEvents = new Ext.data.Store({
		url:'request_query.php',		
		baseParams:{query:'events'},
		reader:new Ext.data.JsonReader({
			root:'data',
			totalProperty:'totalCount',
			fields:[
				{name:'ID'},
				{name:'EVENTDATE'},
				{name:'STARTTIME'},
				{name:'STOPTIME'},
				{name:'SETDATE'},
				{name:'FEATURE'},
				{name:'REPEATS'},
				{name:'REPEATDAYS'},
				{name:'REPEATSUNTIL'},
				{name:'ALLDAY'},
				{name:'TITLE'},
				{name:'DESCRIPTION'},
				{name:'LOCATION'},
				{name:'INSTRUCTOR'},
				{name:'ICON'},
				{name:'URL'},
				{name:'TYPE'}
			]
		}),
		remoteSort:true
	});
	tkdEvents.setDefaultSort('DATE', 'ASC');
	tkdEvents.load({params:{start:0, limit:5}});
	var eventGrid = new Ext.grid.GridPanel({
		title:'Featured Upcoming Events',
	    store:tkdEvents,
		renderTo:'mini-event',   	
		colModel:cm,
		border:true,
		stripeRows:true,
		width:780,
		height:420, 
		frame:true,
		loadMask:true,
		viewConfig:{
			forceFit:true,
			scrollOffset:1,
            enableRowBody:true,
            showPreview:true,
            getRowClass:function(record, rowIndex, p, store){
				if(this.showPreview){
                  	var dIcon = '';
					if (record.data.ICON) {
						dIcon =  '<img width="38" height="38" class="event-icon" src="' + record.data.ICON + '" align="left">';
					} else {
						dIcon =  '<img width="38" height="38" class="event-icon" src="images/s.gif" align="left">';
					}
					var addInstructor = ' ';
					if (record.data.INSTRUCTOR || record.data.TYPE == 2) {
						if (!record.data.INSTRUCTOR) {
							var I = 'Not Assigned';
						} else {
							var I = record.data.INSTRUCTOR;
						}
						addInstructor = '<p class="note-body"><span class="bold">Instructor:&nbsp;</span><span class="italic"> ' + I + '</span></p>';
					}
					if (!record.data.DESCRIPTION) {
						var D = '&nbsp;';
					} else {
						var D = record.data.DESCRIPTION;
					}
					p.body = [dIcon + '<p class="note-body">' + D + '</p>' + addInstructor] ;
					return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
		},
	    selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
	    iconCls:'event-grid', 
		bbar:new Ext.PagingToolbar({
			pageSize:5,
			store:tkdEvents,
			displayInfo:true,
			displayMsg:'Displaying Events {0} - {1} of {2}',
			emptyMsg:'No events to display'
		})
	});
	Ext.get('my-loader').hide();
}
function mkAbout() {
	var cm = new Ext.grid.ColumnModel([{
		   header:'Topic',
		   width:150,
		   dataIndex:'title',
		   fixed:true, 
		   menuDisabled:true,
		   sortable:false,
		   renderer:renderTopic
		}
	]);
	var tp = new Ext.Panel({
		renderTo:Ext.get('content'),
		autoWidth:true,
		resizable:false,
		border:false,
	    layout:'column',
	    items:[{
        	xtype:'grid',
			store:Ext.StoreMgr.get('aboutStore'),
			id:'aboutGrid',    	
			colModel:cm,
			hideHeaders:true,
			border:false,
			stripeRows:false,
			width:165,
			autoHeight:true, 
			frame:false,
			loadMask:true,
			viewConfig:{
				forceFit:true,
				scrollOffset:1
			},
			selModel:new Ext.grid.RowSelectionModel({
				singleSelect:true,
				listeners:{
					rowselect:function(sm, rowidx, record) {
						Ext.get('about-body').load({
					       url:"ajax.php",
					        scripts:true,
					        params:{action:'GetPage', pid:record.data.pid, scripted:false, subPage:true, value:'_REQUEST'}
						});
					}
				}
			})
	    },{
	        width:605,
	        xtype:'panel',
	        border:false,
	        autoHeight:true,
	        html:'<div id="about-body">BODY</div>'
	    }]
	})
	Ext.getCmp('aboutGrid').getSelectionModel().selectFirstRow();
}
function loadCal() {
	Ext.get('content').update(' ');
	var tkdEvents = new Ext.data.Store({
		id:'event-cal',
		url:'request_query.php',		
		baseParams:{query:'events', all:true},
		reader:new Ext.data.JsonReader({
			root:'data',
			totalProperty:'totalCount',
			fields:[
				{name:'ID'},
				{name:'EVENTDATE'},
				{name:'STARTTIME'},
				{name:'STOPTIME'},
				{name:'SETDATE'},
				{name:'FEATURE'},
				{name:'REPEATS'},
				{name:'REPEATDAYS'},
				{name:'REPEATSUNTIL'},
				{name:'ALLDAY'},
				{name:'TITLE'},
				{name:'DESCRIPTION'},
				{name:'LOCATION'},
				{name:'INSTRUCTOR'},
				{name:'ICON'},
				{name:'URL'},
				{name:'TYPE'}
			]
		}),
		remoteSort:true
	});
	tkdEvents.setDefaultSort('DATE', 'ASC');
	tkdEvents.load({params:{start:0, limit:10, filter:'RESET'}});
	var eventGrid = new Ext.grid.GridPanel({
		title:'Event Calendar [All Events]',
		id:'big-grid',
		renderTo:'content',
	    store:tkdEvents,    	
		colModel:cm,
		border:true,
		stripeRows:true,
		width:780,
		height:770, 
		frame:true,
		loadMask:true,
		viewConfig:{
			forceFit:true,
			scrollOffset:1,
            enableRowBody:true,
            showPreview:true,
            getRowClass:function(record, rowIndex, p, store){
				if(this.showPreview){
                  	var dIcon = '';
					if (record.data.ICON) {
						dIcon =  '<img width="38" height="38" class="event-icon" src="' + record.data.ICON + '" align="left">';
					} else {
						dIcon =  '<img width="38" height="38" class="event-icon" src="images/s.gif" align="left">';
					}
					var addInstructor = ' ';
					if (record.data.INSTRUCTOR || record.data.TYPE == 2) {
						if (!record.data.INSTRUCTOR) {
							var I = 'Not Assigned';
						} else {
							var I = record.data.INSTRUCTOR;
						}
						addInstructor = '<p class="note-body"><span class="bold">Instructor:&nbsp;</span><span class="italic"> ' + I + '</span></p>';
					}
					if (!record.data.DESCRIPTION) {
						var D = '&nbsp;';
					} else {
						var D = record.data.DESCRIPTION;
					}
					p.body = [dIcon + '<p class="note-body">' + D + '</p>' + addInstructor] ;
					return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
		},
	    selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
	    iconCls:'event-grid',
	    tbar:[{
	    	text:'View',
			icon:'images/icons/magnifier.png',
			cls:"x-btn-text-icon",	    	
	    	menu:new Ext.menu.Menu({
				items:[{
					text:'All Events',
					id:'filter_RESET',
					group:'view',
					checked:true,
              		checkHandler:onItemCheck
				},{
					text:'National Events',
					id:'filter_1',
					group:'view',
					checked:false,
              		checkHandler:onItemCheck
				},{
					text:'Scheduled Classes',
					id:'filter_2',
					group:'view',
					checked:false,
              		checkHandler:onItemCheck
				},{
					text:'Seminars',
					id:'filter_3',
					group:'view',
					checked:false,
              			checkHandler:onItemCheck
				},{
					text:'Testings',
					id:'filter_8',
					group:'view',
					checked:false,
              			checkHandler:onItemCheck
				},{
					text:'Training Events',
					id:'filter_5',
					group:'view',
					checked:false,
              			checkHandler:onItemCheck
				},{
					text:'Tournaments',
					id:'filter_4',
					group:'view',
					checked:false,
              		checkHandler:onItemCheck
				},{
					text:'World Events',
					id:'filter_6',
					group:'view',
					checked:false,
              		checkHandler:onItemCheck
				},{
					text:'Uncategorized (Other)',
					id:'filter_7',
					group:'view',
					checked:false,
              		checkHandler:onItemCheck
				}]	
			})
	    }],
		bbar:new Ext.PagingToolbar({
			pageSize:10,
			store:tkdEvents,
			displayInfo:true,
			displayMsg:'Displaying Events {0} - {1} of {2}',
			emptyMsg:'No events to display'
		})
	});
}
function renderEventDate(value, p, record) {
	if (record.data.ALLDAY) {
		return ['&nbsp;' + record.data.EVENTDATE + '&nbsp;All day'];
	} else {
		return ['&nbsp;' + record.data.EVENTDATE + '&nbsp;' + record.data.STARTTIME];
	}
}
function mkFlashImg() {
	if(!s1) {
		s1 = new SWFObject('include/imagerotator/imagerotator.swf','rotator','770','250','9','#dfe8f6');
		s1.addParam('allowfullscreen','true');
		s1.addParam("wmode","opaque");
		s1.addVariable("rotatetime","10");
		s1.addVariable("width","770");
		s1.addVariable("height","250"); 
		s1.addVariable('file','images/rotator/tkd.xml');
	}
	s1.write('flashimg');				
}
function renderTopic(value, p, record){
	return '<img src="' + record.data.icon + '" align="left">&nbsp;' + record.data.title; 
}
function onItemCheck(item, checked){
 	if (checked) {
 		var s = item.id.split('_');
		Ext.StoreMgr.get('event-cal').reload({params:{start:0, limit:10, filter:s[1]}});
		Ext.getCmp('big-grid').setTitle(['Event Calendar [' + item.text  + ']']);
 	}
}
Ext.onReady(function() {myInit();});