// This code is used on my paris photos pages.
// Jonathan Watmough 2006

// ::slide_frame()
// Use the correct slide frame for loaded images
// This gets called when the body is loaded.

function slide_frame() {
	//alert("slide_frame()");

	// Get slide divs in document
	slides = document.getElementsByName( "slide" );

	// Iterate over all the slides
	count = slides.length;
	for( i=0 ; i<count ; i++ ) {

		// Get child img
		for( node=0 ; node<slides[i].childNodes.length ; ++node ) {
			if( slides[i].childNodes[node].className == 'flh' ) {
				pic = slides[i].childNodes[node];
				break;
			}
		}

		// Set offset of image within slide
		w = (160 - pic.width) / 2;
		h = (160 - pic.height)/ 2;
		pic.style.margin= h + "px " + w + "px " + h + "px " + w + "px ";
		pic.style.border="1px dotted black";

		// Check aspect ratio of thumbnail
		if( pic.width > pic.height ) {

			// Give it a landscape slide background
			slides[i].style.background="url('frame-ls.gif')";

		}
		else {
			;
		}
	}

	// Chain "setup_scaling"
	// This basically adds an on_click function to divs to do scaling
	setup_scaling();
}


// ::random_slides()
// Generate some random slides from a known list of thumbnails.

function random_slides( count, path, pathl ) {
	//alert( "random_slides()" );
	var f = "DSC_0308_montmartre.jpg DSC_0309_montmartre_meredith.jpg DSC_0313_montmartre_meredith.jpg DSC_0341_montmartre_sacre_coeur.jpg DSC_0390_paris_notre_dame.jpg DSC_0398_notre_dame_door_carvings.jpg DSC_0402_notre_dame_stained_glass.jpg DSC_0403_notre_dame_stained_glass.jpg DSC_0411_notre_dame_stained_glass.jpg DSC_0424_notre_dame_interior.jpg DSC_0426_notre_dame_interior.jpg DSC_0428_notre_dame_stained_glass.jpg DSC_0431_notre_dame_stained_glass.jpg DSC_0436_notre_dame_interior.jpg DSC_0438_notre_dame_interior.jpg DSC_0439_notre_dame_our_lady.jpg DSC_0448_notre_dame_view.jpg DSC_0450_notre_dame_view_gargoyle.jpg DSC_0462_notre_dame_gargoyles.jpg DSC_0465_notre_dame_bell.jpg DSC_0471_notre_dame_view.jpg DSC_0478_notre_dame_view_gargoyle.jpg DSC_0487_notre_dame_roof_view.jpg DSC_0490_notre_dame_stair.jpg DSC_0497_notre_dame_side.jpg DSC_0500_paris_traffic_collision.jpg DSC_0501_paris_metro_couple.jpg DSC_0509_paris_fountain_st_michel.jpg DSC_0518_eiffel_tower_night.jpg DSC_0529_eiffel_tower_night.jpg DSC_0536_eiffel_tower_tickets_night.jpg DSC_0545_eiffel_tower_night_view.jpg DSC_0551_eiffel_tower_night_view.jpg DSC_0559_eiffel_tower_night_view.jpg DSC_0618_eiffel_tower_night.jpg DSC_0641_eiffel_tower_night_base.jpg DSC_0666_paris_metro.jpg DSC_0673_pere_lachaise.jpg DSC_0675_pere_lachaise.jpg DSC_0684_pere_lachaise_heloise.jpg DSC_0689_pere_lachaise_heloise.jpg DSC_0694_pere_lachaise_crypt.jpg DSC_0696_pere_lachaise_jim_morrison.jpg DSC_0698_pere_lachaise_graves.jpg DSC_0702_pere_lachaise_statue.jpg DSC_0704_pere_lachaise_statue.jpg DSC_0706_pere_lachaise_oscar_wilde.jpg DSC_0717_musee_d_orsay_statues.jpg DSC_0719_musee_d_orsay_foyer.jpg DSC_0726_musee_d_orsay_interior.jpg DSC_0731_musee_d_orsay_clock.jpg DSC_0737_musee_d_orsay_paintings.jpg DSC_0740_musee_d_orsay_paintings_meredith.jpg DSC_0743_musee_d_orsay_painting.jpg DSC_0744_musee_d_orsay_paintings.jpg DSC_0745_musee_d_orsay_paintings.jpg DSC_0758_musee_d_orsay_clock.jpg DSC_0765_musee_d_orsay_clock.jpg DSC_0773_musee_d_orsay_frontage.jpg DSC_0774_musee_d_orsay_legion_d_honnaire.jpg DSC_0775_musee_d_orsay_horse_statue.jpg DSC_0831_paris_grand_palais.jpg DSC_0839_paris_grand_palais_statue.jpg DSC_0850_paris_invalides.jpg DSC_0861_paris_invalides.jpg DSC_0873_paris_invalides_napoleon.jpg DSC_0878_paris_invalides_canon.jpg DSC_0881_paris_invalides_canon.jpg DSC_0883_paris_invalides_canon.jpg DSC_0891_paris_invalides_war_statue.jpg DSC_0892_paris_invalides_war_declaration.jpg DSC_0893_paris_invalides_war_museum.jpg DSC_0895_paris_invalides_war_museum.jpg DSC_0899_paris_invalides_war_museum.jpg DSC_0901_paris_invalides_war_museum.jpg DSC_0903_paris_invalides_war_museum_v1.jpg DSC_0905_paris_invalides_war_museum.jpg DSC_0917_paris_invalides_tomb.jpg DSC_0920_paris_invalides_dome.jpg DSC_0924_paris_invalides_napoleons_tomb.jpg DSC_0929_paris_invalides_throne.jpg DSC_0954_paris_invalides_dome.jpg DSC_0961_paris_invalides_people_dome.jpg DSC_0966_paris_invalides_dome.jpg DSC_0973_paris_invalides_front.jpg DSC_0974_paris_invalides_dome.jpg DSC_0987_paris_invalides.jpg DSC_0989_grand_palais_statue.jpg DSC_0990_grand_palais_statue.jpg DSC_0996_paris_winston_churchill.jpg DSC_0997_paris_petit_palais.jpg DSC_0998_paris_petit_palais_entrance.jpg DSC_1002_paris_champs_thai_red_curry.jpg DSC_1004_paris_arc_d_triomphe.jpg DSC_1006.jpg DSC_1010.jpg DSC_1011.jpg DSC_1012.jpg DSC_1013.jpg DSC_1015.jpg DSC_1017.jpg DSC_1018.jpg DSC_1022.jpg DSC_1032.jpg DSC_1043.jpg DSC_1049.jpg DSC_1055_paris_opera.jpg DSC_1057_paris_opera.jpg DSC_1058_paris_opera.jpg DSC_1060_paris_opera_door.jpg DSC_1064_paris_opera_cafe.jpg DSC_1072_paris_opera.jpg DSC_1077_paris_cartier.jpg DSC_1083_la_madeleine.jpg DSC_1087_la_madeleine.jpg DSC_1091_la_madeleine.jpg DSC_1095_la_madeleine_interior.jpg DSC_1098_la_madeleine_interior.jpg DSC_1108_place_d_concorde.jpg DSC_1112_place_d_concorde.jpg DSC_1113_place_d_concorde.jpg DSC_1121_place_d_concorde.jpg DSC_1124_place_d_concorde.jpg DSC_1126_place_d_concorde.jpg DSC_1131_place_d_concorde.jpg DSC_1137_louvre_park.jpg DSC_1149_louvre_statue_lioness.jpg DSC_1150_louvre_statue.jpg DSC_1154_louvre_statue.jpg DSC_1157_louvre_statue.jpg DSC_1165_louvre_building.jpg DSC_1182_paris_pont_neuf_gargoyles.jpg DSC_1186_paris_father_and_son_cafe.jpg DSC_1189_paris_st_chapelle.jpg DSC_1199_paris_st_chapelle.jpg DSC_1200_paris_st_chapelle.jpg DSC_1204_paris_st_chapelle_stained_glass.jpg DSC_1206_paris_st_chapelle_stained_glass.jpg DSC_1210_paris_st_chapelle.jpg DSC_1215_paris_st_chapelle.jpg DSC_1217_paris_apple_scooter.jpg DSC_1218_paris_haggis_shop.jpg DSC_1239_paris_sacre_coeur.jpg DSC_1247_paris_sacre_coeur_view.jpg DSC_1260_eiffel_tower_day.jpg DSC_1272_montmartre_agile_lapin.jpg DSC_1280_montmartre.jpg DSC_1283_musee_montmartre.jpg DSC_1284_musee_montmartre.jpg DSC_1285_vineyard_montmartre.jpg DSC_1286_paris_catacombs.jpg DSC_1289_paris_catacombs.jpg DSC_1291_paris_catacombs.jpg DSC_1295_paris_catacombs.jpg DSC_1297_paris_catacombs.jpg DSC_1301_paris_catacombs.jpg DSC_1312_paris_catacombs_entrance.jpg DSC_1317_paris_catacombs_bones.jpg DSC_1321_paris_catacombs_bones.jpg DSC_1322_paris_catacombs_bones.jpg DSC_1324_paris_catacombs_bones.jpg DSC_1325_paris_catacombs_bones.jpg DSC_1328_paris_catacombs_bones.jpg DSC_1339_paris_catacombs_bones.jpg DSC_1349_paris_catacombs_bones.jpg DSC_1350_paris_catacombs_plaque.jpg DSC_1352_paris_apple_store.jpg DSC_1357_paris_metro.jpg DSC_1360_paris_art_deco.jpg DSC_1363_paris_art_deco.jpg DSC_1368_paris_sculpture.jpg DSC_1369_paris_st_sulpice.jpg DSC_1371_paris_st_sulpice.jpg DSC_1382_paris_st_sulpice.jpg DSC_1385_paris_st_sulpice_pigalle.jpg DSC_1388_paris_st_sulpice.jpg DSC_1391_paris_st_germaine.jpg DSC_1393_paris_st_germaine_girls.jpg DSC_1398_paris_st_germaine.jpg DSC_1401_paris_st_germaine_statue.jpg DSC_1405_paris_st_germaine.jpg DSC_1408_paris_st_germaine.jpg DSC_1410_paris_st_germaine_painting.jpg DSC_1416_paris_meredith_metro.jpg DSC_1419_paris_cafe.jpg IMG_2368_paris_metro_meredith.jpg IMG_2371_paris_RER_train.jpg IMG_2383_paris_eiffel_tower.jpg IMG_2386_paris_eiffel_tower_meredith.jpg IMG_2389_paris_eiffel_tower.jpg IMG_2390_paris_eiffel_tower.jpg IMG_2411_paris_metro_meredith.jpg hotel_eden_montmartre_room.jpg hotel_eden_montmartre_view_4.jpg montmartre_steps_to_sacre_coeur.jpg paris_cite_st_chapelle2.jpg paris_metro_jules_joffrin_2.jpg paris_metro_jules_joffrin_entrance.jpg paris_notre_dame.jpg";

	// Get an array of image names
	var sa = f.split( " " );

	// Iterate over the images
	for (i = 0; i < count; i++)
	{
		// Pick a random image
		var im = 1 + Math.floor(sa.length * Math.random());

		// Write the slide div and contained image
		document.write( "<div name=\"slide\" alt='" + sa[im] + "' class=\"flh\">" );
		document.write( "<img class=\"flh\" src=\"" + path + sa[im] + "\" large=\"" + pathl + sa[im] + "\" />" );
		document.write( "</div>" );
	}
}

