var CustomMetadataDisplay = new KONtx.Class({
	
	ClassName: 'CustomMetadataDisplay',
	
	Extends: KONtx.control.Button,
	
	config: {
		focus: false
	},
	
	initialize: function () {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","initialize");
		this.parent();
		
		var source = this.config.sourceElement || this.config.source;
		if (source) this.attachToSource(source);
		
		this.config.source = null;
		delete this.config.source;
		this.config.sourceElement = null;
		delete this.config.sourceElement;
	},
	
	_createContent: function () {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","_createContent");
		var tk = this.ClassName+'Text',
			ts = Theme.getStyles(tk);
		
		this.content = new KONtx.element.Text({
			id: (this.config.id||this._ktxID)+'.content',
			styles: this.config.textStyles || ts
		}).appendTo(this);
	},
	
	attachToSource: function (source) {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","attachToSource");
		if (source === this.source) return this.update();
		this.source = source;
		this._onSourceUpdated.subscribeTo(this.source, ['onStateUpdated','onFocus','onBlur'], this);
		return this._updateContent();
	},
	
	_onSourceUpdated: function (event) {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","_onSourceUpdated");
		switch (event.type) {
		case 'onStateUpdated':
			return this._updateContent(event.payload);
		case 'onFocus':
			this.fire('onFocus');
			this.content.show();
			break;
		case 'onBlur':
			this.fire('onBlur');
			this.content.hide();
			break;
		}
	},
	
	getSourceStartIndex: function () {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","getSourceStartIndex");
		return this.source && this.source.getStartIndex();
	},
	
	getSourceFocusIndex: function () {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","getSourceFocusIndex");
		return this.source && this.source.getFocusIndex();
	},
	
	getSourceDataItem: function (index) {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","getSourceDataItem");
		return this.source && this.source.getDataItem(index);
	},
	
	_updateContent: function (state) {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","_updateContent");
		var start     = state && parseInt(state.startIndex) > -1 ? state.startIndex : this.source.getStartIndex(),
			focused   = state && parseInt(state.focusIndex) > -1 ? state.focusIndex : this.source.getFocusIndex(),
			dataindex = parseInt(start) > -1 && parseInt(focused) > -1 ? start + focused : false,
			dataitem  = dataindex !== false && this.getSourceDataItem( dataindex );
		
		if (dataitem) {
			var updater = this.config.updateMethod || this._updateMethod;
			updater.call && updater.call(this, dataitem);
		}
	},
	
	_updateMethod: function (dataitem) {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","_updateMethod");
		var text = "";
		switch (typeof dataitem) {
		case 'string':
			text = dataitem;
			break;
		case 'object':
			var map = this.config.metadataMap;
			if (map) {
				var key = map.label || map.text;
				text = dataitem[key];
			} else if ('label' in dataitem) {
				text = dataitem.label;
			} else if ('text' in dataitem) {
				text = dataitem.text;
			}
			break;
		}
		this.setText(text);
	},
	
	setText: function (text) {
//		KONtx_automation_log("function","KONtx.control.MetadataDisplay","setText");
		this.content.data = text || "";
	}
});



var TestGridView2 = new KONtx.Class({
	ClassName: 'TestGridView2',
	
	Extends: KONtx.system.SidebarView,

	config: {
		rows:    4,
		columns: 3,
	},

	createView: function (){
		
		var __baseID = (this.id||this.ClassName||this._ktxID+'.ImageGrid');
		
		this.controls = {};
		
		this.controls.backbutton = new KONtx.control.BackButton({
			id: __baseID+'.BackButton',
			label: 'Back Grid Test'
		}).appendTo(this);
		
		//
		// if this seems goofy, it's because we need to create the page
		// indicator and metadata container first so we can measure their
		// height and fit the grid in last.
		//
		this.controls.pageindicator = new KONtx.control.PageIndicator({
			id: __baseID+'.PageIndicator',
			styles: {
				vAlign: 'bottom',
				vOffset: this.height
			}
		}).appendTo(this);
		
//working		this.controls.metadata = new KONtx.control.MetadataDisplay({
		this.controls.metadata = new CustomMetadataDisplay({
			id: __baseID+'.Metadata',
			styles: {
				height: KONtx.utility.scale(40),
				vAlign: 'bottom',
				vOffset: this.height - this.controls.pageindicator.height
			},
		}).appendTo(this);
				
		this.controls.grid = new KONtx.control.Grid({
			id: __baseID+'.Grid',
			rows: this.config.rows,
			columns: this.config.columns,
			styles: {
				width: this.width,
				height: this.height - 
							this.controls.backbutton.height - 
							this.controls.pageindicator.height - 
							this.controls.metadata.height,
				vOffset: this.controls.backbutton.height
			},
			cellCreator: this.imageCellCreator,
			cellUpdater: this.imageCellUpdater
		}).appendTo(this);
		
		//
		// and now that everyone's created, let's introduce them to each other.
		//
		this.controls.grid.attachAccessories( this.controls.pageindicator, this.controls.metadata );
	},
	
	updateView: function (){
		var arr = [];
		for(var i = 0; i < 20; i++) {
			arr.push({
				label: "Test "+i,
				description: "some description "+i,
            	imageSrc: "http://l.yimg.com/eur.yimg.com/i/fr/hp/yahoo1.png",
			});
		}
		this.controls.grid.changeDataset(arr, true);
	},
	
	//
	// cell create/update methods get fired in context of grid
	//
	imageCellCreator: function () {
		return new KONtx.control.PhotoGridCell({
			styles: this.getCellDimensions(),
			events: {
				// this onSelect fires in context of cell
				onSelect: function (event){
					//TODO : some code here...
				}
			}
		});

	},
	
	imageCellUpdater: function (cell, dataitem) {
		//TODO: use setSources to set missingSrc and loadingSrc
		cell.setSource(dataitem.imageSrc);
	},
	

});