landscapes = new Array(
  "Positano.jpg", "Positano, view from the Amalfi coast hills, Italy.",
  "Amalfi.jpg", "Amalfi, Duomo, Italy.",
  "Atrani.jpg", "Town of Atrani on the Amalfi coast, Italy.",
  "Pozzuoli.jpg", "Fishermen's boats in Pozzuoli's harbour, Italy.",
  "Pompei.jpg", "Roman arch in Pompeii, Italy.",
  "Victoria.jpg", "Victoria harbor, British Columbia, Canada.",
  "CastelDellOvo.jpg", "Castel dell'Ovo, Naples, Italy.",
  "CastelDelMonte.jpg", "Castel del Monte, near Bari, Italy.",
  "Milano.jpg", "Duomo from the Gallery, Milano, Italy.", 
  "Padula.jpg", "Vanvitelli stairs, Certosa of Padula, Italy."
);

food = new Array(
  "Fresella.jpg", "Baked \"Fresella\" with fresh tomatoes, garlic and oregano.", 
  "Vongole.jpg", "Linguine with clams.",
  "Pasta.jpg", "Pasta, tomatoes, basil and a lemmon.",
  "Zucchine.jpg", "Spaghetti with zucchini.",
  "Fichi.jpg", "Figs plate.", 
  "Mele.jpg", "Apples \"annurche\" from the Caserta fields.",
  "Mackerel.jpg", "Mackerel fishes in a plate.", 
  "Bruschette.jpg", "Bruschette with sun-dried tomatoes.",
  "FishAndChips.jpg", "Fish and chips.",
  "Salmon.jpg", "Salmon sandwitch.",
  "Hummus.jpg", "Hummus."
);

nature = new Array(
  "CanadaLake.jpg", "Lake Garibaldy, British Columbia, Canada.",
  "Butchart.jpg", "The Butchart Gardens, Victoria island, Britich Columbia, Canada.",
  "Spring.jpg", "Spring blossoms.",
  "Gaiola.jpg", "La Gaiola, Naples, Italy.",
  "Vesuvio.jpg", "Vesuvio, Italy.",
  "Beach.jpg", "Beach at the end of Summer; Sardinia, Italy.",
  "Dune.jpg", "Sand dunes at Teulada, Sardinia, Italy.",
  "Gruyeres.jpg", "Cows on the grass in Gruyères, Switzerland." 
);

animals = new Array(
  "Lemure.jpg", "Black & white ruffed lemur in Andasibe reserve, Madagascar.",
  "Camaleonte.jpg", "Chemeleon in Andasibe reserve, Madagascar.",
  "Pellicani.jpg", "Pelicans near a lake",
  "Jellyfish-1.jpg", "Flower Hat Sea Jelly (Olindias Formosa).",
  "Jellyfish-2.jpg", "Sea nettle Jellyfish (Chrysaora quinquecirrha).",
  "Leone.jpg", "Quiet Lion in a Zoo."
);



galleries = new Array(food, landscapes, nature, animals);

th_galleries = new Array(
  "food.jpg", "Food",
  "landscapes.jpg", "Towns",
  "nature.jpg", "Nature",
  "animals.jpg", "Animals"
);

darkGray  = "#404040;";
gray      = "#606060;";
highlight = "#e67696";

imgHiHome = new Image(); imgHiHome.src = "home_hi.gif";
imgHiIsto = new Image(); imgHiIsto.src = "istock_hi.gif";
imgHiArrL = new Image(); imgHiArrL.src = "arrow_left_hi.gif";
imgHiArrR = new Image(); imgHiArrR.src = "arrow_right_hi.gif";

function getGalleryUrl(gallery, index) {
    return "image-" + gallery.toString() + "-" + index.toString() + ".html";
}

function homeLink(displayImage) {
    document.write("<div style=\"width: 125px; text-align: center;",
		   "margin-left: 0px; margin-top: 2px; border-bottom: 1px dotted ", darkGray, ";\">",
		   "<a href='index.html'>",
		   "<img src=\"", 
		   displayImage? "home.gif" : "home_gray.gif", 
		   "\" border=0 ");
    if(displayImage)
	document.write("onMouseOver=\"this.src=imgHiHome.src;\" ",
		       "onMouseOut=\"this.src='home.gif';\"");
    document.write(" style=\"margin-bottom: 4px; margin-top: 4px;\">",
		   "</a>",
		   "</div>");
}

