var Data = {
	
	clients: [],
	onFailure: null,
	onSuccess: null,

	load: function(file) {
		var date = new Date();
		new Ajax.Request(file, {
			method:'get',
			parameters: {date: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()},
			onSuccess: function(transport){	
				var doc = transport.responseXML.documentElement; 
				
				var clients = doc.getElementsByTagName('client');
				for(var i = 0, cnt = clients.length; i < cnt; ++i) {
					var client = {};
					client.name = clients[i].getElementsByTagName('name')[0].firstChild.data;
					client.images = clients[i].getElementsByTagName('image');
					client.titles = clients[i].getElementsByTagName('title');
					client.descriptions = clients[i].getElementsByTagName('description');
					client.movies = clients[i].getElementsByTagName('movie');
					Data.clients.push(client);
				}
				if(Data.onSuccess) Data.onSuccess(Data);
			},
			onFailure: function() { 
				if(Data.onFailure) Data.onFailure(Data);
			}
		});
	},
	
	get: function(id) {
		var client = Data.clients[id];
		var obj = {};
		obj.versions = [];
		obj.name = client.name;
		for(var i = 0, cnt = client.images.length; i < cnt; ++i) {
			var version = {};
			version.image = client.images[i].firstChild.data;
			version.title = client.titles[i].firstChild.data;
			version.description = client.descriptions[i].firstChild.data;
			version.movie = client.movies[i].firstChild.data;
			obj.versions.push(version);
		}
		return obj;
	},
	
	size: function() {
		return Data.clients.length;
	}

}



var Viewer = {

	data: null,
	currentlyActive: 0,

	init: function(data) {
		Viewer.data = data;
		Viewer.buildList(data);
		Viewer.select(0);
	},
	
	buildList: function(clients) {
		var list = '<ul>';
		
		for(var i = 0, cnt = clients.size(); i < cnt; ++i) {
			list += '<li><a href="#" onclick="Viewer.select('+i+'); return false" class="client-'+i+'">'+clients.get(i).name+'</a></li>';
		}
		list += '</ul>';
		$('client-list').update(list);
	},
	
	buildVersions: function(client) {
		var links = '<ul><li class="title">VERSIONS</li>';
		var total = client.versions.length;
		for(var i = 0; i < 8; ++i) {
			if(i < total) {
				links += '<li><a href="#" onclick="Viewer.selectVersion('+i+'); return false">'+(i+1)+'</a></li>';
			} else {
				links += '<li>'+(i+1)+'</li>';
			}
		}
		$('version-links').update(links + '</ul>');
	},
	
	buildText: function(version) {
		$('preview-title').update(version.title);
		$('preview-description').update(version.description);
	},
	
	buildImage: function(version) {
		$('preview-img').src = version.image;
	},
	
	buildMovie: function(versionID) {
		$('play-movie-link').onclick = function() {
			Viewer.selectMovie(versionID);
		};
	},
	
	select: function(id) {
		var client = Viewer.data.get(id);
		var ele = $$('#client-list ul li a.on')[0];
		if(ele) ele.removeClassName('on');
		Viewer.buildVersions(client);
		Viewer.currentlyActive = id;
		Viewer.selectVersion(0);
		$$('#client-list ul li a.client-' + id)[0].addClassName('on');
	},
	
	selectVersion: function(id) {
		var ele = $$('#version-links ul li a.on')[0];
		if(ele) ele.removeClassName('on');
		var client = Viewer.data.get(Viewer.currentlyActive);
		Viewer.buildImage(client.versions[id]);
		Viewer.buildText(client.versions[id]);
		Viewer.buildMovie(id);
		var links = $$('#version-links ul li a');
		if(links.length >= id) links[id].addClassName('on');
	},
	
	selectMovie: function(id) {
		var client = Viewer.data.get(Viewer.currentlyActive);
		var movie = client.versions[id].movie;
		var win = window.open('videos/' + movie,'video','width=675,height=400');
		win.focus();
	}
}


Event.observe(window, 'load', function(e) {
	Data.onSuccess = function(data) {
		Viewer.init(data);
	};
	Data.load('data/clients.xml');
});