[Mike007]

I have some code that opens a enlarged view of a picture from a thumbnail, and allows the user to look through it. There is some animation, which works fine, but then an XML document I created that stores the pictures file names and a date. Here is what the XML file looks like:

<?xml version="1.0" encoding="UTF-8"?>
<imageset xmlns:tns="http://www.example.org/images" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.example.org/images images.xsd ">
  <image>
    <filename>Capture_08092007_171921.jpg</filename>
    <date>2008-12-23</date>
  </image>
  <image>
    <filename>Capture_08092007_171901.jpg</filename>
    <date>2008-12-26</date>
  </image>
  <image>
    <filename>Capture_08092007_171551.jpg</filename>
    <date>2008-12-25</date>
  </image>
</imageset>

Here is the XML schema file:

<?xml version="1.0" encoding="UTF-8"?>
<schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.example.org/images" xmlns:tns="http://www.example.org/images" elementFormDefault="qualified">
<element name="imageset">
	<complexType>
		<all>
			<element name="image">
				<complexType>
					<all>
						<element name="filename" type="string" />
						<element name="date" type="date" />
					</all>
				</complexType>
			</element>
		</all>
	</complexType>
</element>
</schema>

Now the code is first called with this parameter from an onclick event: viewEnlarged("pics/images/Capture_08092007_171921.jpg"). The code associated with the problem is this:

/**
 * Loads an xml file into a parser object and return the object.
 * @param String filename The filename
 * @return Object The xml parser.
 */
function xmlLoadFileParser(filename)
{
	var xmlDoc;
	
	if(IE)
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async = "false";
		xmlDoc.load(filename); 

	}
	else
	{
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.async = "false";
		xmlDoc.load(filename);
	}
	
	return xmlDoc;
}

function viewEnlarged(picture)
{
	if(boolDoAgain == "Open")
	{
		if(FF || NS)
		{
			unitPostfix = "px";
		}
		
		animation_time = 0;
		width = 0;
		height = 0;
		
		darkLayer = CreateDynamicLayer("darkLayer");
		pictureLayer = CreateDynamicLayer("pictureLayer");
		
		// Layer style
		if(IE)
		{
			darkLayer.style.filter = "alpha( style=0,opacity=" + DARK_LAYER_OPACITY * 100 +")";
		}
		else
		{
			darkLayer.style.opacity = DARK_LAYER_OPACITY;
		}
		
		centerLayer();
		
		loadFilenames();
		
		// find the current picture in the gallery
		pictureIndex = indexOfFilename(picture.substring(picture.lastIndexOf("/") + 1));
		
		// display loading as needed
		pictureLayer.innerHTML = "<img src=\"" + LOADING_PIC + "\" />";
		
		picObj = new Image();
		picObj.onload = openEnlargedPicture;
		picObj.src = picture;
	}
}
function indexOfFilename(filename)
{
	var found = false;
	var index = -1;
	
	for(var i = 0; i < pictures.length && !found; i++)
	{
		if(pictures[i][1] == filename)
		{
			found = true;
			index = i;
		}
	}
	
	return index;
}
/**
 * Loads the file names of the images so we can go forward and backward.
 * @access private
 * @return
 */
function loadFilenames()
{
	var xmlDoc = xmlLoadFileParser("pics/images.xml");
	
	// raw data
	var filenameNodes = xmlDoc.getElementsByTagName("filename");
	var dateNodes = xmlDoc.getElementsByTagName("date");
	
	// create a table with the following fields -- date, filename -- using a two dimensional array.
	for(var i = 0; i < filenameNodes.length && i < dateNodes.length; i++)
	{
		pictures.push(new Array(dateNodes[i].firstChild.nodeValue, filenameNodes[i].firstChild.nodeValue));
	}
	
	pictures.sort(sortByDate)
}

/**
 * Sorts two records passed as 1-D arrays. The date MUST be the first value in the array.
 * @param Array record1 The first record.
 * @param Array record2 The second record.
 */
