// Positions and sizes for top left corners of pictures for a rectangle 10 width, 5 height
var postemplate = [{x:.5,y:.5,s:1},{x:1,y:2,s:1.5},{x:3,y:.5,s:4},{x:7.5,y:2,s:1.5},{x:8.5,y:.5,s:1}];
var instid = 0;
var picasaview = function(){
	// Create picture template
	instid++;
	var maintpl = new Ext.XTemplate(
		'<tpl for=".">',
		'<div class="pic">',
		'<img id="img-{id}" src="{url}">',
		'<div id="info-{id}" class="info">',
		'<b>{desc}</b><br>',
		'{date}<br>',
		'<a href="{albumurl}" target="_blank">Click to view album</a>',
		'</div>',
		'</div>',
	'</tpl>' );
	maintpl.compile();

	var resize = function(pan){
		var h = pan.getHeight();
		var w = pan.getWidth();
		var boxh = 5;
		var boxw = 10;
		// Calculate scale and offsets based on a 2:1 ratio
		// Should be done every time the panel resizes
		var scale = Math.min(w/boxw,h/boxh);
//		console.log('scale is '+scale);
		var offw = (w-scale*boxw)/2;
		var offh = (h-scale*boxh)/2;
//		console.log('Panel dimensions are '+scale*boxw+','+scale*boxh);
//		console.log('Offsets are '+offw+','+offh);
		pan.positions = new Array(postemplate.length);
		for (var pi=0; pi<postemplate.length; pi++){
			var p = postemplate[pi];
			var x = Math.floor(p.x*scale+offw);
			var y = Math.floor(p.y*scale+offh);
			var s = Math.floor(p.s*scale);
//			console.log('Placing box size '+s+' at '+x+','+y);
			pan.positions[pi]={x:x,y:y,s:s};
		}
		// Find scale for position 2 in order to properly scale info
		var infosize = pan.positions[2].s;
		for (var pi=0; pi<picpanels.length; pi++){
			resetPanelLayout(picpanels[pi],infosize);
		}
	};
	
	// Create picture panels
	var picpanels = new Array(postemplate.length);
	for (var pi=0; pi<postemplate.length; pi++){
		var pic = new Ext.Panel({
			layout:'fit',
			border:false,
			tpl: maintpl,
			picasapos: pi,
			imgid: pi
		});
		picpanels[pi]=pic;
		pic.on('afterrender',function(rp){
			rp.el.on('click', function(evt, ele, obj){
				//console.log('Clicked on '+ele.innerHTML);
				//console.log('Element position: '+this.picasapos);
				movePanels(this.picasapos);
			}, rp);
		});

	}
	var resetPanelLayout = function(picpanel, infosize){
		var p = picpanel.ownerCt.positions[picpanel.picasapos];
		//console.log('Setting pos and size to '+p.x+','+p.y+'   '+p.s );
		picpanel.setPosition(p.x,p.y);
		picpanel.setSize(p.s,p.s);
		// Set picture and info size
		var idstr = picpanel.ownerCt.instid+'-'+picpanel.imgid;
//		console.log('idstr is '+idstr);
		var image = Ext.fly('img-'+idstr);
		if (null == image) return; // This will happen on first render as loading hasn't created images yet
//		console.log('image is '+image);
		var scale = Math.min(p.s/picpanel.ow, p.s/picpanel.oh);
		image.setSize(Math.floor(picpanel.ow*scale),Math.floor(picpanel.oh*scale));
		var info = Ext.fly('info-'+idstr);
		var infoscale = Math.min(infosize/picpanel.ow, infosize/picpanel.oh);
		info.setSize(Math.floor(picpanel.ow*infoscale),Math.floor(picpanel.oh*infoscale*.25));
		info.setStyle('margin-top',-Math.floor(picpanel.oh*infoscale*.25));
	};
	
	
	// Create main panel
	var picasapanel = new Ext.Panel({
		layout:'absolute',
		cls:'picasapanel',
		instid:instid,
		border:false,
		items:picpanels,
		listeners: {'resize':function(pan){
			//console.log('Resize w,h: '+pan.getWidth()+','+pan.getHeight());
			resize(pan);}
			//'afterrender':function(pan){console.log('Afterrender w,h: '+pan.getWidth()+','+pan.getHeight());resize(pan);}
		}
	});
	// If there's a DOM object for this render to it.
	var picasael = Ext.fly('picasapanel');
	if (null != picasael){
		picasapanel.setHeight(320);
		picasapanel.render(picasael);
	}
	
	var movePanels = function (selected) {
//		console.log('Selected '+selected);
		// Move selected panel to position 2
		if (selected == 2) return;
		var move = 2-selected;
		var sft = move/Math.abs(move);
		var parentx = picasapanel.getPosition()[0];
		var parenty = picasapanel.getPosition()[1];
//		console.log('Parent panel '+parentx+','+parenty);
//		console.log('Shift '+sft+' from move '+move);

		// Shift everything to the desired direction
		for (var pi=0; pi<picpanels.length; pi++){
			var pic = picpanels[pi];
			var newpi = pic.picasapos+sft;
			if (newpi == picpanels.length) newpi=0;
			if (newpi < 0) newpi=picpanels.length-1;
			var newpos = picasapanel.positions[newpi];
//			console.log('Shifting panel '+pic.picasapos+': '+pic.getPosition(true)+' to '+newpos.x+','+newpos.y);
//			console.log('Changing panel size to '+newpos.s);
//			console.log('original img h,w: '+pic.oh+','+pic.ow);
			var scale = Math.min(newpos.s/pic.ow, newpos.s/pic.oh);
			var neww=Math.floor(pic.ow*scale);
			var newh=Math.floor(pic.oh*scale);
			
			pic.el.shift({
				x:newpos.x+parentx,
				y:newpos.y+parenty,
				width:newpos.s,
				height:newpos.s,
				duration:.5});
			pic.body.shift({
				width:newpos.s,
				height:newpos.s,
				duration:.5});
			var idinf = picasapanel.instid+'-'+pi;
			//console.log('Looking for image img-'+idinf);
			var image = Ext.get('img-'+idinf);
			image.shift({
				width:neww,
				height:newh,
				duration:.5});
			var info = Ext.fly('info-'+idinf);
			if (newpi == 2 ) {
				image.removeClass('clickable');
				info.fadeIn({duration:.5,endOpacity:.6});
			} else {
				image.addClass('clickable');
				info.fadeOut({duration:.5});
			}
			pic.picasapos = newpi;
		}
		movePanels.defer(500,this,[selected+sft]);
	}

    var store = new Ext.data.JsonStore({
  	  url: '/cgi-bin/photo.py',
  	  autoLoad: true,
  	  root: 'root',
  	  idProperty:'id',
  	  fields: ['id','desc','date','url','albumurl','thumb',{name:'h', type:'int'},{name:'w',type:'int'}],

  	  //purl: [],
  	  listeners: {
			'load': {fn:function(store, records, options){ 
  	  			//console.log('Loading data...');
					for (var i =0;i<records.length;i++){
						var s = records[i];
						var data = {};
						data.url = s.get('url');
						data.albumurl = s.get('albumurl');
						data.desc = s.get('desc');
						if (data.desc == null){
							data.desc = "";
						}
						data.date = s.get('date');
						data.id = instid+'-'+i;
						data.h = s.get('h');
						data.w = s.get('w');
						picpanels[i].update(data);
						var size = picasapanel.positions[picpanels[i].picasapos].s;
						picpanels[i].oh = data.h;
						picpanels[i].ow = data.w;
						var scale = Math.min(size/data.w, size/data.h);
						//console.log('w,h,s '+data.w+','+data.h+','+scale);
						var image = Ext.get('img-'+data.id); // Uses get because fly changes the return value in later calls
						image.setSize(Math.floor(data.w*scale),Math.floor(data.h*scale));
						// Set info to the scale of position 2
						// Resizing is gonna be ugly
						var info = Ext.fly('info-'+data.id);
						var infosize = picasapanel.positions[2].s;
						var infoscale = Math.min(infosize/data.w, infosize/data.h);
						info.setSize(Math.floor(data.w*infoscale),Math.floor(data.h*infoscale*.25));
						info.setStyle('margin-top',-Math.floor(data.h*infoscale*.25));
						if (picpanels[i].picasapos == 2){
							image.removeClass('clickable');
							info.fadeIn({duration:.5,endOpacity:.6});
						} else {
							image.addClass('clickable');
							info.hide();
						}
					}
				}}
			}
    });

	return picasapanel;
};