function galleriesThumb(gallery, displayImage) {
   document.write("<div style=\"width: 125px; margin-left: 0px;",
		  "margin-top: 4px; border-bottom: 1px dotted ", darkGray, ";\">",
		   "<div style=\"font-weight: bold; margin-left: 4px;\">Galleries</div>",
		   "</div>");
    for(i=0; i < galleries.length; ++i) {
	var thumb = th_galleries[i*2];
        var caption = th_galleries[i*2+1];
        var link = getGalleryUrl(i, 0);
	var enabled = !(i == gallery && displayImage);
	var borderColor = enabled ? "white" : gray;
        document.write("<div style=\"margin-top: 6px; text-align: center;\">",
		       "<a style=\"color: white;\" href=\"", 
		       link, "\"><img ");
	if(enabled)
	    document.write("onMouseOver=\"this.style.borderColor='", highlight, "';\" ",
			   "onMouseOut=\"this.style.borderColor='", borderColor, "';\" ");
	document.write("style=\"border:2px solid ", borderColor, ";\" src=\"", thumb, "\"><br><i>",
		       caption,"</i></a><br></div>");
    }
}

function istockLink() {
    document.write("<div style='width: 125px; margin-top: 10px; padding-top: 8px; border-top: 1px dotted ", darkGray, "; text-align: center; font-size: 11pt;'>",
		   "<i><a href='http://www.istockphoto.com/Angelafoto' target='_blank'>My portfolio on</a></i><br>",
		   "<a href='http://www.istockphoto.com/Angelafoto' target='_blank'>",
		   "<img style=\"margin-top: 2px;\" src='istock.gif' width=120 height=30 border=0 alt='View My Portfolio' ",
		   "onMouseOver=\"this.src=imgHiIsto.src;\" ",
		   "onMouseOut=\"this.src='istock.gif';\"",
		   "></a></div>");
}

function thumbnails(gallery, index, displayImage) {
    var images = galleries[gallery];
    for(i=0; i < images.length; ++i) {
	var idx = i / 2;
	var link = getGalleryUrl(gallery, idx);
	var thumb = "th_" + images[i++];
	var enabled = !(idx == index && displayImage);
	var borderColor = enabled? "white" : gray;
	if(enabled) document.write("<a href=\"", link, "\">");
	document.write("<img src=\"", thumb, "\" border=0 ");
	if(enabled)
	    document.write("onMouseOver=\"this.style.borderColor='", highlight, "';\" ",
			   "onMouseOut=\"this.style.borderColor='", borderColor, "';\" ");
	document.write("style=\"margin-left: 2px; margin-bottom: 2px; margin-top: 2px; border: 2px solid ", 
		       borderColor, ";\">");
	if(enabled) document.write("</a>");
    }
}

function mainDisplay(gallery, index) {
    var images = galleries[gallery];
    var i = index*2;
    document.write("<div class=\"content\">");
    var image = images[i++];
    var caption = images[i];
    document.write("<div style=\"height: 10px; margin: 0px; padding: 0px; overflow: hidden;\"></div>");
    document.write("<div style=\"text-align: center;\"><img width=500 height=375 src=\"", 
		   image, "\"></div>");
    document.write("<p><div style=\"margin-left: 15px;\">", caption, "</div></p>");
    // [ prev | next ] navigation
    if(index >= 0) {
	document.write("<div style=\"text-align: center; color: ", darkGray, ";\">");
	if(index > 0) {
	    var idx = index - 1;
	    var link = getGalleryUrl(gallery, idx);
	    document.write("<a href=\"", link, "\">",
			   "<img ",
			   "onMouseOver=\"this.src=imgHiArrL.src;\" ",
			   "onMouseOut=\"this.src='arrow_left.gif';\" ",
			   "src=\"arrow_left.gif\" border=0></a>");
	} else {
	    document.write("<img src=\"arrow_left_gray.gif\" border=0>");
	}
	document.write("&nbsp;&nbsp;");
	if(index < images.length / 2 - 1) {
	    var idx = index + 1;
	    var link = getGalleryUrl(gallery, idx);
	    document.write("<a href=\"", link, "\">",
			   "<img ",
			   "onMouseOver=\"this.src=imgHiArrR.src;\" ",
			   "onMouseOut=\"this.src='arrow_right.gif';\" ",
			   "src=\"arrow_right.gif\" border=0></a>");
	} else {
	    document.write("<img src=\"arrow_right_gray.gif\">");
	}
	document.write("</div>");
    }
    document.write("</div>");
}

function content() {
    var url = location.href;
    var splitted = url.split("-");
    var gallery = 0;
    var index = 0;
    var displayImage = false;
    if(splitted.length > 2) {
     gallery = parseInt(splitted[1]);
     index = parseInt(splitted[2]);
     displayImage = true;
    }

    // gallery thumbnails
    document.write("<div style=\"float: left; width: 125px; margin: 0px; padding: 0px;\">");
    homeLink(displayImage);
    galleriesThumb(gallery, displayImage);
    istockLink();
    document.write("</div>");

    // thumbnail array
    document.write("<div style=\"float: right; width: 125px; height: 519px; ",
		   "overflow: auto; margin: 0px; padding: 0px;\">");
    thumbnails(gallery, index, displayImage);
    document.write("</div>");

    // main image display
    if(displayImage) mainDisplay(gallery, index);
}