function sortByDate(record1, record2)
{
	return compareDates(record1[0], record2[0]);
}

/**
 * Compares 2 dates returning a negative number if the first date is smaller than the second one,
 * a positive number if the first date is greater than the second date, and zero if the dates are equal.
 * @param String strDate1 The first date. Format: "yyyy-mm-dd".
 * @param String strDate2 The second date. Format: "yyyy-mm-dd".
 * @access private.
 * @return
 */
function compareDates(strDate1, strDate2)
{
	var splitDate1 = strDate1.split("-");
	var splitDate2 = strDate2.split("-");
	var date1 = new Date(splitDate1[0], splitDate1[1] - 1, splitDate1[2] - 1);
	var date2 = new Date(splitDate2[0], splitDate2[1] - 1, splitDate2[2] - 1);
	
	return date1.valueOf() - date2.valueOf();
}

function showNextPicture()
{
	destroyEnlargedPicture();
	viewEnlarged(imagesDir + "/" + pictures[pictureIndex + 1][1]);
}

The problem occurs on in the showNextPicture() function in Firefox. For some reason pictures is empty. But when I go through it using a step by step debugger it works fine. The function responsible for filling that array with data is loadFileNames(). Now, a problem like that usually means that the file was not loaded before the code was executed. But, as you can see, I set async to false in xmlLoadFileParser() which actually loads the XML file and returns a parser object. So I am quite lost honestly. In IE this works just fine.

All the code:

/**
 * Loads an xml file into a parser object and return the object.
 * @param String filename The filename
 * @return Object The xml parser.
 */
function xmlLoadFileParser(filename)
{
	var xmlDoc;
	
	if(IE)
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async = "false";
		xmlDoc.load(filename); 

	}
	else
	{
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.async = "false";
		xmlDoc.load(filename);
	}
	
	return xmlDoc;
}

/**
 * This module is used to open a picture using a nice animation effect.
 * @author Michael Yagudaev
 * @copyrights Michael Yagudaev
 * @version 2.0
 */
// constants
var PICTURE_PADDING = 40;
var DARK_LAYER_OPACITY = 0.7;
var ANIMATION_LENGTH = 2500; // length in miliseconds
var INTERVAL = 50;
var NUMBER_FRAMES = ANIMATION_LENGTH / INTERVAL; 

var LOADING_PIC = "/images/Loading.gif";
var PREV_ICON = "/images/left_arrow_icon.gif";
var PREV_DISABLED_ICON = "/images/left_arrow_disabled_icon.gif";
var NEXT_ICON = "/images/right_arrow_icon.gif";
var NEXT_DISABLED_ICON = "/images/right_arrow_disabled_icon.gif";
var CLOSE_ICON = "/images/close_icon.gif";

var imagesDir = "pics/images";

var animation_time;
var width;
var height;
var boolDoAgain = "Open";
var unitPostfix = "";

var maxWidth;
var maxHeight;
var speed;
var pictureLayer;
var darkLayer;
var speedFactor;
var statusLayer;
var picObj;
var picRatio;

var loadingLayer;

var pictures = new Array(); // A table with the following fields: date, filename.
var pictureIndex = -1; // The picture number in the current gallery

//preload loading graphics
var loadingObj = new Image();
var closeIconObj = new Image();
var prevIconObj = new Image();
var nextIconObj = new Image();
var prevIconDisabled = new Image();
var nextIconDisabled = new Image();

loadingObj.src = LOADING_PIC;
closeIconObj.src = CLOSE_ICON;
prevIconObj.src = PREV_ICON;
nextIconObj.src = NEXT_ICON;

loadExternalFile("css/animation_effects.css", "css");

/**
 * 
 * @param picture
 * @return
 */
