/* This file depends on storyboard.js */

function adopt_ratio() {
	var ratio = Storyboard['format'];
	Storyboard['height'] = Math.round(Storyboard['display']/ratio);
	jQuery('div#drag_container img[alt="background"], div#drag_container img[alt="overlay"], div#drag_container').css({
		'height': Storyboard['height']
	});
	jQuery('div#drag_container img[alt="floor"]').css({
		'top': Storyboard['height']-72
	});
	updateMenuPosition();
	for (var cclass in Storyboard) {
		if (cclass.match(/^(bot|ballon|object|record)$/)) {
			for (var object in Storyboard[cclass]) {
				var difference = 0; 
				// positive values of difference mean that the element would stick out to the bottom an consequently need to be raised to stay withing the Screen
				if (cclass == 'ballon') {
					difference = (1*Storyboard[cclass][object]['top'] + 1*Storyboard[cclass][object]['height'] - Storyboard['height'])
					if (difference > 0) {
			   		var top = 1*Storyboard[cclass][object]['top'];
			   		jQuery('div#drag_container div#ballon_' + object).css({
			   			'top': top - difference
			   		});
			   	}
				} else if (cclass == 'bot') {
					difference = (1*Storyboard[cclass][object]['y'] + 193 - Storyboard['height']);
					if (difference > 0) {
			   		var top = 1*Storyboard[cclass][object]['y'];
			   		jQuery('div#drag_container div#bot_' + object).css({
			   			'top': top - difference
			   		});
						Storyboard[cclass][object]['y'] -= difference;
			   	}
				} else if (cclass == 'record') {
					difference = (1*Storyboard[cclass][object]['y'] + 32 - Storyboard['height']);
					if (difference > 0) {
			   		var top = 1*Storyboard[cclass][object]['y'];
			   		jQuery('div#drag_container div#record_' + object).css({
			   			'top': top - difference
			   		});
						Storyboard[cclass][object]['y'] -= difference;
			   	}
				} else if (cclass == 'object') {
					if (object.match(/^cloud_/)) {
						var id = object.replace(/^cloud_/,'');
			   		var cloudHeight = jQuery('#object_cloud_' + id).css('height');
						cloudHeight = cloudHeight.replace(/px$/,'');
						difference = (1*Storyboard[cclass][object]['y'] + 1*cloudHeight - Storyboard['height']);
						if (difference > 0) {
				   		var top = 1*Storyboard[cclass][object]['y'];
				   		jQuery('div#drag_container div#object_' + object).css({
				   			'top': top - difference
				   		});
							Storyboard[cclass][object]['y'] -= difference;
				   	}
			   	} else if (object.match(/^(sun|moon)$/)) {
						difference = (1*Storyboard[cclass][object]['y'] + 80 - Storyboard['height']);
						if (difference > 0) {
				   		var top = 1*Storyboard[cclass][object]['y'];
				   		jQuery('div#drag_container div#object_' + object).css({
				   			'top': top - difference
				   		});
							Storyboard[cclass][object]['y'] -= difference;
				   	}
					}
				}
			}
		}
	}
	jQuery('div#drag_container img[alt="background"]').attr('style','');
	var source = jQuery('div#drag_container img[alt="background"]').attr('src');
	var isSystem = false;
	if (source.match(/\/background\/sky\//)) {
		isSystem = true;
	}
	update_background(source,isSystem);
	jQuery('div#extEditor div#smallPreview').animate({
		height:140/ratio
	})
	saveScreen();
}

function change_Title(text) {
	jQuery('div#extEditor div#Title span').text(text);
}

function deleteBot(bot) {
	jQuery('div#extEditor div.modalControls').empty().append('<img src="/osr/giflib/ajax-loader.gif">');
	var ajaxData = {
		sid: sid,
		mode: 'ajax_delete_bot',
		bot: bot,
		ajax_retry: 'deleteBot("'+bot+'")'
	};
	updateCounter('extEditorDeleteBot','start',langDeleteBotRequest);
	jQuery.ajax({
		async: false,
		data: ajaxData,
		success: function() {
			updateCounter('extEditorDeleteBot','success',langDeleteBotSuccess);
			jQuery('div#extEditor div#Preview').empty();
			oldBotName = null;
			jQuery('li#' + bot + ', div#' + bot + ', div#bot_' + bot + ', img.loadDeleteBot').remove();
			if (typeof(Storyboard['bot'][bot]) != 'undef') {
		 		delete Storyboard['bot'][bot];
		 	}
			jQuery('div#extEditor div#BotControl, div#extEditor div#Parts div').hide();
		},
		error: function() {
			updateCounter('extEditorDeleteBot','error',langDeleteBotError,ajaxData);
		}
	})
}

function event_BotList_click(caller) {
	SaveBot = new Object();
	var id = jQuery(caller).attr('id');
	var html = '<input type="hidden" id="botname" value="' + id + '">' + jQuery(caller).find('.hiddenBot').children('div').html();
	jQuery('div#extEditor input#botName:visible').val(id);
	oldBotName = id;
	jQuery('div#extEditor div#Preview').empty().append(html);
	jQuery('div#extEditor div#Preview').find('img').click(function(){
		showPreview(this);
	})
	jQuery('div#extEditor div#BotControl').show();
}

function event_Cloud_click(caller){
	var ajaxData = {
		sid: sid,
		projectid: story,
		mode: 'extended_editor_add_cloud',
		add_cloud: jQuery(caller).attr('name'),
		ajax_retry: 'event_Cloud_click('+caller+');' //retry does not work here as I have to find a way to transport objects
	}  // FIXME riiiiiight about here!
	updateCounter('createCloud','start',langCreateCloudRequest);
	jQuery('div#extEditor div#CloudPreview').hide().append('<img src="/osr/giflib/ajax-loader.gif" class="ajaxLoader CloudPreview">');
	jQuery.ajax({
		data: ajaxData,
		success: function(){
			updateCounter('createCloud','success',langCreateCloudSuccess);
			update_tabs('c');
			hideEditor();
		},
		error: function(){
			updateCounter('createCloud','error',langCreateCloudError,ajaxData);
			jQuery('div#extEditor div#CloudPreview').show().find('img.ajaxLoader').remove();
		}
	})
}

function hideEditor() {
	jQuery('div#recordGenerator').show();
	jQuery('div#extEditor').find('*').unbind();
	jQuery('div#extEditor').fadeOut(function(){
		jQuery('div#blur').fadeOut(function() {
			jQuery('div#extEditor').remove();
			jQuery('div#blur').remove();
		})
	})	
}

function showEditor(caller) {
	jQuery('div#recordGenerator').hide();
	jQuery('body').append('<div id="blur"></div>');
	jQuery('body').append('<div id="extEditor"></div>');
	jQuery('div#extEditor').append(
		'<div id="Title" class="title">' +
			'<span>NOBODY EXPECTS THE SPANISH INQUISITION!!!</span>' +
			'<img title="'+langCloseExtEditor+'" class="cancel" src="/osr/icons/kde/crystalclear/64x64/actions/button_cancel.png">' +
		'</div>' + 
		'<div id="tabs">' +
			'<img title="'+langExtEditorSceneTab+'" id="Scene" class="tab" src="/osr/icons/kde/crystalclear/64x64/actions/thumbnail.png">' +
			'<img title="'+langExtEditorCloudTab+'" id="Cloud" class="tab" src="/osr/icons/kde/storyboard/64x64/cloud.png">' + 
			'<img title="'+langExtEditorBotTab+'" id="Bot" class="tab" src="/osr/icons/kde/storyboard/64x64/bot.png">' + 
			'<img id="selection" class="tab" src="/osr/icons/kde/crystalclear/64x64/actions/field.png">' +
		'</div>' + 
		'<div id="content">' +
		'</div>'
	);
	change_Title(langExtendedEditor);
	jQuery('div#blur').fadeIn(function() {
		jQuery('div#extEditor').fadeIn(function() {
			css = jQuery(caller).attr('id');
			if (css == 'editScene') {
				updateHighlight(0);
			} else if (css == 'cloudGenerator') {
				updateHighlight(1);
			} else if (css == 'botGenerator') {
				updateHighlight(2);
			}
		})
	});	
	
	jQuery('div#extEditor img.cancel').click(function (){
		hideEditor();
	})
	
	jQuery('img#Cloud.tab').click(function() {
		jQuery('div#extEditor div#content').find('*').unbind().remove();
		extTabCloud();
	})
	
	jQuery('img#Bot.tab').click(function() {
		jQuery('div#extEditor div#content').find('*').unbind().remove();
		extTabBot();
	})
	
	jQuery('img#Scene.tab').click(function() {
		jQuery('div#extEditor div#content').find('*').unbind().remove();
		extTabScene();
	})
	
	eyeCandy();
}

function showPreview(caller) {
	var id = jQuery(caller).attr('alt');
	jQuery('div#extEditor div#Parts').find('div').hide();
	jQuery('div#extEditor div#Parts div#' + id).show().find('li img').click(function() {
		var part = jQuery(this).parents('div:first').attr('id');
		var partName = jQuery(this).attr('title')
		var image = jQuery(this).attr('src');
		updateBot(part, image);
		SaveBot[part] = partName;
	});
}

function showDeleteDialog(json) {
	jQuery('div#extEditor').find('*').hide();
	var DialogPosition = new Object();
	jQuery('div#extEditor').animate({
		top: (jQuery(window).height()-220)/2,
		left: (jQuery(window).width()-400)/2,
		width: 400,
		height: 220 
	},500);
	jQuery('div#extEditor').append('<div id="DeleteBot" class="modal"></div>');
	jQuery('div#extEditor div#DeleteBot').append('<div class="title">'+langDeleteBot+'</div>' +
		'<div class="content" style="padding:2px;"></div>'
	);
	jQuery('div#extEditor div.content').append(
		'<p>'+ langDeleteBotText1 + json.counter + langDeleteBotText2 + '</p>' +
		'<p style="margin-bottom:0px;">' + langDetailedView + ':</p>' +
		'<ul class="modalList" style="max-height:100px; width:99%; overflow: auto; padding:4px 1px;border: solid 1px; margin-top:0"></ul>' +
		'<div class="modalControls" style="text-align: center;">' +
			'<button class="modalYes" style="margin: 2px;"><img src="/osr/icons/kde/crystalclear/16x16/actions/button_ok.png" class="floatl">'+langDeleteBotYes+'</button>' +
			'<button class="modalNo" style="margin: 2px;"><img src="/osr/icons/kde/crystalclear/16x16/actions/button_cancel.png" class="floatl">'+langDeleteBotNo+'</button>' +
		'</div>'
	);
	for (var inStory in json.stories) {
		var inScreens = new Array();
		for (var inScreen in json.stories[inStory]) {
			inScreens.push(json.stories[inStory][inScreen]);
		}
		jQuery('div#extEditor ul.modalList').append(
			'<li>' + inStory + ' ('+langScreens+': ' + inScreens.join() + ')'
		)
	}
	
	jQuery('div#extEditor button.modalNo').click(function() {
		hideDeleteDialog();
	});
	
	jQuery('div#extEditor button.modalYes').click(function() {
		deleteBot(oldBotName);
		hideDeleteDialog();
	});
}

function hideDeleteDialog() {
	jQuery('div#extEditor div#DeleteBot').unbind().remove();
	jQuery('div#extEditor').animate({
		height: '70%',
		width: '60%',
		left: '20%',
		top: '15%'
	},500)
	jQuery('div#extEditor').find('*:not(.hiddenBot, .previewWindow)').show();
	if (jQuery('div#extEditor div#Preview:empty').size() == 1) {
		jQuery('div#extEditor div#BotControl').hide();
	}
	jQuery('div#extEditor img.loadDeleteBot').remove();
}

function eyeCandy() {
	jQuery('div#extEditor img.tab').click(function() {
		updateHighlight(this);
	})
}

function update_background(source, isSystem){
	if (!isSystem) {
		source.replace(/\/tn_/, '');
		jQuery('div#drag_container img[alt="background"]').attr('src', source);
		jQuery('div#drag_container img[alt="background"]').attr('style', '');
		var height = jQuery('div#drag_container img[alt="background"]').height();
		var width = jQuery('div#drag_container img[alt="background"]').width();
		var ratio = Storyboard['format'];
		//Don't touch the paddings, they are correct!
		if (height * ratio > width) {
			var padding = (Storyboard['display'] - (width * (Storyboard['height'] / height))) / 2;
			jQuery('div#drag_container img[alt="background"]').css({
				'height': Storyboard['height'],
				'padding-left': padding
			});
		} else {
			var padding = (Storyboard['height'] - (height * (Storyboard['display'] / width))) / 2;
			jQuery('div#drag_container img[alt="background"]').css({
				'width': Storyboard['display'],
				'padding-top': padding,
				'padding-bottom': padding
			});
		}
	} else {
		jQuery('div#drag_container img[alt="background"]').attr('src', source).attr('style', '');
		jQuery('div#drag_container img[alt="background"]').css({
			'width': Storyboard['display'],
			'height': Storyboard['height']
		});
	}
}

function updateBot(part, image) {
	jQuery('div#extEditor div#Preview').find('img[alt="' + part + '"]').attr('src',image);
}

function updateHighlight(pNumber) {
	var p = '';
	if (typeof(pNumber) == 'object') {
		p = jQuery(pNumber).position();
	} else if (typeof(pNumber) == 'number') {
		p = jQuery('div#extEditor img.tab:eq(' + pNumber + ')').position();
		switch(pNumber) {
			case 0: extTabScene(); break;
			case 1: extTabCloud(); break;
			case 2: extTabBot(); break
		}
	}
	jQuery('div#extEditor img#selection:hidden').show();
	jQuery('div#extEditor img#selection').animate({
		left: p.left,
		top: p.top
	})
}

function upload_oke(id, folder, file) {
	var source = '/' + folder + '/' + file;
	Storyboard['background'] = 'custom3:' + source
	uploadMode = 2;
	update_background(source,false);
	saveScreen('_storyboard_'+story,file);
	jQuery('div#extEditor div#smallPreview img[alt="background"]').attr('src',source);
	jQuery('div#extEditor li#Background').trigger('click', true);
}

function extTabBot() {
	change_Title(langBotEditor)
	jQuery('div#extEditor div#content').append(
		'<div id="BotList"><ul></ul>' +
		'</div>' + 
		'<div id="BotEditor">' +
			'<div id="Preview">' +
			'</div>' +
			'<div id="BotControl">' +
				'<div id="skin"> '+langSkinColor+
					'<table><tr><td id="default"></td><td id="yellow"></td><td id="brown"></td></tr></table>' +
				'</div>' +
				'<button id="saveBot" value="save"><img src="/osr/icons/kde/crystalclear/16x16/actions/filesave.png" class="floatl"> '+langSave+'</button>' +
				'<button id="randomBot" value="random"><img src="/osr/icons/kde/crystalclear/16x16/actions/reload.png" class="floatl"> '+langRandom+'</button>' +
				'<button id="deleteBot" value="delete"><img src="/osr/icons/kde/storyboard/16x16/trash.png" class="floatl"> '+langDelete+'</button>' +  
			'</div>' + 
			'<div id="Parts">' +
			'</div>' +
		'</div>' +
		'<div id="BotAdd" class="pulse">' +
		'</div>'
	);
	extTabBotActivateButtons();
	jQuery('div#extEditor div#BotList').append('<img src="/osr/giflib/ajax-loader.gif" class="ajaxLoader BotList">')
	var ajaxData = {
		sid: sid,
		projectid: story,
		mode: 'extended_editor_init_tab_bot',
		ajax_retry: 'jQuery("img#Bot.tab").trigger("click")'
	};
	updateCounter('extTabBot','start',langLoadBotListRequest);
	jQuery.ajax({
		dataType: 'json',
		data: ajaxData,
		success: function (json) {
			updateCounter('extTabBot','success',langLoadBotListSuccess);
			jQuery('div#extEditor div#BotList img.ajaxLoader').remove();
			for (bot in json.list) {
				jQuery('div#extEditor div#BotList ul').append(
					'<li class="bot" id="' + json.list[bot].ID + '" title="' + json.list[bot].ID + '">' +
						'<div class="smallBot">' +
							json.list[bot].html +
						'</div>' +
						'<div class="hiddenBot">' +
							'<div id="' + json.list[bot].ID + '" class="bot">' +
								json.list[bot].HTML +
							'</div>' +
						'</div>' +
					'</li>'
				)
			}
			for (part in json.parts) {
				jQuery('div#extEditor div#Parts').append(
					'<div id="' + part + '" class="previewWindow ui-corner-all">' +
					'</div>'
				)
				for (image in json.parts[part]) {
					if (image != 'static') {
					jQuery('div#extEditor div#' + part).append('<li><img title="' + image + '" alt="' + json.parts[part][image] + '" src="/osr/bots/' + part + '/' + json.parts[part][image] + '"></li>');
				}
				}
			}
			jQuery('div#extEditor li.bot').click(function() {
				event_BotList_click(this);
			})
		},
		error: function() {
			updateCounter('extTabBot','error',langLoadBotListError,ajaxData);
			jQuery('div#extEditor div#BotList img.ajaxLoader').remove();
		}
	})
}

function extTabBotActivateButtons() {
	jQuery('div#extEditor button#saveBot').click(function() {
		var dataArray = new Object();
		for (part in SaveBot) {
			dataArray[part] = SaveBot[part]
		}
		dataArray['oldBotName'] = oldBotName;
		dataArray['sid'] = sid;
		dataArray['mode'] = 'ajax_change_bot';
		jQuery('div#extEditor div#BotControl').find('*').hide();
		jQuery('div#extEditor div#BotControl').append('<img src="/osr/giflib/ajax-loader.gif" class="ajaxLoader BotControl">');
		dataArray['ajax_retry'] = 'jQuery("div#extEditor button#saveBot").trigger("click");';
		updateCounter('saveBot','start',langSaveBotRequest);
		jQuery.ajax({
			dataType: 'json',
			data: dataArray,
			async: false,
			success: function(json) {
				updateCounter('saveBot','success',langSaveBotSuccess);
				jQuery('div#extEditor div#BotControl img.ajaxLoader').remove();
				jQuery('div#extEditor div#BotControl').find('*').show();
				jQuery('div#extEditor div#BotList li#' + oldBotName).find('div.smallBot').empty().append(json.small);
				jQuery('div#extEditor div#BotList li#' + oldBotName).find('div.hiddenBot').empty().append('<div id="' + oldBotName + '" class="bot">' + json.big + '</div>');
				jQuery('div#drag_container div#bot_' + oldBotName).find('img').remove();
				jQuery('div#drag_container div#bot_' + oldBotName).append(json.big);
				jQuery('ul#availableBots div#bot_' + oldBotName).find('img').remove();
				jQuery('ul#availableBots div#bot_' + oldBotName).append(json.small);
			},
			error: function() {
				updateCounter('saveBot','error',langSaveBotError,dataArray);
				jQuery('div#extEditor div#BotControl img.ajaxLoader').remove();
				jQuery('div#extEditor div#BotControl').find('*').show();
			}
		})
	})
	
	jQuery('div#extEditor button#randomBot').click(function(){
		jQuery('div#extEditor div#BotControl').find('*').css({'visibility':'hidden'});
		jQuery('div#extEditor div#BotControl').append('<img src="/osr/giflib/ajax-loader.gif" class="ajaxLoader BotControl">');
		var ajaxData = {
			sid: sid,
			mode: 'ajax_random_bot',
			ajax_retry: 'jQuery("div#extEditor button#randomBot").trigger("click");'
		}
		updateCounter('randomBot','start',langRandomBotRequest);
		jQuery.ajax({
			dataType: 'json',
			data: ajaxData,
			success: function (json) {
				updateCounter('randomBot','success',langRandomBotSuccess);
				jQuery('div#extEditor div#BotControl img.ajaxLoader').remove();
				jQuery('div#extEditor div#BotControl').find('*').css({'visibility':'visible'});
				SaveBot = json.parts;
				jQuery('div#extEditor div#Preview').find('img').remove();
				jQuery('div#extEditor div#Preview').append(json.HTML);
				jQuery('div#extEditor div#Preview').find('img').click(function(){
					showPreview(this);
				})
			},
			error: function() {
				updateCounter('randomBot','error',langRandomBotError,ajaxData);
				jQuery('div#extEditor div#BotControl img.ajaxLoader').remove();
				jQuery('div#extEditor div#BotControl').find('*').css({'visibility':'visible'});
			}
		})
	});
	
	jQuery('div#extEditor button#deleteBot').click(function() {
		jQuery('div#extEditor div#BotControl').find('*').hide();
		jQuery('div#extEditor div#BotControl').append('<img src="/osr/giflib/ajax-loader.gif" class="loadDeleteBot">');
		var ajaxData = {
			sid: sid,
			bot: oldBotName,
			mode: 'ajax_count_used_bot',
			ajax_retry: "jQuery('div#extEditor button#deleteBot').trigger('click');"
		}
		updateCounter('deleteCheckBot','start',langCheckBotInUseRequest);
		jQuery.ajax({
			dataType: 'json',
			data: ajaxData,
			success: function(json) {
				updateCounter('deleteCheckBot','success',langCheckBotInUseSuccess);
				if (json.counter == 0) {
					deleteBot(oldBotName);
					jQuery('div#extEditor div#BotControl').find('*').show();
				} else {
					showDeleteDialog(json)
				}
			},
			error: function() {
				updateCounter('deleteCheckBot','error',langCheckBotInUseError,ajaxData);
				jQuery('div#extEditor div#BotControl img.loadDeleteBot').remove();
				jQuery('div#extEditor div#BotControl').find('*').show();
			}			
		})
	});
	
	jQuery('div#extEditor div#BotControl td').click(function() {
		var color = this.id;
		jQuery('div#extEditor div#Preview').find('img[alt="hand"], img[alt="neck"], img[alt="head"], img[alt="nose"]').each(function() {
			var currentURL = this.src;
			currentURL = currentURL.replace(/(default|yellow|brown)/,color);
			jQuery(this).attr('src',currentURL);
			SaveBot['hand'] = color;
			SaveBot['neck'] = color;
			SaveBot['head'] = color;
			SaveBot['nose'] = color;
		})
	});
	
	jQuery('div#extEditor div#BotAdd').click(function() {
		var ajaxData = {
			sid: sid,
			mode: 'ajax_add_default_bot',
			ajax_retry: "jQuery('div#extEditor div#BotAdd').trigger('click');"
		}
		updateCounter('addBot','start',langCreateBotRequest);
		jQuery.ajax({
			dataType: 'json',
			async: false,
			data: ajaxData,
			success: function(json) {
				updateCounter('addBot','success',langCreateBotSuccess);
				oldBotName = json.name;
				jQuery('div#extEditor div#BotList ul').append(
					'<li class="bot" id="' + json.name + '" title="' + json.name + '">' +
						'<div class="smallBot">' +
							json.small +
						'</div>' +
						'<div class="hiddenBot">' +
							'<div id="' + json.name + '" class="bot">' +
								json.big +
							'</div>' +
						'</div>' +
					'</li>'
				);
				jQuery('div#extEditor li.bot').unbind().click(function() {
					event_BotList_click(this);
				});
				jQuery('div#extEditor li#' + json.name + '.bot').trigger('click');
				jQuery('div#extEditor div#BotControl').show();
				update_tabs('b');
			},
			error: function() {
				updateCounter('addBot','error',langCreateBotError,ajaxData);
			}
		})
	})
}

function extTabCloud () {
	change_Title(langCloudGenerator);
	jQuery('div#extEditor div#content').append(
		'<div id="CloudPreview">' +
		'</div>' +
		'<div id="CloudControls">' +
			'<p>'+langNumberOfRows+': <span id="CloudRow">2</span></p>' +
			'<div id="CloudRowSlider" class="slider">' +
			'</div>' +
			'<p>'+langWidth+': <span id="CloudWidth">100</span> pixel</p>' +
			'<div id="CloudWidthSlider" class="slider">' +
			'</div>' +
			'<button id="CloudGenerate">'+langGenerate+'</button>' +
		'</div>'
	);
	jQuery('div#extEditor div#CloudRowSlider').slider({
		min: 1,
		max: 3,
		value: 2,
		slide: function(event, ui) {
			jQuery('div#extEditor span#CloudRow').text(ui.value)
		}
	})
	jQuery('div#extEditor div#CloudWidthSlider').slider({
		min: 75,
		max: 150,
		value: 100,
		slide: function(event, ui) {
			jQuery('div#extEditor span#CloudWidth').text(ui.value)
		}
	})
	jQuery('div#extEditor button#CloudGenerate').click(function() {
		jQuery('div#extEditor div#CloudPreview').empty().append('<img src="/osr/giflib/ajax-loader.gif" class="ajaxLoader CloudPreview">');
		var ajaxData = {
			sid: sid,
			projectid: story,
			mode: 'extended_editor_cloud_generator',
			rows: jQuery('div#extEditor span#CloudRow').text(),
			width: jQuery('div#extEditor span#CloudWidth').text(),
			ajax_retry: "jQuery('div#extEditor button#CloudGenerate').trigger('click');"
		}
		updateCounter('generateCloud','start',langGenerateNewClouds);
		jQuery.ajax({
			dataType: 'json',
			data: ajaxData,
			success: function(json) {
				updateCounter('generateCloud','success');
				jQuery('div#extEditor div#CloudPreview img.ajaxLoader').remove();
				jQuery('div#extEditor div#CloudPreview').css({'width': jQuery('div#extEditor').width()});
				// I used star to iterate because IE8 won't accept "item" as variable name...
				for (star in json) {
					jQuery('div#extEditor div#CloudPreview').append(json[star]);
				};
				jQuery('div#extEditor div#content input').click(function() {
					event_Cloud_click(this);
				})
			},
			error: function() {
				updateCounter('generateCloud','error','',ajaxData);
				jQuery('div#extEditor div#CloudPreview img.ajaxLoader').remove();
			}
		})
	})
}

function extTabScene() {
	change_Title(langSceneEditor)
	jQuery('div#extEditor div#content').append(
		'<div id="SceneTabs">' +
			'<ul id="Tabs">' +
				'<li id="Background" class="pulse">' + langBackground +
				'</li>' +
				'<li id="Scenery" class="pulse">' + langScenery +
				'</li>' +
				'<li id="Floor" class="pulse">' + langFloor +
				'</li>' +
				'<li id="Format" class="pulse">' + langFormat +
				'</li>' +
				'<li id="Upload" class="pulse" style="margin-top:5px; border-top: 1px solid;">' +
					'<img src="/osr/icons/kde/crystalclear/16x16/actions/up.png" class="floatl"> ' + langUpload +
				'</li>' +
				'<li id="Painter" class="pulse">' +
					'<img src="/osr/icons/kde/crystalclear/16x16/apps/kpaint.png" class="floatl"> ' + langPainter +
				'</li>' +
			'</ul>' +
			'<div id="smallPreview">' +
				'<img alt="background" style="position: absolute; height:100%; width: 100%;" src="' + jQuery('div#drag_container img[alt="background"]').attr('src') + '">' + 
				'<img alt="overlay" style="position: absolute; height:100%; width: 100%;" src="' + jQuery('div#drag_container img[alt="overlay"]').attr('src') + '">' + 
				'<img alt="floor" style="position: absolute; bottom: 0px; height:14px; width: 100%;" src="' + jQuery('div#drag_container img[alt="floor"]').attr('src') + '">' + 		 
			'</div>' +
		'</div>' +
		'<div id="SceneContent">' +
		'</div>'
	);
	jQuery('div#extEditor div#smallPreview').css({
		'height': jQuery('div#extEditor div#smallPreview').width() / Storyboard['format']
	});
	jQuery('div#extEditor div#smallPreview img[src="undefined"]').hide();
	extTabSceneActivateButtons();
}

function extTabSceneActivateButtons() {
	jQuery('div#extEditor li#Background').click(function(event, afterupload) {
		jQuery('div#extEditor div#SceneContent').empty();
		jQuery('div#extEditor div#SceneContent').resourceBrowser({
			requestHandler: '/cgi-bin/apps/ajax/Storyboard',
			resourceLocation: '/resources/images',
			directoryRequest: {
				sid: sid,
				mode: 'ajax_load_backgrounds'
			},
			directoryContentRequest: {
				sid: sid,
				mode: 'ajax_load_previews',
				projectid: story
			},
			onFolderSuccess: function() {
				jQuery('div#extEditor div.resourceBrowser-folders ul').prepend(
					'<li title="_system" class="preview_dir"><img class="dir_img" alt="closed" src="/osr/icons/kde/crystalclear/16x16/actions/tab_right.png"/>' +
					'<div class="dir_div">' + langSystem + '</div></li>' +
					'<li title="_recent" class="preview_dir"><img class="dir_img" alt="closed" src="/osr/icons/kde/crystalclear/16x16/actions/tab_right.png"/>' +
					'<div class="dir_div">' + langRecent + '</div></li><hr>'
				);
			},
			onContentLoadSuccess: function() {
				var directory = this.currentDirectory;
				if (directory == '_system') {
					this.resourceLocation = '/osr/storyboard/background/sky';
					this.currentDirectory = '';
				} else if (directory == '_recent') {
					this.resourceLocation = '/resources/images';
					this.currentDirectory = '_storyboard_'+story;
				} else {
					this.resourceLocation = '/resources/images';
				}
			},
			onImageSelected: function() {
				var file = this.selectedFile;
				var directory = this.currentDirectory;
				var location = this.resourceLocation;
				file = file.replace(/^tn_/,'');
				var source = location + '/' + directory + '/' + file;
				source = source.replace(/\/tn_/,'/');
				isSystem = false;
				if (location.match(/^\/osr/)) {
					Storyboard['background'] = file
					isSystem = true;
					uploadMode = 0;
				} else if (directory == ''){
					Storyboard['background'] = 'custom3:' + location + '/' + file
					uploadMode = 0;
				} else {
					Storyboard['background'] = 'custom3:' + location + '/' + directory + '/' + file
					uploadMode = 2;
				}
				update_background(source,isSystem);
				saveScreen(directory,file);
				jQuery('div#extEditor div#smallPreview img[alt="background"]').attr('src',source);
			}
		})
	});
	jQuery('div#extEditor li#Scenery').click(function() {
		jQuery('div#extEditor div#SceneContent').unbind().empty()
		.append(
			'<ul id="overlay"></ul>'
		);
		var ajaxData = {
			sid: sid,
			mode: 'ajax_load_overlays',
			ajax_retry: "jQuery('div#extEditor li#Scenery').trigger('click');"
		};
		updateCounter('loadOverlay','start',langLoadOverlayRequest);
		jQuery.ajax({
			dataType: 'json',
			data: ajaxData,
			success: function(json) {
				updateCounter('loadOverlay','success',langLoadOverlaySuccess);
				jQuery('div#extEditor div#SceneContent ul').append(
					'<li class="preview_list">' +
						'<img class="preview" src="/osr/storyboard/background/overlay/_transparent.gif" title="">' +
						'<p style="position:absolute; left:41px;top:43px;">' + langNone + '</p>' +
					'</li>'
				);
				for (var overlay in json) {
					jQuery('div#extEditor div#SceneContent ul').append(
						'<li class="preview_list">' +
							'<img class="preview" src="/osr/storyboard/background/overlay/' + json[overlay] + '.gif" title="' + json[overlay] + '">' +
						'</li>'
					);
				}
				jQuery('div#extEditor ul#overlay img.preview').unbind().bind('click', function() {
					Storyboard['overlay'] = jQuery(this).attr('title');
					saveScreen();
					jQuery('div#extEditor div#smallPreview img[alt="overlay"]').show().attr('src',jQuery(this).attr('src'));
					if (jQuery('div#drag_container img[alt="overlay"]').length > 0) {
						jQuery('div#drag_container img[alt="overlay"]').attr('src',jQuery(this).attr('src'));
					} else {
						jQuery('div#drag_container').append(
							'<img alt="overlay" style="border:none; width:' + Storyboard['display'] + 'px; height:' + Storyboard['height'] + 'px; position: absolute; top:0px; left: 0px; z-index:1;" src="' + jQuery(this).attr('src') + '">'
						)
					}
				})
			},
			error: function() {
				updateCounter('loadOverlay','error',langLoadOverlayError,ajaxData);
			}
		})
	});
	jQuery('div#extEditor li#Floor').click(function() {
		jQuery('div#extEditor div#SceneContent').unbind().empty()
		.append(
			'<ul id="floor"></ul>'
		);
		var ajaxData = {
			sid: sid,
			mode: 'ajax_load_floors',
			ajax_retry: "jQuery('div#extEditor li#Floor').trigger('click');"
		}
		updateCounter('loadFloors','start',langLoadFloorRequest);
		jQuery.ajax({
			dataType: 'json',
			data: ajaxData,
			success: function(json) {
				updateCounter('loadFloors','success',langLoadFloorSuccess);
				jQuery('div#extEditor div#SceneContent ul').append(
					'<li class="preview_list">' +
						'<img class="preview" src="/osr/storyboard/background/floor/_transparent.png" title="">' +
						'<p style="position:absolute; left:41px;top:43px;">' + langNone + '</p>' +
					'</li>'
				);
				for (var floor in json) {
					jQuery('div#extEditor div#SceneContent ul').append(
						'<li class="preview_list">' +
							'<img class="preview" src="/osr/storyboard/background/floor/' + json[floor] + '.jpg" title="' + json[floor] + '">' +
						'</li>'
					);
				}
				jQuery('div#extEditor ul#floor img.preview').click(function(){
					Storyboard['floor'] = jQuery(this).attr('title');
					saveScreen();
					jQuery('div#extEditor div#smallPreview img[alt="floor"]').show().attr('src',jQuery(this).attr('src'));
					if (jQuery('div#drag_container img[alt="floor"]').length > 0) {
						jQuery('div#drag_container img[alt="floor"]').attr('src',jQuery(this).attr('src'));
					} else {
						jQuery('div#drag_container').append(
							'<img alt="floor" style="border:none; width:' + Storyboard['display'] + 'px; height:' + Storyboard['display']/10 + 'px; position: absolute; bottom:0px; left: 0px; z-index:1;" src="' + jQuery(this).attr('src') + '">'
						)
					}
				})
			},
			error: function() {
				updateCounter('loadFloors','error',langLoadFloorError,ajaxData);
			}
		})
	});
	jQuery('div#extEditor li#Format').click(function() {
		jQuery('div#extEditor div#SceneContent').unbind().empty();
		jQuery('div#extEditor div#SceneContent').append(
			'<table>' +
				'<tr id="16_9" class="pulse"><td class="format_preview"><img src="/osr/storyboard/16x9.png" alt="16:9"></td><td>' + langFormatExplanation16_9 + '</td></tr>' +
				'<tr id="4_3" class="pulse"><td class="format_preview"><img src="/osr/storyboard/4x3.png" alt="4:3"></td><td>' + langFormatExplanation4_3 + '</td></tr>' +
				'<tr id="3_4" class="pulse"><td class="format_preview"><img src="/osr/storyboard/3x4.png" alt="3:4"></td><td>' + langFormatExplanation3_4 + '</td></tr>' +
			'</table>'
		);
		jQuery('div#extEditor div#SceneContent tr').click(function() {
			var format = this.id;
			var ratio = Storyboard['format'];
			if (format == '16_9') {
				ratio = 16/9;	
			} else if (format == '4_3') {
				ratio = 4/3;
			} else if (format == '3_4') {
				ratio = 3/4;
			};
			if (Storyboard['format'] != ratio) {
				Storyboard['format'] = ratio;
				Storyboard['height'] = Math.round(Storyboard['display']/ratio);
				adopt_ratio();
			};
		})
	});
	jQuery('div#extEditor li#Upload').click(function() {
		jQuery('div#extEditor div#SceneContent div#firefoxHatesExpando').text('FALCON PUUUUNCH!!!');
		jQuery('div#extEditor div#SceneContent').unbind().empty();
		jQuery('div#extEditor div#SceneContent').append(
			'<div id="backgroundfile"><iframe src="/cgi-bin/apps/upload?accept=image&target=resources/images/_storyboard_'+story+'&sid='+sid+'&com=" name="story_iframe_file_upload" id="story_iframe_file_upload">' +
			'</iframe></div>'
		);	
	});
	jQuery('div#extEditor li#Painter').click(function() {
		jQuery('div#extEditor div#SceneContent').unbind().empty();
		var ajaxData = {
			sid: sid,
			projectid: story,
			mode: 'ajax_load_painter',
			ajax_retry: "jQuery('div#extEditor li#Painter').trigger('click');"
		};
		updateCounter('loadPainter','start',langLoadPainterRequest);
		jQuery.ajax({
			dataType: 'html',
			data: ajaxData,
			success: function(html){
				updateCounter('loadPainter','success',langLoadPainterSuccess);
				jQuery('div#extEditor div#SceneContent').append('<iframe id="firefoxHatesExpando" style="height:100%; width:100%; border: none;"></iframe>');
				ifrm = jQuery('#firefoxHatesExpando')[0].contentWindow.document;
				ifrm.open();ifrm.close();
				jQuery('body', ifrm).append(html);
				jQuery(ifrm).unload(function() {
					alert('me');
				})
			},
			error: function() {
				updateCounter('loadPainter','error',langLoadPainterError,ajaxData);
			}
		})
	});
}

//function magicFunctionsWhoDoThatGUIForTheResourceManager() {
	function collapse_child(parent){  //This function collapses the children of an option
		//Get the current depth of the folder inside the tree
		var currentIndent = get_indent(parent);
		
		//Now, for every child this item has, hide it, then collapse their children too so they stay collapsed correctly after refolding it
		jQuery.each(jQuery('li[title^="' + parent + '"]:visible'), function(i, item){
			if (get_indent(item.title) > (currentIndent)) {
				jQuery(item).hide('blind', 'slow');
				jQuery(item).children('img').attr('alt', 'closed');
				jQuery(item).children('img').attr('src', '/osr/icons/kde/crystalclear/16x16/actions/tab_right.png')
			}
		});
	
		//Update the triangle
		jQuery('li[title="' + parent + '"]').children('img').attr('src', '/osr/icons/kde/crystalclear/16x16/actions/tab_right.png');
	}

	function fold_child(parent){
		//Get the current depth of the folder inside the tree
		var currentIndent = get_indent(parent);
		
		//For every immediate child this item has, show it 
		jQuery.each(jQuery('li[title^="' + parent + '"]'), function(i, item){
			if (get_indent(item.title) == (currentIndent + 1)) {
				jQuery(item).show('blind', 'slow');
			}
		});
	
		//Update the triangle
		jQuery('li[title="' + parent + '"]').children('img').attr('src', '/osr/icons/kde/crystalclear/16x16/actions/arrow_down.png');	
	}	

	function get_folder(string){  //This function filters the innermost folder from the rest of the path e.g. a/b/c -> c
		var folderArray = new Array();
		folderArray = string.split('/');
		return folderArray[folderArray.length - 1];
	}	

	function get_indent(string){  //This function gets the depth of a given path e.g. a/b/c -> 0/1/2 -> 2
		var folderArray = new Array();
		folderArray = string.split('/');
		return folderArray.length - 1;
	}	

	function get_path(path) {  //This function filters the path from a chosen directory e.g. a/b/c -> a/b
		var folderArray = new Array();
		var pathString = "";
		folderArray = path.split('/');
		if (folderArray.length > 1) {
  	 		pathString = folderArray[0];
  	 		for (var i = 1; i < folderArray.length - 1; i++) {
  	 			pathString = pathString + '/' + folderArray[i];
   		}
		}
		return pathString;
	}
	
	function append_entry(resource) {
		//store the innermost child of the complete folder path
		var folder = get_folder(resource.dir);
	
		//Here we create the option for the list
		jQuery('#preview_dir ul').append('<li title="' + resource.dir + 
			'" class="preview_dir"><img class="dir_img" alt="closed" src="/osr/icons/kde/crystalclear/16x16/actions/tab_right.png"/>'+
			'<div class="dir_div">' + folder + '</div></li>'
		);
						
		//Now we make the triangle visible for every option which has at least one child and indent every child accordingly.
		jQuery('li[title="' + get_path(resource.dir) + '"]').find('.dir_img').css({'visibility':'visible'});
		jQuery('li[title="' + resource.dir + '"]').css({'padding-left':get_indent(resource.dir)*16});
							
		//If the option is not immediatly below root (ergo. has a parent), hide it.
		if (get_indent(resource.dir) > 0) {
			jQuery('li[title="' + resource.dir + '"]').hide();
		}
	}
//}