Ext.BLANK_IMAGE_URL = '../../images/resources/images/default/s.gif';

var	main = function(){
	return {
		init : function(){
			detailsmenu.init();
			
		}
	}
}();

var details = function() {
var detail_ds;

	return {
		init:function() {
			
			detail_ds = new Ext.data.Store({
				proxy: new Ext.data.HttpProxy({
					url: 'common.php?ctrl=detail'
				}),
				reader: new Ext.data.XmlReader({
					record: 'row',
					totalRecords: '@total',
					id: 'pid'
				}, [
				   {name: 'pid'},
				   {name: 'name'},
				   {name: 'region'},
				   {name: 'desc'},
				   {name: 'image'},
				])
			});
			detail_ds.load();
			
			var detail_page_Tpl = new Ext.XTemplate(
				'<tpl for="."><table width="100%" border="0" cellspacing="6" cellpadding="5">' +
			  '<tr>' +
				'<td>Ana sayfa -&gt; Projects -&gt; {name}</td>' +
			  '</tr>' +
			  '<tr>' +
				'<td><table width="100%" border="0" cellspacing="0" cellpadding="0">' +
				  '<tr>' +
					'<td width="28%"><div id="image-box"><img src="../images/project/{image}" width="405" height="332" /></div></td>' +
					'<td width="72%" valign="top"><table width="100%" border="0" cellspacing="5" cellpadding="2">' +
					  '<tr>' +
						'<td>{name}</td>' +
					  '</tr>' +
					  '<tr>' +
						'<td>{region}</td>' +
					  '</tr>' +
					  '<tr>' +
						'<td>{desc}</td>' +
					  '</tr>' +
					  '<tr>' +
						'<td><div id="images-menu">menu</div></td>' +
					  '</tr>' +
					'</table></td>' +
				  '</tr>' +
				  '<tr>' +
					'<td><div id="paging-cnt"></div></td>' +
					'<td>&nbsp;</td>' +
				  '</tr>' +
				'</table></td>' +
			  '</tr>' +
			'</table></tpl>');
			
			
			var detail_view = new Ext.DataView({
					store: detail_ds,
					tpl: detail_page_Tpl,
					singleSelect: false,
					autoHeight:true,
					itemSelector:'span',
					applyTo: 'detail-view'
			});
			
			var details_panel = new Ext.Panel({
				frame:false,
				autoHeight:true,
				collapsible:false,
				layout:'fit',
				title:'Kayitli Baktiklarim',
				border:false,
				items: detail_view,
				applyTo: 'detail-content'
			});
			
		
		} // end init
		, addPaging:function() {
			var pagingbar  = new Ext.PagingToolbar({
				pageSize: 1,
				store: detail_ds,
				displayInfo: true,
				displayMsg: 'Displaying topics {0} - {1} of {2}',
				emptyMsg: "No topics to display",
				applyTo:'paging-cnt'
			 })	
		}
	} // end return
}(); //end details

var detailsmenu = function() {
	return {
		init:function() {
			

			var tpl = new Ext.XTemplate(
				'<tpl for=".">',
					'<div class="image-item {cls}" id="image-{#}"><div><img src="../class.thumb.php?file={icon}&amp;w=90&amp;h=88" />  </div><span>{title}</span></div>',
				'</tpl>'
    		);
			tpl.overwrite('images-menu', images_data);
			
			var imageTpl = new Ext.XTemplate(
					'<tpl for="images">',
						'<img src="../class.thumb.php?file={image}&amp;w=405&amp;h=332" /><br/>',
						'<div>{title}</div>',
					'</tpl>'
			);
/*
'<tpl for="images">',
'<a href="{url}" target="_blank">',
	'<img src="../class.thumb.php?file={image}&amp;w=405&amp;h=332" /></a><br/>',
	'<div>{title}</div>',
'</tpl>'
*/
			var menu = Ext.get('images-menu');
			var box = Ext.get('image-box');
		
			var running = null, active = box.child('div.image-slider');
			function clearRunning(){
				running = null;
			}
			
			menu.on('mousedown', function(e, t){
				if(t = e.getTarget('.image-item:not(.image-item-over)')){
					Ext.fly(t).removeClass('image-inactive-over');
					Ext.fly(t).radioClass('image-item-over');
					var s = images_data[t.id.split('-')[1]-1];
		
					if(running){
						running.stopFx();
					}
					if(active){
						active.slideOut('b', {duration:.35, remove:true});
					}else{
						box.child('img').remove();
					}
					s.el = new Ext.Element(document.createElement('div'));
					s.el.addClass('image-slider');
					s.el.enableDisplayMode();

						imageTpl.overwrite(s.el.dom, s);

					s.el.appendTo(box);
					s.el.slideIn('l', {callback: clearRunning, duration:.55});
					running = s.el;
					active = s.el;
				}
			});
		
			menu.on('mouseover', function(e, t){
				if(t = e.getTarget('.image-item:not(.image-item-over)')){
					Ext.fly(t).addClass('image-inactive-over');
				}
			});
			menu.on('mouseout', function(e, t){
				if((t = e.getTarget('.image-item:not(.image-item-over)')) && !e.within(t, true)){
					Ext.fly(t).removeClass('image-inactive-over');
				}
			});
		} // end init
	} // return
}(); //end detailsmenu

Ext.EventManager.onDocumentReady(main.init, main, true);