function viewEnlarged(picture)
{
	if(boolDoAgain == "Open")
	{
		if(FF || NS)
		{
			unitPostfix = "px";
		}
		
		animation_time = 0;
		width = 0;
		height = 0;
		
		darkLayer = CreateDynamicLayer("darkLayer");
		pictureLayer = CreateDynamicLayer("pictureLayer");
		
		// Layer style
		if(IE)
		{
			darkLayer.style.filter = "alpha( style=0,opacity=" + DARK_LAYER_OPACITY * 100 +")";
		}
		else
		{
			darkLayer.style.opacity = DARK_LAYER_OPACITY;
		}
		
		centerLayer();
		
		loadFilenames();
		
		// find the current picture in the gallery
		pictureIndex = indexOfFilename(picture.substring(picture.lastIndexOf("/") + 1));
		
		// display loading as needed
		pictureLayer.innerHTML = "<img src=\"" + LOADING_PIC + "\" />";
		
		picObj = new Image();
		picObj.onload = openEnlargedPicture;
		picObj.src = picture;
	}
}

function indexOfFilename(filename)
{
	var found = false;
	var index = -1;
	
	for(var i = 0; i < pictures.length && !found; i++)
	{
		if(pictures[i][1] == filename)
		{
			found = true;
			index = i;
		}
	}
	
	return index;
}

/**
 * This function opens an enlarged picture view using the given large size picture.
 * @access public
 * @param String picture A path to the picture.
 */
function openEnlargedPicture()
{
	if(boolDoAgain == "Open")
	{		
		// reset image event handler
		picObj.onload = null;
		
		// Get picture Max size
		maxWidth = picObj.width + PICTURE_PADDING;
		maxHeight = picObj.height + PICTURE_PADDING;
		picRatio = maxWidth / maxHeight;
		
		// Layer HTML content
		var navigationHTML = "<div id=\"picture_navigation\" style=\"display: none;\"><img id=\"prevIcon\" src=\"" + prevIconObj.src + "\" onclick=\"showPreviousPicture();\"/><img id=\"nextIcon\" src=\"" + nextIconObj.src + "\" onclick=\"showNextPicture();\"/></div>";
		var closeButtonHTML = "<div id=\"close_icon\" style=\"display: none;\"><img id=\"closeIcon\" src=\"" + closeIconObj.src + "\" onclick=\"closeEnlargedPicture();\" /></div>";
		var pictureHTML = "<div id=\"large_picture_wrapper\" style=\"width: " + picObj.width + "px; height: " + picObj.height + "px; display: none;\"><img src=\"" + picObj.src + "\" id=\"PictureID\" /></div>";
		var HTMLContent = closeButtonHTML + pictureHTML + navigationHTML;
		
		pictureLayer.innerHTML = HTMLContent;

		var picture_length = Math.sqrt(Math.pow(maxWidth, 2) + Math.pow(maxHeight, 2));
		speedFactor = Math.pow(NUMBER_FRAMES, 3) / (6 * picture_length);
		
		// start animation
		boolDoAgain = setInterval("openingAnimation()", INTERVAL);
	}
}

/**
 * Creates a display of the status showing the current animation speed.
 */

function closeEnlargedPicture()
{
	if(boolDoAgain == "Close")
	{
		document.getElementById("pictureLayer").innerHTML = "";
		step = 5;
		boolDoAgain = setInterval("closingAnimation()", INTERVAL);
	}
}

/**
 * Takes care of the animation side of opening an enlarged picture. This function will be called over
 * and over again by a timer function to change the scene.
 * @access private
 */
