var onMove = function(th,x,y){
	var xMax = window.innerWidth-this.width, yMax = window.innerHeight-this.height;
	if(x<0||y<0||x>xMax||y>yMax){
		if(x<0) x=0;
		if(y<0) y=0;
		if(x>xMax) x=xMax;
		if(y>yMax) y=yMax;
		this.setPosition(x, y);
	}
};
	
var ObjectImageView = function (fn, annot, id, w, h){
	if(fn=="NO") return;
	fn = "photos/large/" + fn;

	var oldMarker = myGMap.selPhMarker;
	myGMap.selPhMarker = id;
	if(oldMarker>-1){
		myGMap.phMarkerIcon(oldMarker);
	};
	myGMap.phChMarkerIcon(id);
	
	myGMap.phChMarkerIcon(id);
	var largePhotoPanelTpl = new Ext.XTemplate(
		'<tpl >',
		'<div>',
		'<img src="{fn}">',		
		'</div>',
		'</tpl>'	
	);
	var largePhotoPanel = new Ext.Panel({	
		id: 'large_photo_panel_tpl',
		height: 'auto',
		layout:'fit',
		items:[largePhotoPanelTpl]
	});	
	var win = Ext.getCmp('view-win-image');
	if(win) win.close();
	win = new Ext.Window({
		id:'view-win-image',
		width: w+16,
		height: h+34,
		title: annot,
		resizable: false,
		items:[largePhotoPanel],
		listeners:{
			move: onMove
		}
	});
	win.setSize(w+16, h+34);
	win.show();
	largePhotoPanelTpl.overwrite(Ext.getCmp('large_photo_panel_tpl').body, {fn : fn});	
}
var photoOverOut = function(id, type){
	if(type){
		myGMap.phChMarkerIcon(id);
	}else{
		myGMap.phMarkerIcon(id);
	}	
}

var PanImageView = function (r){
	var fn = r.get('photo_file_url');
	var w = r.get('width');
	var top = r.get('height');
	var owner_name = r.get('owner_name');
	var owner_url = r.get('owner_url');	
	
	var annot = r.get('photo_title');
	var panoHeight = (w<500)?42:30;
	var h = top + panoHeight, left = w - 153;
	var logoTop = panoHeight/2 - 11;
	
	var largePhotoPanelTpl = new Ext.XTemplate(
		'<tpl >',
		'<div style="background:url({fn}); width:{w}; height:{h};">',
			'<div id="panoram" style="background:#cfe5c8; position:absolute; top:{top}px; left:0px; width:{w}; height:{ph}px;">',
				'<div style="float:left;"><img style="position:absolute; top:{lt}px; left:-10px;" src="images/pano-logo.png "></div>',
				'<div style="position:absolute; top:2px; left:154px;">Photos provided by Panoramio are under the copyright of their owners.',
				'<br>Owner: <a style="text-decoration:none;" target="_blank" href="{owner_url}">{owner_name}</a></div>',
			'</div>',
		'</div>',
		'</tpl>'
	);
	var largePhotoPanel = new Ext.Panel({	
		id: 'large_photo_panel_tpl',
		height: 'auto',
		layout:'fit',
		items:[largePhotoPanelTpl]
	});	
	var win = Ext.getCmp('view-win-image');
	if(win) win.close();
	win = new Ext.Window({
		id:'view-win-image',
		width: w+16,
		height: h+34,
		title: annot,
		resizable: false,
		items:[largePhotoPanel],
		listeners:{
			move: onMove
		}
	});	
	win.setSize(w+16, h+34);
	win.show();
	largePhotoPanelTpl.overwrite(Ext.getCmp('large_photo_panel_tpl').body, {fn:fn, w:w, h:h, top:top, owner_url:owner_url, 
		owner_name:owner_name, ph:panoHeight, lt:logoTop});	
}

var WebCamView = function (camurl, w, h){
	if(camurl){
		var largePhotoPanelTpl = new Ext.XTemplate(
			'<tpl >',
			'<div> <img src="{camurl}"> </div>',
			'</tpl>'
		);
		var largePhotoPanel = new Ext.Panel({	
			id: 'large_photo_panel_tpl',
			height: 'auto',
			layout:'fit',
			items:[largePhotoPanelTpl]
		});	
		var win = Ext.getCmp('view-win-image');
		if(win) win.close();
		win = new Ext.Window({
			id:'view-win-image',
			width: w+16,
			height: h+34,
			title: 'WebCamera',
			resizable: false,
			items:[largePhotoPanel],
			listeners:{
				move: onMove
			}
		});
		win.setSize(w+16, h+34);
		win.show();
		largePhotoPanelTpl.overwrite(Ext.getCmp('large_photo_panel_tpl').body, {camurl:camurl});
	}
}

var youtubeView = function (video_id, annot){
	var ytPanel = new Ext.Panel({
		id: 'ytPanel',
		height: 'auto',
		width: 'auto',
		layout:'fit',
		html:'<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/'+video_id+
		'&hl=ru&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>'+
		'<embed src="http://www.youtube.com/v/'+video_id+'&hl=ru&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" '+
		'allowfullscreen="false" width="425" height="344"></embed></object>'
	});
	var win = Ext.getCmp('youtube-video');
	if(win) win.close();
	win = new Ext.Window({
		id:'youtube-video',
		width: 100,
		height: 100,
		resizable: false,
		layout:'fit',
		title: annot,
		listeners:{
			move:onMove
		},
		items: ytPanel
	});
	win.setSize(441, 378);
	win.show();
}