/**
 * @author Andrew
 */
Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
var uIntId = 0;
var lastComputerUpdated = 0;
var AuthHash = "";
var ajx = Ext.Ajax;
ajx.url = 'ajx.aspx';
ajx.timeout = 10000;
ajx.method = "post";
ajx.disableCaching = true;

var vp;
Ext.QuickTips.init();

var videoStore = new Ext.data.ArrayStore({
	autoDestroy: true,
    storeId: 'videoStore',
    idIndex: 3,  
    fields: [
       'Title',
       'Duration',
       {name: 'Date', type: 'date', dateFormat: 'Y-m-d'},
	   'Link'
    ],
	sortInfo: {
		field: 'Title',
		direction: 'ASC'
	},
	url: 'ajx.aspx?a=getVids'
});

Ext.onReady(function() {
    var login = new Ext.Window({
		modal: true,
		title: "Advanced Dermatology Login",
		layout: 'fit',
		width: 245,
		height: 140,
		buttonAlign: 'center',
		buttons: [{
			text:'Login',
			handler: function(){
				ajx.request({
					params:{a: 'login', un: Ext.getCmp('un').getValue(), pw: Ext.getCmp('pw').getValue()},
					success: function(r,o){
						r = eval('(' + r.responseText + ')');
						if(r == "YES"){
							login.close();
							initVP();
						}else{
							Ext.Msg.alert("Login Error", "Bad username or password, please check your username and password and try again.")
						}
					}
				})
				/*if (Ext.getCmp('un').getValue() == 'ada' && Ext.getCmp('pw').getValue() == 'ada') {
					login.close();
					initVP();
				}else{
					Ext.Msg.alert('Invalid Login','Please check your username and password and try again.');
				}*/
			}
		}],
		items:[{
			xtype: 'form',
			unstyled: true,
			bodyStyle: 'padding: 10px;',
			labelWidth: 75,
			defaultType: 'textfield',
			items:[{
				fieldLabel: 'Username',
				name: 'un',
				id: 'un'
			},{
				fieldLabel: 'Password',
				inputType: 'password',
				name: 'pw',
				id: 'pw'
			}]
		}]
	});
	login.show();
	setTimeout(function(){Ext.getCmp('un').focus()},1000);
});

var videoGrid = new Ext.grid.GridPanel({
	title: 'Training Videos',
	region: 'west',
	split: true,
	minSize: 200, 
    maxSize: 500,
	collapsible: true,
	width: 300,
	store: videoStore,
	sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
	listeners: {
		'rowdblclick':{
			fn: function(g, idx){
				var videoLink = g.store.getAt(idx).data.Link;
				if(videoLink.length == 0){
					Ext.getCmp('videoPane').body.dom.innerHTML='';
					Ext.Msg.alert('Video Error','This video is not yet available');
				}else{
					Ext.getCmp('videoPane').body.dom.innerHTML='<IFRAME SRC="/videos/' + videoLink + '" WIDTH="100%" HEIGHT="100%" FRAMEBORDER=0 SCROLLING=NO></iframe>'
				}
			}
		}
	},
	viewConfig:{},
	autoExpandColumn: 'Title',
	autoExpandMax: 2000,
	columns:[{
		id: 'Title',
		header: 'Video Title',
		dataIndex: 'Title',
		sortable: true
	},{
		id: 'Duration',
		header: 'Duration',
		dataIndex: 'Duration',
		renderer: {
			fn: function(v){
				return '<div align="right">' + v + '</div>';
			}
		},
		width: 50
	},{
		id: 'Date',
		header: 'Created Date',
		dataIndex: 'Date',
		sortable: true,
		xtype: 'datecolumn',
		width: 80,
		format: 'Y-m-d'
	}]
});
function initVP(){
	vp = new Ext.Viewport({
		layout: 'border',
		items: [videoGrid,{
			id: 'videoPane',
			title: 'Video Pane',
			region: 'center',
			layout: 'fit',
			bodyStyle: 'background-color: #000;',
			html:''
		}]
	});
	videoStore.load();
};