function openingAnimation()
{
	pictureLayer.style.width = Math.round(width) + unitPostfix;
	pictureLayer.style.height = Math.round(height) + unitPostfix;
	
	centerLayer();
	
	
	// check if we finished opening the layer
	if(animation_time == NUMBER_FRAMES)
	{
		// yes, stop the opening prosses
		clearInterval(boolDoAgain);
		// make sure we have the exact height and width we wanted
		pictureLayer.style.width = maxWidth + unitPostfix;
		pictureLayer.style.height = maxHeight + unitPostfix;
		
		document.getElementById("large_picture_wrapper").style.display = "block";
		document.getElementById("picture_navigation").style.display = "block";
		document.getElementById("close_icon").style.display = "block";
		document.getElementById("close_icon").onclick = closeEnlargedPicture;
		
		speed = 0;
		animation_time = 0;
				
		// html content to add
		var HTMLContent = "<p class=\"picture_size\">" + (maxHeight - PICTURE_PADDING) + "X" + (maxWidth - PICTURE_PADDING) + "</p>";
		pictureLayer.innerHTML += HTMLContent;
		
		boolDoAgain = "Close";
	}
	else
	{
		// No, continue uncovering the rest of the layer
		var length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
		
		animation_time += 1;
		speed = Math.round(findSpeed(animation_time));
		
		length += speed;
		height = length / Math.sqrt(Math.pow(picRatio, 2) + 1);
		width = height * picRatio;
	}
}

/**
 * Just like opening animation, but just the opposite effect. Function is called by a timer to
 * animate the closing of the picture in enlarged view mode.
 * @private
 */
function closingAnimation()
{
	pictureLayer.style.width = width + unitPostfix;
	pictureLayer.style.height = height + unitPostfix;
	
	centerLayer();
	
	// check if we finished opening the layer
	if(animation_time == NUMBER_FRAMES)
	{
		// yes, stop the opening prosses
		clearInterval(boolDoAgain);		
		destroyEnlargedPicture();
	}
	else
	{
		// No, continue folding the layer
		var length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
		animation_time += 1;
		speed = Math.round(findSpeed(animation_time));
		
		length -= speed;
		height = length / Math.sqrt(Math.pow(picRatio, 2) + 1);
		width =  height * picRatio;
	}
}

/**
 * Cleans up after we are done with the enlarged view mode of that picture.
 * @return
 */
function destroyEnlargedPicture()
{
	DestroyDynamicLayer("pictureLayer");
	DestroyDynamicLayer("darkLayer");
	
	animation_time = 0;
	speed = 0;
	boolDoAgain = "Open";
}

/**
 * Centers the picture layer to the middle of the page (document)
 */
function centerLayer()
{
	var top;
	var left;
	
	// reset position to stay in the center of the page
	top = (getDocumentHeight() / 2) - (height / 2);
	left = (getDocumentWidth() / 2) - (width / 2);
	
	if(left < 0)
		left = 0;
	if(top < 0)
		top = 0;
		
	pictureLayer.style.left = Math.round(left) + unitPostfix;
	pictureLayer.style.top = Math.round(top) + unitPostfix;
}

/**
 * Finds the speed at the given time.
 * note: speedFactor most be already set globally.
 * @param int frameNum The frame number
 * @return double The speed.
 */
function findSpeed(frameNum)
{
	// update matamatical variables speed formula is S = -t^2 + t
	return (1 / speedFactor) * ((-1 * Math.pow(frameNum, 2)) + NUMBER_FRAMES * frameNum);
}

/**
 * Loads the file names of the images so we can go forward and backward.
 * @access private
 * @return
 */
function loadFilenames()
{
	var xmlDoc = xmlLoadFileParser("pics/images.xml");
	
	// raw data
	var filenameNodes = xmlDoc.getElementsByTagName("filename");
	var dateNodes = xmlDoc.getElementsByTagName("date");
	
	// create a table with the following fields -- date, filename -- using a two dimensional array.
	for(var i = 0; i < filenameNodes.length && i < dateNodes.length; i++)
	{
		pictures.push(new Array(dateNodes[i].firstChild.nodeValue, filenameNodes[i].firstChild.nodeValue));
	}
	
	pictures.sort(sortByDate)
}

/**
 * Sorts two records passed as 1-D arrays. The date MUST be the first value in the array.
 * @param Array record1 The first record.
 * @param Array record2 The second record.
 */
function sortByDate(record1, record2)
{
	return compareDates(record1[0], record2[0]);
}

