
var coverTpl = new Ext.XTemplate(
	'<tpl for=".">',
    '<div class="thumb-wrap" id="{title}">',
	'<div class="thumb"><img src="{thumb}"></div>',
	'<span class="x-editable">{title}</span></div>',
    '</tpl>'
);

var fanartTpl = new Ext.XTemplate(
	'<tpl for=".">',
    '<div class="thumb-wrap" id="{title}">',
	'<div class="fanart"><img src="{thumb}"></div>',
	'<span class="x-editable">{title}</span></div>',
    '</tpl>'
);

	window.loadingMask = new Ext.LoadMask(Ext.getBody(), {msg:"Downloading file, please wait..."});

function ChangeImages(record) {

	var CoverUrlList = record.data.MovieCoverUrl;
	var FanartUrlList = record.data.MovieFanartUrl;
	
	var storeCovers =  new Ext.data.ArrayStore({
			data: CoverUrlList,
			autoLoad: true,
			fields: ['thumb','url', 'title', 'currentCover']
	});
	
	var storeFanarts =  new Ext.data.ArrayStore({
		data: FanartUrlList,
		autoLoad: true,
		fields: ['thumb','url', 'title', 'currentFanart']
	});
	
	function changeXBMCCover() {
		loadingMask.show();
		var selNode = viewCovers.getSelectedRecords();

		// selNode contains only one item
		downloadXBMCFile(selNode[0].data.url, record.data.thumbnail );
		//update main Movie form
		Ext.getCmp('cover').refreshMe();
		loadingMask.hide();
		
	}
	
	function changeXBMCFanart() {
		loadingMask.show();
		var selNode = viewFanarts.getSelectedRecords();

		// selNode contains only one item
		downloadXBMCFile(selNode[0].data.url, record.data.fanart);

		//update main Movie form
		Ext.getCmp('fanart').refreshMe();
		loadingMask.hide();
		
	}
	
	var viewFanarts = new Ext.DataView({
		tpl: fanartTpl,
		autoHeight:true,
		id: 'tabfanarts',
		multiSelect: true,
		overClass:'x-view-over',
		itemSelector:'div.thumb-wrap',
		emptyText: 'No images to display',
		store: storeFanarts,
		title: 'Fanarts',
		listeners: {
			 'selectionchange': function () {
				var selNode = viewFanarts.getSelectedRecords();
				if (selNode[0].data.title != "Current") {
					Ext.getCmp('choosebutton').enable();
				}
				else { Ext.getCmp('choosebutton').disable()}
				
			}
		 }
	})

	var viewCovers = new Ext.DataView({
		tpl: coverTpl,
		autoHeight:true,
		id: 'tabcovers',
		singleSelect: true,
		//width:435,
		frame:true,
		overClass:'x-view-over',
		itemSelector:'div.thumb-wrap',
		emptyText: 'No images to display',
		store: storeCovers,
		title: 'Covers',
		listeners: {
			 'selectionchange': function () {
				var selNode = viewCovers.getSelectedRecords();
				if (selNode[0].data.title != "Current") {
					Ext.getCmp('choosebutton').enable();
				}
				else { Ext.getCmp('choosebutton').disable()}
				
			}
		 }
	})

	var imagePanel = new Ext.TabPanel({
			id:'images-view',
			bodyStyle: 'background-color:#777777',
			layoutOnTabChange: true,
			//width:435,
			activeTab:0,
			autoHeight:true,
			title:'Simple DataView',
			items: [viewCovers, viewFanarts]
	})

	var preview = new Ext.Container ({
	id: 'preview',
	border: 0,
	autoEl: {tag: 'img', src: "../images/defaultMovieFanart.jpg"},
	updateSrc :function(v){
		this.el.dom.src = v
	}
});
	
	var fp = new Ext.FormPanel({
        fileUpload: true,
        width: 500,
		height: 300,
        frame: true,
        title: 'Upload Form',
        //autoHeight: true,
        labelWidth: 100,
		defaults: {width: 200},
        items: [{
            xtype: 'textfield',
			id: 'myUrl',
            fieldLabel: 'From URL'
        },{
			xtype: 'textfield',
			id:'myLocal',
			inputType: 'file',
			fieldLabel: 'From Local'
        }, preview],
		buttons: [{
			text: 'Close',
			handler: function(){
				uploadWin.hide();
			}
		},{
			text: 'Preview',
			handler: function(){
				if (Ext.getCmp('myUrl').getValue() != ""){
					var v = Ext.getCmp('myUrl').getValue();
				}
				else {
					var v = Ext.getCmp('myLocal').getValue();
					console.log(Ext.getCmp('myLocal').files[0].getAsBinary());
				}
					preview.updateSrc(v);
					fp.getForm().submit({url: '../test'})
				
			}
		}]
    });
	
	var uploadWin = new Ext.Window({
	    layout:'fit',
		width:500,
		height:300,
		closeAction:'hide',
		plain: true,
		items: [fp]
	});
	

	var winImages = new Ext.Window({
		layout:'fit',
		margins: '5 5 5 0',
		width:600,
		height:400,
		title: 'Change cover and Fanart',
		closeAction:'hide',
		//plain: true,
		items: imagePanel,
		autoScroll: true,
		buttons: [{
			text: 'Choose',
			disabled: true,
			id: 'choosebutton',
			handler: function(){
				if (imagePanel.getActiveTab().id == 'tabcovers'){changeXBMCCover()};
				if (imagePanel.getActiveTab().id == 'tabfanarts'){changeXBMCFanart()};
				
			}
		},{
			text: 'Done',
			handler: function(){
				winImages.hide();
			}
		}]
	});
	winImages.show()
	
}