// ::generate_slide()
// Generate a single slide with all the necessary tags.

function generate_slide( patht, pathp, imname, alttext )
{
	// Write the slide div and contained image
	document.write( "<div name=\"slide\" alt=\"" + alttext + "\" class=\"flh\">" );
	document.write( "<img class=\"flh\" src=\"" + patht + imname + "\" large=\"" + pathp + imname + "\"></img>" );
	document.write( "</div>" );
}


// ::setup_scaling()
// Called to attach a scaling procedure to all the slides in a web page.

function setup_scaling() 
{
	// Get all the divs in the document
	var divs = document.getElementsByTagName( "div" );

	// Iterate over the divs
	for (var i = 0; i < divs.length; i++)

		// If it's a slide div ...
		if (divs[i].className == 'flh')
		{
			// Get the contained image
			var img = divs[i].getElementsByTagName('img')[0];		

			// Set the state to 'small' and set the scaling proc of the slide div
			img.state = 'small';
			divs[i].onclick = scale;

//debugging if you need it, just show all the image attributes	
//alert( "setup an image " + img.state + " " + img.smallSrc + " " + img.smallSrc + " " + img.smallWidth + " " + img.smallHeight + " " + img.largeSrc + " " + img.largeHeight + " " + img.largeWidth + " " + img.ratio  );
		}
}


