/**
 * Loads the skin and its images.
 * 
 * @author Joey Line <joey.line@skiclubz.com>
 */
 
(function($) {
	zPlayer.prototype.skinner = function(completeHandler) {
		this.skin = {
			_completeHandler: completeHandler,
			_error: false,
			_loading: false,
			_root: this.config.skin.substr(0, this.config.skin.lastIndexOf('/')),
			settings: {}
		};
		
		this.skin._loading = true;
		
		$.ajax({
			url: this.config.skin,
			context: this,
			error: function(xhr, errorString, e) {
				// display error message
				this.skin._error = true;
				// FIXME: This needs a better fallback.
				zPlayer.utils.log('Error loading skin.');
			},
			success: function(xml) {
				zPlayer.utils.log('skin xml loaded!', this.id);
				var settings = $('skin settings setting', xml);
				for(var settingIndex = 0; settingIndex < settings.length; settingIndex++) {
					var value = $(settings[settingIndex]).attr('value');
					if(value.substr(0, 2)=='0x') { // color value, replace 0x with # for use
						value = '#' + value.substr(2);
					}
					this.skin.settings[$(settings[settingIndex]).attr('name')] = value;
				}
				
				var components = $('component', xml);
				if (components.length === 0) {
					return;
				}
				
				for (var componentIndex = 0; componentIndex < components.length; componentIndex++) {
					var componentName = $(components[componentIndex]).attr('name');
					
					this.skin[componentName] = {
						settings: {},
						elements: {}
					};
					var elements = $(components[componentIndex]).find('element');
					for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
						// zPlayer.utils.log('about to load image ', $(elements[elementIndex]).attr('name'), this.skin[componentName], this.id);
						this.skinner.loadImage(this, elements[elementIndex], componentName);
						// zPlayer.utils.log('after loadImage', this.id);
					}
					var settings = $(components[componentIndex]).find('setting');
					for (var settingIndex = 0; settingIndex < settings.length; settingIndex++) {
						this.skin[componentName].settings[$(settings[settingIndex]).attr("name")] = $(settings[settingIndex]).attr("value");
					}
				}
				
				this.skin._loading = false;
				
				var player = this;
				this.skin._completeInterval = setInterval(function() {
					for (var component in player.skin) {
						for (var element in player.skin[component].elements) {
							if (!player.skin[component].elements[element].ready) {
								return;
							}
						}
					}
					
					if (player.skin._loading === false) {
						clearInterval(player.skin._completeInterval);
						zPlayer.utils.log('Skin images loaded for #' + player.id);
						player.skin._completeHandler(player);
					}
				}, 100);
			}
		});
	};
	
	zPlayer.prototype.skinner.loadImage = function(player, element, component) {
		var img = new Image(),
			name = $(element).attr('name'),
			src = [player.skin._root, component, $(element).attr('src')].join('/');
		
		// zPlayer.utils.log('loading image...', component, $(element).attr('name'), player.id);
		player.skin[component].elements[name] = {
			height: 0,
			width: 0,
			src: 0,
			ready: false
		};
		
		$(img).load(player.skinner.imageLoadedHandler(player, component, name));
		$(img).error(function() {
			// FIXME: Should more error handling go here? Maybe fake it somehow?
			zPlayer.utils.log('Error loading image!', component, element, player);
			player.skin[component].elements[name].ready = true;
		});
		
		img.src = src;
	};
	
	// This is done in two functions to make sure that player is the right player at the time of
	// the callback.
	zPlayer.prototype.skinner.imageLoadedHandler = function(player, component, element) {
		return function() {
			player.skin[component].elements[element].height = this.height;
			player.skin[component].elements[element].width = this.width;
			player.skin[component].elements[element].src = this.src;
			player.skin[component].elements[element].ready = true;
		}
	}
})(jQuery);