/**
 * Compares 2 dates returning a negative number if the first date is smaller than the second one,
 * a positive number if the first date is greater than the second date, and zero if the dates are equal.
 * @param String strDate1 The first date. Format: "yyyy-mm-dd".
 * @param String strDate2 The second date. Format: "yyyy-mm-dd".
 * @access private.
 * @return
 */
function compareDates(strDate1, strDate2)
{
	var splitDate1 = strDate1.split("-");
	var splitDate2 = strDate2.split("-");
	var date1 = new Date(splitDate1[0], splitDate1[1] - 1, splitDate1[2] - 1);
	var date2 = new Date(splitDate2[0], splitDate2[1] - 1, splitDate2[2] - 1);
	
	return date1.valueOf() - date2.valueOf();
}

function showNextPicture()
{
	destroyEnlargedPicture();
	viewEnlarged(imagesDir + "/" + pictures[pictureIndex + 1][1]);
}

function showPreviousPicture()
{
	destroyEnlargedPicture();
	viewEnlarged(imagesDir + "/" + pictures[pictureIndex - 1][1]);
}

This post has been edited by Mike007: 27 December 2008 - 02:15 PM

[baavgai]

ActiveX is bad and evil, so of course firefox doesn't like it.

I'd use XMLHttpRequest to get your xmlDoc. This is cross platform and the heart of AJAX. I've tested the following code on Firefox and it works fine. Should give you some ideas of how to implement your code. There's some other interesting stuff in there, like creating an array of true objects that you may find useful.

<html>
<head>
	<title>XML Test</title>
	<script type="text/javascript">
		var pictures = new Array()
		
		// use XMLHttpRequest, this code works with most
		function getHTTPObject() {
			var xmlHttp;

			try {
				//Firefox, Opera 8.0+, Safari
				xmlHttp = new XMLHttpRequest();
			} catch(e) {
				//Internet Explorer
				try {
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				} catch(e) {
					try {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					} catch(e) {
						// alert("Your browser does not support AJAX!")
						return false;
					}
				}
			}
			return xmlHttp;
		}

		// make a call to the url and send the response to the processor
		function loadData(url) {
			var xmlHttp = getHTTPObject();
			xmlHttp.onreadystatechange = function() {
				if (this.readyState==4 || this.readyState=="complete") { 
					if (this.responseText && this.responseText.length>0) {
						loadFilenames(this.responseXML);
					}
				}
			}
			xmlHttp.open("GET", url, true);
			xmlHttp.send(null);
		}
		
		
		function loadFilenames(xmlDoc) {
			// raw data
			var filenameNodes = xmlDoc.getElementsByTagName("filename");
			var dateNodes = xmlDoc.getElementsByTagName("date");
			
			// create a table with the following fields -- date, filename -- using a two dimensional array.
			for(var i = 0; i < filenameNodes.length && i < dateNodes.length; i++) {
				// alert(filenameNodes[i].firstChild.nodeValue);
				pictures.push(new PicItem(dateNodes[i].firstChild.nodeValue, filenameNodes[i].firstChild.nodeValue));
			}
			
			var sortPred = function(a, b ) {
				return a.getDateValue().valueOf() - b.getDateValue().valueOf();
			}
			pictures.sort(sortPred);
			displayFirst();
		}
		
		function PicItem(dateValue, fileNameValue) {
			//alert(fileNameValue);
			var obj = {};
			obj.fileName = fileNameValue;
			obj.date = dateValue;
			obj.getDateValue = function() {
				var splitDate = this.date.split("-");
				return new Date(splitDate[0], splitDate[1] - 1, splitDate[2] - 1);
			};
			return obj;
		}
		
	
		function displayFirst() {
			var html = "<ul>";
			for(var i = 0; i < pictures.length; i++) {
				var item = pictures[i];
				html += "<li>" + item.fileName + " : " + item.date + "</li>";
			}
			html += "</ul>";
			document.getElementById('show_dat').innerHTML = html;
		}
		
		
		
	</script> 
