Hey all,

I'm working on my first real Javascript attempt. It'll be an AJAX-like image/video gallery using JSON. I'm using the Prototype library.

I have a few problems which I can't seem to figure out.

URLs
Using Zend_Router I can place my site in any public directory I want. All links will automatically change to the proper URL. At the moment I want to do an AJAX request, things get more difficult. Currently, I use the action attribute of a form element. But, when I want to use the returned data (in this case, item.filename) to display thumbnails for instance, I can't figure out a satisfying way to get the path to images (/baseUrl/gallery/images/thumbs/).

Double requests
Another problem I experience is that I have double requests. First to load the actual page, second to let Javascript be aware of the current viewed label (as this is parsed by PHP on the first page request). I think I need to get this info from the displayed website, but it's giving me a head-ache.


I hope I explained the problems well, here's some code:

Code:
Event.observe(window, 'load', initialize, false);

var gallery = null;

function initialize() {
	gallery = new Gallery();
}

var Gallery = new Class.create();
Gallery.prototype = {
	
	/**
	 * Viewed label
	**/
	label: null,
	
	/**
	 * Constructor
	 * Observes $('labelId') and triggers this.getLabel
	 * 
	 * Todo!!!
	 * - On window.onLoad, fetch already parsed label
	**/
	initialize: function() {
		
		Event.observe('labelId', 'change', this.getLabel, false);
	},
	
	/**
	 * Creates a new Label object in this.label
	**/
	getLabel: function() {
		this.label = new Label($('labelId').value);
	},
	
	/**
	 * Todo!!!
	 * - Get thumbnail directory from somewhere
	**/
	parseThumbs: function() {
		var thumbsContainer = $('thumbsContainer');
		var thumbDirectory = '';
		
		thumbsContainer.innerHTML = '';
		
		if(this.label.items.length == 0) {
			return;
		}
		
		this.label.items.each(function(item) {
			thumbsContainer.appendChild(item.create(thumbDirectory));
		});
	},
	
	/**
	 * Todo:
	 * - Parse given item to preview
	**/
	parsePreview: function() {
		
	}
	
}

var Label = new Class.create();
Label.prototype = {
	
	/**
	 * LabelID
	**/
	id: null,
	/**
	 * Title of the label
	**/
	title: null,
	/**
	 * Array of items
	**/
	items: new Array(),
	
	/**
	 * Constructor
	 * Creates item objects
	 * 
	 * Todo:
	 * - Assigns label info
	**/
	initialize: function() {
		var labelIdForm = $('labelIdForm');
		new Ajax.Request(
			labelIdForm.action,
			{
				parameters: labelIdForm.serialize(),
				onComplete: function() {
					gallery.parseThumbs();
				}
			}
		);
	}
	
}

var Item = Class.create();
Item.prototype = {
	
	id: null,
	mimetype: 'image/jpeg',
	filename: null,
	filesize: null,
	width: null,
	height: null,
	
	/**
	 * Constructor
	**/
	initialize: function(item) {
		this.id = item.id;
		this.mimetype = item.mimetype;
		this.filename = item.filename;
		this.filesize = item.filesize;
		this.width = item.width;
		this.height = item.height;
	},
	
	/**
	 * Create item output based on mimetype
	**/
	create: function(itemPath) {
		switch(this.mimetype) {
			default:
			case 'image/jpeg': 
			case 'image/jpg': 
			case 'image/gif': 
			case 'image/png':
				var item = new Image();
				item.src = itemPath + this.filename;
				item.alt = this.filename;
			break;
			
			case 'video/mpeg':
				alert('Video is not supported yet');
			break;
		}
		
		return item;
	}
	
}
Offcourse, If I made other mistakes, I'll be glad to hear them!

Thanks in advance.