Ext.onReady(function(){
    Ext.QuickTips.init();
	var firstpage = new Ext.Resizable('first-page', {
		wrap:true,
		pinned:true,
		minWidth:50,
		minHeight: 50,
		preserveRatio: true,
		dynamic:true,
		handles: 'none', // shorthand for 'n s e w ne nw se sw'
		draggable:false
	});
	
	var mencustom = new Ext.Resizable('men-custom', {
		wrap:true,
		pinned:true,
		minWidth:50,
		minHeight: 50,
		preserveRatio: true,
		dynamic:true,
		handles: 'none', // shorthand for 'n s e w ne nw se sw'
		draggable:false
	});
	var womencustom = new Ext.Resizable('women-custom', {
		wrap:true,
		pinned:true,
		minWidth:50,
		minHeight: 50,
		preserveRatio: true,
		dynamic:true,
		handles: 'none', // shorthand for 'n s e w ne nw se sw'
		draggable:false
	});
	var women2custom = new Ext.Resizable('women2-custom', {
		wrap:true,
		pinned:true,
		minWidth:50,
		minHeight: 50,
		preserveRatio: true,
		dynamic:true,
		handles: 'none', // shorthand for 'n s e w ne nw se sw'
		draggable:false
	});
	var childcustom = new Ext.Resizable('child-custom', {
		wrap:true,
		pinned:true,
		minWidth:50,
		minHeight: 50,
		preserveRatio: true,
		dynamic:true,
		handles: 'none', // shorthand for 'n s e w ne nw se sw'
		draggable:false
	});
	var thumbs_left = 210;
	var thumbs_top = 100;
	var thumb_size = 80;
	var thumb_gap = 10;
	var bigphoto = new Ext.Resizable('big-photo', {
		wrap:true,
		pinned:true,
		resizeChild: true,
		minWidth: 258,
		maxWidth: 400,
		//widthIncrement: 142,
		//heightIncrement: 100,
		preserveRatio: true,
		dynamic:true,
		handles: 'e',
		draggable:false
	});
	var bigphotoEl = bigphoto.getEl();
	var bigphotow = new Ext.Resizable('big-photo-wide', {
		wrap:true,
		pinned:true,
		resizeChild: true,
		minWidth: 516,
		maxWidth: 800,
		//widthIncrement: 142,
		//heightIncrement: 100,
		preserveRatio: true,
		dynamic:true,
		handles: 'e',
		draggable:false
	});
	var bigphotowEl = bigphotow.getEl();
	var widelist = {};
	widelist['c-1-2'] = true; 
	function showPhoto(e)
	{
		bigphotoEl.dom.firstChild.src = '';
		bigphotoEl.hide();
		bigphotowEl.dom.firstChild.src = '';
		bigphotowEl.hide();
		
		var x = e.getPageX() - thumbs_left; //260
		var y = e.getPageY() - thumbs_top; //170
		var rc = 0;
		if (y > thumb_size)
		{
			var bot1 = thumb_size + thumb_gap;
			var bot = bot1;
			if ((y > bot) && (y < (thumb_size + bot)))
			{
				rc = 1;
			}
			bot += bot1;
			if ((y > bot) && (y < (thumb_size + bot)))
			{
				rc = 2;
			}
			bot += bot1;
			if ((y > bot) && (y < (thumb_size + bot)))
			{
				rc = 3;
			}
		}
		if ((rc === 0) && (y > thumb_size))
		{
			return;
		}
		var row = rc;
		rc = 0;
		if (x > thumb_size)
		{
			var rgt1 = thumb_size + thumb_gap;
			var rgt = rgt1;
			if ((x > rgt) && (x < (thumb_size + rgt)))
			{
				rc = 1;
			}
			rgt += rgt1;
			if ((x > rgt) && (x < (thumb_size + rgt)))
			{
				rc = 2;
			}
			rgt += rgt1;
			if ((x > rgt) && (x < (thumb_size + rgt)))
			{
				rc = 3;
			}
		}
		if ((rc === 0) && (x > thumb_size))
		{
			return;
		}
		var col = rc;

		var basephotoname = this.photoPrefix + '-' + row + '-' + col;
		var photoname = 'photodb/' + basephotoname + '.jpg';
		if (widelist[basephotoname] === true)
		{
			bigphotowEl.dom.firstChild.src = photoname;
			bigphotowEl.show();
		}
		else
		{
			bigphotoEl.dom.firstChild.src = photoname;
			bigphotoEl.show();
		}
	}


	var firstpageEl = firstpage.getEl();
	var mencustomEl = mencustom.getEl();
	mencustomEl.photoPrefix = 'm';
	mencustomEl.on('click', showPhoto, mencustomEl);
	var womencustomEl = womencustom.getEl();
	womencustomEl.photoPrefix = 'w';
	womencustomEl.on('click', showPhoto, womencustomEl);
	var women2customEl = women2custom.getEl();
	women2customEl.photoPrefix = 'w2';
	women2customEl.on('click', showPhoto, women2customEl);
	var childcustomEl = childcustom.getEl();
	childcustomEl.photoPrefix = 'c';
	childcustomEl.on('click', showPhoto, childcustomEl);
	// move to the body to prevent overlap
	document.body.insertBefore(firstpageEl.dom, document.body.lastChild);
	document.body.insertBefore(mencustomEl.dom, document.body.lastChild);
	document.body.insertBefore(womencustomEl.dom, document.body.lastChild);
	document.body.insertBefore(women2customEl.dom, document.body.lastChild);
	document.body.insertBefore(childcustomEl.dom, document.body.lastChild);
	
	//debugger;
	bigphoto.east.el.setWidth(20);
	bigphotow.east.el.setWidth(20);
	
	document.body.insertBefore(bigphotoEl.dom, document.body.lastChild);
	document.body.insertBefore(bigphotowEl.dom, document.body.lastChild);
	
	function hideAll()
	{
		bigphotoEl.dom.firstChild.src = '';
		bigphotoEl.hide();
		bigphotowEl.dom.firstChild.src = '';
		bigphotowEl.hide();
		firstpageEl.hide();
		mencustomEl.hide();
		womencustomEl.hide();
		women2customEl.hide();
		childcustomEl.hide();
	}
	
	hideAll();
	firstpageEl.show(true);
	
	function showPictures()
	{
		if (this.displayElement.isVisible())
		{
			bigphotoEl.dom.firstChild.src = '';
			bigphotoEl.hide();
			bigphotowEl.dom.firstChild.src = '';
			bigphotowEl.hide();
			this.displayElement.hide(true);
			firstpageEl.show(true);
		} 
		else
		{
			hideAll();
			this.displayElement.show(true);
		}
	}
	var dlg = new Ext.BasicDialog("loc-dlg", {
		height: 300,
		width: 300,
		resizable: false,
		fixedCenter: true,
		modal: true,
		proxyDrag: true,
		x: 100,
		y: 100
		//shadow: true
	});
	dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
	dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
	function doLocDialog(b)
	{
		//debugger;
		b.dlg.show();
	}
	var aboutDlg = new Ext.BasicDialog("about-dlg", {
		height: 300,
		width: 300,
		resizable: false,
		fixedCenter: true,
		modal: true,
		proxyDrag: true,
		x: 100,
		y: 100
		//shadow: true
	});
	aboutDlg.addKeyListener(27, aboutDlg.hide, aboutDlg); // ESC can also close the dialog
	aboutDlg.addButton('OK', aboutDlg.hide, aboutDlg);    // Could call a save function instead of hiding
	function doAboutDialog(b)
	{
		aboutDlg.show();
	}
	function gotoOnlinePhotos()
	{
		window.document.location = 'http://lindaholtphoto.homelinux.org:8080/lhp/headshots/';
	}
	function gotoEmailContact()
	{
		window.document.location = 'mailto:linda@lindaholtphoto.com';
	}
	var gen_btn_tmp = new Ext.Template("<button id='{0}'>{0}</button>");
	var menbtn = new Ext.Button('men-headshots-btn', {
			disabled: false,
			pressed: false,
			enableToggle: true,
			toggleGroup: 'pictureButtons',
			minWidth: 60
	});
	menbtn.displayElement = mencustomEl;
	menbtn.on('toggle', showPictures, menbtn);
	var womenbtn = new Ext.Button('women-headshots-btn', {
			disabled: false,
			pressed: false,
			enableToggle: true,
			toggleGroup: 'pictureButtons',
			minWidth: 100
	});
	womenbtn.displayElement = womencustomEl;
	womenbtn.on('toggle', showPictures, womenbtn);
	var women2btn = new Ext.Button('women2-headshots-btn', {
			disabled: false,
			pressed: false,
			enableToggle: true,
			toggleGroup: 'pictureButtons',
			minWidth: 105
	});
	women2btn.displayElement = women2customEl;
	women2btn.on('toggle', showPictures, women2btn);
	var childbtn = new Ext.Button('child-headshots-btn', {
			disabled: false,
			pressed: false,
			enableToggle: true,
			toggleGroup: 'pictureButtons',
			minWidth: 100
	});
	childbtn.displayElement = childcustomEl;
	childbtn.on('toggle', showPictures, childbtn);
	var viewphotosbtn = new Ext.Button('view-photos-btn', {
			disabled: false,
			pressed: false,
			minWidth: 190
	});
	viewphotosbtn.on('click', gotoOnlinePhotos, viewphotosbtn);
	var locationbtn = new Ext.Button('location-btn', {
			disabled: false,
			pressed: false,
			minWidth: 100
	});
	locationbtn.dlg = dlg;
	locationbtn.on('click', doLocDialog, locationbtn);
	var aboutbtn = new Ext.Button('about-btn', {
			disabled: false,
			pressed: false,
			minWidth: 135
	});
	aboutbtn.on('click', doAboutDialog, aboutbtn);
	var contactbtn = new Ext.Button('contact-btn', {
			disabled: false,
			pressed: false,
			minWidth: 95
	});
	contactbtn.on('click', gotoEmailContact, contactbtn);

});