</head>
<body>
	<div id="show_dat"></div>
	<script type="text/javascript">loadData("file:///home/baavgai/data.xml");</script> 

</body>
</html>

Hope this helps.

edit: bloody smilie highlighter.

This post has been edited by baavgai: 27 December 2008 - 04:09 PM

[Mike007]

Thanks for the quick reply .

I have seen that horribly styled code before, for the getHTTPObject() function I have it in one of my modules too (I can insult it since I know it is not your code but W3C code, I will probably post it on my other topic).

So the problem was staring me in the face this whole time. I thought that you need there are 2 different object associated with AJAX, one is an XML parser, and the other is an object that handles requests to a server. But I guess the xmlHttp object can be used already parses the xml and you can get to nodes normally?

Sorting the 2D array, well, is any significant advantage to using "Classes" and objects instead of a normal javascript 2D array? I have seen that method when I was looking for a way to sort it. But I decided to go with 2D array anyway, since I know how to do that already.

[baavgai]

There are a number of getHTTPObject() type functions. They all have the same idea. They're all ugly has hell. There's really not a lot can be done about that. The whole async thing makes for quirky looking code.

Mike007, on 27 Dec, 2008 - 05:43 PM, said:

Sorting the 2D array, well, is any significant advantage to using "Classes" and objects instead of a normal javascript 2D array?

As a programmer, I hate anonymous values in multidimensional arrays. Sure, I know that position one means this, position two means this, and so on when you're working on it. Will I know what position two means when I look it a week from now, a month, a year? No, I'll have to chase that value down. For no other reason than to be nice to myself, I prefer object over anonymous collections of values.

Another reason, JSON. Getting and parsing XML is a pain in Javascript, no matter how you cut it. If you can somehow take that XML and make it more script friendly, it's easier to work with. I usually set up a service that can spit out JSON on request so I don't have to bother with the parsing.

[Mike007]

Yeah I guess you are right, I did think about that when I went through some amount of code. I remember the fun C trick with enums and arrays, which works great. But javascript doesn't have that, nor does it have associative arrays like php (love those). Didn't really reach the refactoring stage for that particular code, but thanks I apperciate anything that can make my code more readable and better looking .

About JSON, I have seen that trend just the other day, it's pretty new to me. So the idea is that it is a library written in Javascript that can be used to parse data easier than XML? When do I really want to use it instead of XML?

[Mike007]

Wow, works as smooth as butter . Thanks again.

Just wanted to point out that your code didn't work for me the way it is, I had to make one small change. loadData(), this line didn't work if (this.readyState==4 || this.readyState=="complete"). It appears that "this" is scoped to the function, onreadystatechagne function is the equal to "this". What browser did you test it in? FF3? I did my testing on FF2 and IE6.

[baavgai]

Mike007, on 28 Dec, 2008 - 01:47 AM, said:

It appears that "this" is scoped to the function, onreadystatechagne function is the equal to "this". What browser did you test it in?

Thanks for the info. The scoping of "this" is quite funky. I've been burnt by it before. I once saw a book where they simply called it a known bug.

Worked on my browser, Firefox 3.0.5, Ubuntu 8.04 64bit.

FYI, for all practical purposes, you can think of an "object" as an associative array. e.g.

var Foo = {
	'lineCount' : 0,
	'text' : '',
	'domReady' : false
}

if (Foo.domReady) { //...

You can even extend this after the fact...

Do a search on associative array javascript. You'll find they're supported. You'll then find, after a little more digging, that they're actually just objects being dynamically extended. Or maybe the other way around. Something like that.

[Mike007]

Yeah you would think they would have a solid standard for a thing like the this key word. But like somebody wrote on the internet "Javascript The worlds most misunderstood programming language". It was actually the creator of JSON. Or at least it is found on his website.

I will have to look into that associative arrays with javascript.

Got that code up an running on a website I made for my portfolio: http://hitmanbm.byet...13.com/pics.php.