// ::scale()
// Called when user clicks on a slide. Causes the slide to be scaled.
// The background is messed up. This routine might be replaced with a
// popup routine instead.

function scale()
{
	var div = this;
	var img = this.getElementsByTagName('img')[0];
	if( img.state=='small' ) {

		// set up for sizing
		img.smallSrc = img.getAttribute('src');
		img.smallWidth = img.width;
		img.smallHeight = img.height;

		// Get large image details
		img.largeSrc = img.getAttribute('large');
		img.largeWidth = img.width * 4;
		img.largeHeight = img.height * 4;

		// Set attributes (why?)
		img.setAttribute( "width", img.width );
		img.setAttribute( "height", img.height );
		img.ratio = img.smallHeight / img.smallWidth;
		img.src = img.smallSrc;

		// Save the difference between div size and image size and image
		img.divExtraWidth = 160 - img.width;
		img.divExtraHeight = 160 - img.height;
		img.divBackgroundImage = div.style.background;

		//alert( "clicked img " + img.state + " " + img.smallSrc + " " + img.smallSrc + " " + img.smallWidth + " " + img.smallHeight + " " + img.largeSrc + " " + img.largeHeight + " " + img.largeWidth + " " + img.ratio  + " " + img.divExtraWidth + " " + img.divExtraHeight + " " + img.divBackgroundImage );
	}
	
	if (! img.preloaded)
	{
		// Preload the large image if necessary
		img.preloaded = new Image();
		img.preloaded.src = img.largeSrc;
	}

	// Start the interrupts ... and return
	var interval = window.setInterval(scaleStep, 10);
	return false;
	
	// Called on events ...
	function scaleStep()
	{
		var step = 30;
		var width = parseInt(img.getAttribute('width'));
		var height = parseInt(img.getAttribute('height'));
		
		if (img.state == 'small')
		{
			width += step;
			height += Math.floor(step * img.ratio);
			
			img.setAttribute('width', width);
			img.setAttribute('height', height);
			
			div.style.width = width + img.divExtraWidth;
			div.style.height = height + img.divExtraHeight;
			
			if (width > img.largeWidth - step)
			{
				img.setAttribute('width', img.largeWidth);
				img.setAttribute('height', img.largeHeight);
				img.setAttribute('src', img.largeSrc);

				// Set the final size and image of the containg div (slide)
				div.style.width = img.largeWidth + img.divExtraWidth;
				div.style.height = img.largeHeight + img.divExtraHeight;

				window.clearInterval(interval);
				img.state = 'large';
			}
		}
		else
		{
			width -= step;
			height -= Math.floor(step * img.ratio);

			img.setAttribute('width', width);
			img.setAttribute('height', height);

			div.style.width = width + img.divExtraWidth;
			div.style.height = height + img.divExtraHeight;
			
			if (width < img.smallWidth + step)
			{
				img.setAttribute('width', img.smallWidth);
				img.setAttribute('height', img.smallHeight);
				img.src = img.smallSrc;
				window.clearInterval(interval);
				
				// Set final (default) size of div (slide)
				div.style.width = 160;
				div.style.height = 160;

				img.state = 'small';
			}
		}
	}			
}