Ext.ns("Ext.ux");
Ext.ux.MoviePlayer = Ext.extend(Ext.util.Observable, {
	viewboxConfig: {
		tag: 'video',
		src: '',
		style: {
			display: 'block'
		},
		id: 'movie-player'
	},
	
	viewCtConfig: {
		tag: 'div',
		id: 'moviebox-ct',
		cls: 'moviebox'
	},
	
	mask: {
		tag: 'div',
		id: 'my-mask',
		cls: 'mask'
	},

	movieDetailsConfig: {
		tag: 'div',
		cls: 'details',
		children: [{
			tag: 'h6',
			html: '',
			style: 'display:inline-block'
		},{
			tag: 'a',
			id: 'close-movie-window',
			html: 'close',
			href: '#',
			style: 'float:right;color:#000000;'
		}]
	},
	
	constructor: function(){
		this.addEvents('playerReady', 'playerComplete', 'show', 'hide', 'ready');
		var dh = Ext.DomHelper;
		var bd = Ext.getBody();
		//this.mask = dh.markup(this.mask);
		this.mask = dh.append(bd, this.mask, true);
		this.mask.setWidth(bd.getWidth());
		this.mask.setHeight(bd.getHeight());
		this.on('ready', this.onReady, this);
		this.player = jwplayer;
	},

	create: function(movie){
		var bd = Ext.getBody();
		var dh = Ext.DomHelper;
		this.viewCt = dh.append(bd, this.viewCtConfig, true);
		
		this.playerCfg = {
			flashplayer: "/resources/js/player/player.swf",
			//frontcolor: 'ffffff',
		    //lightcolor: 'cc9900',
		    //screencolor: '000000',
		    file: movie[0],
		    stretching: 'fill',
		    width: '100%',
		    height: '385',
		    controlbar: 'bottom',
		    autostart: true,
		    dock: false,
		    events: {
	    		onReady: this.playerReady.createDelegate(this),
		   		onComplete: this.playerComplete.createDelegate(this) 
			}
		};
		this.viewboxConfig.src = movie[0];
		this.viewbox = dh.append(this.viewCt, this.viewboxConfig, true);
		this.movieDetails = dh.append(this.viewCt, this.movieDetailsConfig, true);
		
		Ext.fly('close-movie-window').on('click', this.hide, this, {stopEvent: true});
		this.player("movie-player").setup(this.playerCfg);

		this.player("movie-player").load({file:movie[0]});
		this.updateDetails(movie[1]);
		this.showView();
		this.fireEvent('ready', this);
	},
	
	updateDetails: function(txt){
		this.movieDetails.child('h6').update(txt.replace(/\%20/g, ' '));
	},
	
	showMovie: function(){

	},

	loadMovie: function(link){
		var link = link.split('+');
		this.create(link);
		this.loadMask().showView();
		this.fireEvent('ready', link[0]);
		return this;
	},

	hide: function(){
		this.player('movie-player').stop();
		this.viewCt.fadeOut({remove:true});
		this.hideMask();
		this.fireEvent('hide');
	},
	
	onReady: function(movie){
		
	},
	
	showView: function(){
		this.viewCt.fadeIn();
	},

	loadMask: function(){
		this.mask.fadeIn();
		return this;
	},

	hideMask: function(){
		this.mask.fadeOut({remove:false});
	},

	playerReady: function(){
		this.player('movie-player').play();
	},
	
	playerComplete: function(){
		this.hide();
	}
});