jQuery.noConflict()

debug = false;

jQuery.fx.off = false;

jQuery(document).ready(function(){
	jQuery.ajaxSetup({
		url: '/cgi-bin/apps/ajax/Storyboard',
		type: 'POST',
		timeout: 10000
	});
	
	if (after_error != undefined) {
		errorHandling(after_error);
	}
	
//	if (typeof(sid) == 'undefined') {
//		sid = GetHTTPParam('sid');
//	}
	if (typeof(story) == 'undefined') {
		story = GetHTTPParam('projectid');
	} 
	if (typeof(Storyboard) != 'undefined') {
		Storyboard['format'] = Storyboard['display'] / Storyboard['height']
		ratio = Storyboard['ratio'];
		reloadPlaylist();
		jQuery('div#drag_container').css({
			'height': Storyboard['height'] + 'px'
		});
		update_tabs('r');
		if (GetHTTPParam('screen') != '') {
			screen_id = GetHTTPParam('screen');
		}
		max_screens = jQuery('div#navi_bar span#total_screens').text();
		jQuery('div#navi_bar input[name="screen"]').attr('value',screen_id);
		handleArrows();
		theDate = Math.round(new Date().getTime()/1000.0); //UNIX Timestamp
		currentAjaxRequests = 0;
		currentAjaxErrors = 0;
		jQuery('body').append(
			'<div id="ajaxCounter" class="ajaxCounter">' + 
				langOpenConnection + ': <span id="currentRequests">' + currentAjaxRequests + '</span> (<span id="currentErrors">'+currentAjaxErrors+'</span> Errors)' + 
				'<ul>' + 
				'</ul>' + 
			'</div>'
		);
		if (autoRedirect != '') {
			jQuery('img#on_template').hide();
			jQuery('img#no_template').hide();
		}
	};
	retryArray = new Object();
	Purgatory = new Object();
	
	jQuery('.menu_info').click(function(){
		jQuery('#info_screen').trigger('click');
	});
	
	jQuery('.menu_edit').click(function(){
		jQuery('#edit_screen').trigger('click');
	});
	
	jQuery('.menu_screens').click(function(){
		jQuery('#screens').trigger('click');
	});
	
	jQuery('.menueditstory').click(function(){
		if (jQuery('#edit_screen').size() > 0) {
			jQuery('#edit_screen').trigger('click');
			return false;
		}
	});
	
	jQuery('.menueditScreens').click(function(){
		jQuery('#screens').trigger('click');
	});
	
	jQuery('#info_screen').click(function(){
		var ajaxData = {
				sid :  sid,
				projectid: story,
				mode: 'info_screen'
		}

		jQuery.ajax({
			data:ajaxData,
			dataType:'html',
			success:function(html){
				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>Info</span>' +
						'<img title="'+langCloseExtEditor+'" class="cancel" src="/osr/icons/kde/crystalclear/64x64/actions/button_cancel.png">' +
					'</div>' + 
					'<div id="content">' + html + 
					'</div>'
				);
				jQuery('div#blur').show();
				jQuery('div#extEditor').show();
				jQuery('.cancel').live('click', function(){
					jQuery('div#blur').hide();
					jQuery('div#extEditor').hide();
					jQuery('div#recordGenerator').show();
				});
			},
			error: function() {
				updateCounter('info_Screen','error',langEditModeError);
			}
		});
	});
	jQuery('#edit_screen').click(function(){
		if (jQuery(this).hasClass('inactive')) {
			var caller = this;
			var ajaxData = {
				sid: sid,
				projectid: story,
				screen: screen_id,
				mode: 'ajax_update_lock'
			};
			updateCounter('editMode','start',langEditModeRequest)
			jQuery.ajax({
				data: ajaxData,
				dataType: 'json',
				success: function(json) {
					if (json.status == 'free') {
						updateCounter('editMode','success',langEditModeSuccess);
						createScreen(json.screen);
						initDragDrop();
		  				jQuery(caller).addClass('active').removeClass('inactive');
		  				jQuery('#edit_screen').attr('src','/osr/icons/kde/storyboard/custom/edit_active.png');
		  				jQuery('div#leftmenu, div#rightmenu, div#editScene').show();
		  				updateMenuPosition();
		  				jQuery('#drag_container textarea').removeAttr('readonly');
						Lock = setTimeout('update_lock()',45000);
					} else if(json.status == 'busy') {
						updateCounter('editMode','error',json.user + ' ' + langEditModeBusy);
					} else if (json.status == 'denied') {
						updateCounter('editMode','error',langEditModeDenied);
					} else if (json.status == 'login') {
						updateCounter('editMode','start',langEditModeLogin);
						var test = '/cgi-bin/apps/storyboard?sid='+sid+'&com='+com+'&projectid='+story+'&screen='+json.screen+'&mode=edit';
						window.location = test;
					} else {
						updateCounter('editMode','error',langEditModeUnknown);
					}
				},
				error: function(p1, p2,p3,p4) {
					updateCounter('editMode','error',langEditModeError);
				}
			})
	  	} else {
			exitEditMode();
		}
	});
	
	jQuery('.pulse').live('mouseover', function(){
		jQuery(this).stop(true, false);
		jQuery(this).animate({backgroundColor: '#C0C0C0'});
	})
	.live('mouseout', function(){
		jQuery(this).stop(true, false);
		jQuery(this).animate({backgroundColor:'#F1F1F1'});
	});
	
	jQuery('img#prev_screen').click(function() {
		if (screen_id > 1) {
	  		screenTransition(screen_id * 1 - 1);
			handleArrows();
	  	}
	})
	
	jQuery('img#next_screen').click(function() {
		if (screen_id*1 < max_screens*1) {
	  		screenTransition(screen_id * 1 + 1);
			handleArrows();
	   }
	})
	
	jQuery('img#first_screen').click(function() {
		if (screen_id > 1) {
	  		screenTransition(1);
			handleArrows();
	  	}
	})
	
	jQuery('img#last_screen').click(function() {
		if (screen_id*1 < max_screens*1) {
	  		screenTransition(max_screens);
			handleArrows();
	   }
	})
	
	jQuery('div#navi_bar input[name="screen"]').change(function(){
		if ((this.value < 1) || (this.value > max_screens*1) || (this.value != parseInt(this.value))) {
			this.value = this.defaultValue;
		} else {
			screenTransition(this.value*1);
			handleArrows();
		}
	});
	
	jQuery('div#navi_bar img#screens').click(function(){
		start_expose(story);
	});
	
	jQuery('div#ajaxCounter button.retry').live('click',function(){
		var type = this.id;
		eval(retryArray[type]['ajax_retry']);
	})
	jQuery('div#ajaxCounter button.dismiss').live('click',function(){
		var type = this.id;
		currentAjaxErrors--;
		jQuery('div#ajaxCounter li#'+type).fadeOut(600,function(){
			hideBusySaving();
		});
	})
	
	jQuery('img#play_all').click(function(){
		playThemAll();
	});
	
	uploadMode = 0; 
	
	initSlider();
	
	jQuery('div#slider_hide').click(function(){
		if (jQuery(this).hasClass('closed')) {
			jQuery(this).removeClass('closed').addClass('open');
			jQuery('div#slider').slideDown(function(){
				updateMenuPosition();
				sliderLoadScreens();
			});
		} else {
			jQuery(this).removeClass('open').addClass('closed');
			jQuery('div#slider').slideUp(function(){
				updateMenuPosition();
				clearTimeout(sliderTimer);
			});
		}
	});
	
	jQuery('div.slider_screen:not(.selected)').live('mouseover', function(){
		jQuery(this).stop(true, false);
		jQuery(this).animate({opacity: 0.8});
	})
	.live('mouseout', function(){
		jQuery(this).stop(true, false);
		jQuery(this).animate({opacity: 0.5});
	});
	
	jQuery('div#editScene, div#botGenerator, div#cloudGenerator').live('click',function () {
		showEditor(this);
	});	
})

function add_recording(filename) {
	var ajaxData = {
		sid: sid,
		projectid: story,
		screen_id: screen_id,
		mode: 'add_record',
		file_name: filename,
		ajax_retry: 'add_recording("'+filename+'")'
	};
	updateCounter('addRecording','start',langAddRecordingRequest);
	jQuery.ajax({
		dataType: 'json',
		data: ajaxData,
		success: function(json) {
			updateCounter('addRecording','success',langAddRecordingSuccess);
			json = json[0];
			id = json.id;
			create_record(id, 1, 1, json);
			player.addToPlaylist('resources/audio/_story_' + story + '/' + json.url);
		},
		error: function(XMLHttpRequest) {
			updateCounter('addRecording','error',langAddRecordingError, ajaxData);
		}
	})
}

function adjustImage(data) {
	var format = data['storyboard']['format'];
	var display = data['storyboard']['display'];
	var screen_height = data['storyboard']['height'];
	if (data['storyboard']['background'].match(/^custom(2|3)\:/)) {
		var height = jQuery('div#drag_container img[alt="background"]').height();
		var width = jQuery('div#drag_container img[alt="background"]').width();
		while (height < 15) {
		height = jQuery('div#drag_container img[alt="background"]').height();
		width = jQuery('div#drag_container img[alt="background"]').width();
		}
		var ratio = format;
		if (height * ratio > width) {
			var padding = (display - (width * (screen_height / height))) / 2;
			jQuery('div#drag_container img[alt="background"]').css({
				'height': screen_height+'px',
				'padding-left': padding+'px'
			});
		} else {
			var padding = (screen_height - (height * (display / width))) / 2;
			jQuery('div#drag_container img[alt="background"]').css({
				'width': display+'px',
				'padding-top': padding+'px',
				'padding-bottom': padding+'px'
			});
		}
	} else {
		jQuery('div#drag_container img[alt="background"]').css({
			'width': display,
			'height': screen_height
		});
	}
}

function append_talking(caller, dropped) {
	var speechType = jQuery(caller).children('img.speech').attr('id');
	var parentBallon = jQuery(dropped).attr('id');
	var appendix = '';
	if (speechType == 'speaking') {
		appendix = '<img src="/osr/icons/kde/storyboard/custom/bubbles/bottom_left_speaking.png" alt="speaking">';
	} else if (speechType == 'thinking') {
		appendix = '<img src="/osr/icons/kde/storyboard/custom/bubbles/bottom_left_thinking.png" alt="thinking">';
	} else if (speechType == 'angry') {
		appendix = '<img src="/osr/icons/kde/storyboard/custom/bubbles/bottom_left_angry.png" alt="angry">';
	} else {
		return -1; //should never happen!
	}
	jQuery('div#drag_container div#'+parentBallon+' div.appendix').remove();
	jQuery('div#drag_container div#'+parentBallon).append('<div class="appendix">'+appendix+'</div>');
	var ballonID = parentBallon.replace(/^ballon_/,'');
	Storyboard['ballon'][ballonID]['appendix'] = new Object();
	Storyboard['ballon'][ballonID]['appendix']['x'] = 0;
	Storyboard['ballon'][ballonID]['appendix']['y'] = 0;
	Storyboard['ballon'][ballonID]['appendix']['orientation'] = 'bottom';
	Storyboard['ballon'][ballonID]['appendix']['side'] = 'left';
	Storyboard['ballon'][ballonID]['appendix']['type'] = speechType;
	saveScreen();
}

function biggerFont(caller) {
	var ObjectType = getObjectType(caller);
	var cclass = ObjectType['class'];
	var object = ObjectType['object'];
	
	jQuery(caller).find('textarea').animate({
		'fontSize': '+=5px'
	},'fast');
	Storyboard[ObjectType['class']][ObjectType['object']]['fontsize'] = Storyboard[ObjectType['class']][ObjectType['object']]['fontsize']*1+5;
}

function chooseScreen(pScreen) {
	var returnData = '';
	var ajaxData = {
		sid: sid,
		projectid: story,
		screen: pScreen,
		mode: 'ajax_choose_screen',
		ajax_retry: "chooseScreen("+pScreen+")"
	}
	updateCounter('chooseScreen','start', langChooseScreenRequest);
	jQuery.ajax({
		dataType: 'json',
		async: false,
		data: ajaxData,
		success: function(json) {
			updateCounter('chooseScreen','success', langChooseScreenSuccess);
			returnData = json;
		},
		error: function() {
			updateCounter('chooseScreen','error', langChooseScreenError, ajaxData);
			returnData = 'error';
		}
	})
	return returnData;
}

function create_ballon(id, left, top) {
	Storyboard['ballon'][id] = new Object();
	Storyboard['ballon'][id]['height'] = 75;
	Storyboard['ballon'][id]['left'] = left;
	Storyboard['ballon'][id]['side'] = 'right';
	Storyboard['ballon'][id]['top'] = top;
	Storyboard['ballon'][id]['width'] = 150;
	Storyboard['ballon'][id]['z'] = 5;
	Storyboard['ballon'][id]['text'] = '';
	Storyboard['ballon'][id]['fontsize'] = 15;
	
	jQuery('div#drag_container').append(
		'<div id="ballon_' + id + '" class="ballon new ui-draggable ui-corner-all" style="z-index:3; left: ' + left + 'px; top: ' + top + 'px; border: 1px solid;">' +
			'<div style="width: 100%; height: 100%;">' +
				'<textarea id="ballon_' + id + '_text" name="ballon_' + id + '_text" class="ui-corner-all" style="border: none; margin: 0; height:100%; width:100%;">' +
					Storyboard['ballon'][id]['text'] +
				'</textarea>' +
			'</div>' +
		'</div>'
	);
	
	if ((left+150 > Storyboard['display']) || (top+75 > Storyboard['height'])) {
		if ((left+150 > Storyboard['display']) && (top+75 > Storyboard['height'])) {
			var offsetX = left+150-Storyboard['display'];
			var offsetY = top+78-Storyboard['height'];
			jQuery('#ballon_' + id).animate({
				'left':'-=' + offsetX + 'px',
				'top':'-=' + offsetY + 'px'
			});	
		} else if (left+150 > Storyboard['display']) {
			var offset = left+150-Storyboard['display'];
			jQuery('#ballon_' + id).animate({'left':'-=' + offset + 'px'});
		} else if (top+75 > Storyboard['height']) {
			var offset = top+78-Storyboard['height'];
			jQuery('#ballon_' + id).animate({'top':'-=' + offset + 'px'});
		}
	}
	saveScreen('smartupdate','speech');
	initBallonsSpeech();
}

function create_bot (left, top) {
	jQuery('div#drag_container').append(
		'<img class="tempLoader" src="/osr/giflib/ajax-loader.gif" style="position:absolute; left: ' + left + 'px; top: ' + top + 'px;">'
	);
	var ajaxData = {
		mode: 'list_bots',
		projectid: story,
	 	sid: sid,
		screen_id: screen_id,
		left: left,
		top: top,
		ajax_retry: 'create_bot('+left+','+top+')'
	};
	updateCounter('addBotRandom','start',langAddBotRequest);
	jQuery.ajax({
		dataType: 'html',
		data: ajaxData,
		success: function(msg) {
			updateCounter('addBotRandom','success', langAddBotSuccess);
			var botName = jQuery(msg).attr('id');
			botName = botName.replace(/^bot_/i,"");
			Storyboard['bot'][botName] = new Object();
			Storyboard['bot'][botName]['x'] = left;
			Storyboard['bot'][botName]['y'] = top;
			Storyboard['bot'][botName]['z'] = 5;
			
			jQuery('.tempLoader').remove();
			jQuery('div#drag_container').append(msg);
			if ((left+153 > Storyboard['display']) || (top+193 > Storyboard['height'])) {
				if ((left+153 > Storyboard['display']) && (top+193 > Storyboard['height'])) {
					var offsetX = left+153-Storyboard['display'];
					var offsetY = top+193-Storyboard['height'];
					jQuery('#bot_' + botName).animate({
						'left':'-=' + offsetX + 'px',
						'top':'-=' + offsetY + 'px'
					});	
				} else if (left+153 > Storyboard['display']) {
					var offset = left+153-Storyboard['display'];
					jQuery('#bot_' + botName).animate({'left':'-=' + offset + 'px'});
				} else if (top+193 > Storyboard['height']) {
					var offset = top+193-Storyboard['height'];
					jQuery('#bot_' + botName).animate({'top':'-=' + offset + 'px'});
				}
			};
			saveScreen('smartupdate','bot');
			initDragContainer();
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			updateCounter('addBotRandom','error',langAddBotError,ajaxData);
			jQuery('.tempLoader').attr('src','/osr/icons/kde/crystalclear/64x64/actions/messagebox_critical.png').fadeOut(3000,function(){jQuery(this).remove()});
		}		
	});	
}

function create_bot_id(id,left,top) {
	jQuery('div#drag_container').append(
		'<img class="tempLoader" src="/osr/giflib/ajax-loader.gif" style="position:absolute; left: ' + left + 'px; top: ' + top + 'px;">'
	);
	var ajaxData = {
		mode: 'draw_bot',
	 	sid: sid,
		left: left,
		top: top,
		bot_id: id,
		projectid: story, 
		ajax_retry: 'create_bot_id("'+id+'",'+left+','+top+')'
	}
	updateCounter('createBot'+id,'start',langAddBotRequest)
	jQuery.ajax({
		dataType: 'html',
		data: ajaxData,
		success: function(msg) {
			updateCounter('createBot'+id,'success',langAddBotSuccess);
			jQuery('ul#availableBots div#bot_'+id).parents('li:first').hide();
			Storyboard['bot'][id] = new Object();
			Storyboard['bot'][id]['x'] = left;
			Storyboard['bot'][id]['y'] = top;
			Storyboard['bot'][id]['z'] = 5;
			
			jQuery('.tempLoader').remove();
			jQuery('div#drag_container').append(msg);
			if ((left+153 > Storyboard['display']) || (top+193 > Storyboard['height'])) {
				if ((left+153 > Storyboard['display']) && (top+193 > Storyboard['height'])) {
					var offsetX = left+153-Storyboard['display'];
					var offsetY = top+193-Storyboard['height'];
					jQuery('#bot_' + id).animate({
						'left':'-=' + offsetX + 'px',
						'top':'-=' + offsetY + 'px'
					});	
				} else if (left+153 > Storyboard['display']) {
					var offset = left+153-Storyboard['display'];
					jQuery('#bot_' + id).animate({'left':'-=' + offset + 'px'});
				} else if (top+193 > Storyboard['height']) {
					var offset = top+193-Storyboard['height'];
					jQuery('#bot_' + id).animate({'top':'-=' + offset + 'px'});
				}
			};
			initDragContainer();
			saveScreen('smartupdate','bot');
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			updateCounter('createBot'+id,'error',langAddBotError,ajaxData);
			jQuery('.tempLoader').attr('src','/osr/icons/kde/crystalclear/64x64/actions/messagebox_critical.png').fadeOut(3000,function(){jQuery(this).remove()});
			jQuery('ul#availableBots div#bot_'+id).parents('li:first').css({
				'visibility':'visible'
			})
		}			
	});	
}

function create_cloud(id, left, top) {
	jQuery('div#drag_container').append(
		'<img class="tempLoader" src="/osr/giflib/ajax-loader.gif" style="position:absolute; left: ' + left + 'px; top: ' + top + 'px;">'
	);
	var ajaxData = {
		projectid: story,
		sid: sid,
		mode: 'add_cloud',
		cloud_id: id,
		left: left,
		top: top,
		ajax_retry: 'create_cloud("'+id+'",'+left+','+top+')'
	}
	updateCounter('createCloud'+id,'start',langAddCloudRequest);
	jQuery.ajax({
		dataType: 'html',
		data: ajaxData,
		success: function(msg) {
			updateCounter('createCloud'+id,'success',langAddCloudSuccess);
			jQuery('ul#availableClouds div#object_cloud_'+id).parents('li:first').hide();
			Storyboard['object']['cloud_' + id] = new Object();
			Storyboard['object']['cloud_' + id]['x'] = left;
			Storyboard['object']['cloud_' + id]['y'] = top;
			Storyboard['object']['cloud_' + id]['z'] = 5;
			
			jQuery('.tempLoader').remove();
			jQuery('div#drag_container').append(msg);
			var cloudHeight = jQuery('#object_cloud_' + id).css('height');
			cloudHeight = parseInt(cloudHeight.replace(/px$/,''));
			if ((left+100 > Storyboard['display']) || (top+cloudHeight > Storyboard['height'])) {
				if ((left+100 > Storyboard['display']) && (top+cloudHeight > Storyboard['height'])) {
					var offsetX = left+100-Storyboard['display'];
					var offsetY = top+cloudHeight-Storyboard['height'];
					jQuery('#object_cloud_' + id).animate({
						'left':'-=' + offsetX + 'px',
						'top':'-=' + offsetY + 'px'
					});	
				} else if (left+100 > Storyboard['display']) {
					var offset = left+100-Storyboard['display'];
					jQuery('#object_cloud_' + id).animate({'left':'-=' + offset + 'px'});
				} else if (top+cloudHeight > Storyboard['height']) {
					var offset = top+cloudHeight-Storyboard['height'];
					jQuery('#object_cloud_' + id).animate({'top':'-=' + offset + 'px'});
				}
			};
			initDragContainer();
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			updateCounter('createCloud'+id,'error',langAddCloudError,ajaxData);
			jQuery('.tempLoader').attr('src','/osr/icons/kde/crystalclear/64x64/actions/messagebox_critical.png').fadeOut(3000).remove();
			jQuery('ul#availableClouds div#object_cloud_'+id).parents('li:first').css({
				'visibility':'visible'
			})
		}
	})	
}

function create_moon(left, top) {
	if (!Storyboard['object']['moon']) {
		Storyboard['object']['moon'] = new Object();
   }
	Storyboard['object']['moon']['x'] = left;
	Storyboard['object']['moon']['y'] = top;
	Storyboard['object']['moon']['z'] = 5;
	
	if (jQuery('div#object_moon').size() > 0) {
		jQuery('div#object_moon').css({
			'left':left,
			'top': top
		})
	} else {
		jQuery('div#drag_container').append(
			'<div id="object_moon" class="new object" style="position:absolute; left: ' + left + 'px; top: ' + top + 'px; z-index:5;">' +
				'<img alt="moon" class="new object" src="/osr/storyboard/background/objects/moon_80_80.gif">' +
			'</div>'
		);
	}
	
	if ((left+80 > Storyboard['display']) || (top+80 > Storyboard['height'])) {
		if ((left+80 > Storyboard['display']) && (top+80 > Storyboard['height'])) {
			var offsetX = left+80-Storyboard['display'];
			var offsetY = top+80-Storyboard['height'];
			jQuery('#object_moon').animate({
				'left':'-=' + offsetX + 'px',
				'top':'-=' + offsetY + 'px'
			});	
		} else if (left+80 > Storyboard['display']) {
			var offset = left+80-Storyboard['display'];
			jQuery('#object_moon').animate({'left':'-=' + offset + 'px'});
		} else if (top+80 > Storyboard['height']) {
			var offset = top+80-Storyboard['height'];
			jQuery('#object_moon').animate({'top':'-=' + offset + 'px'});
		}
	}
	saveScreen();
}

function create_record(id, left, top, json) {
	Storyboard['record'][id] = new Object();
	Storyboard['record'][id]['name'] = json.name;
	Storyboard['record'][id]['length'] = json.length;
	Storyboard['record'][id]['url'] = 'resources/audio/_story_' + story + '/' + json.url;
	Storyboard['record'][id]['x'] = json.x;
	Storyboard['record'][id]['y'] = json.y;
	
	jQuery('div#drag_container').append(
		'<div id="record_' + id + '" class="record" style="left: ' + json.x + 'px; top: ' + json.y + 'px;">' +
			'<a href="javascript:start(' + id + ');">' +
				'<img id="record_img_' + id + '" border="0" alt="image" src="/osr/icons/32/loudspeaker.png">' +
			'</a>' +
		'</div>'
	);
	update_tabs('r');
	initDragContainer();
}

function createScreen(data){
	jQuery('div#drag_container').empty();
	jQuery('span#screen_name').text(data['info']['name']);
	var format = data['storyboard']['format'];
	var display = data['storyboard']['display'];
	var screen_height = data['storyboard']['height'];
	jQuery('div#drag_container').animate({
		height: screen_height
	}).css('overflow', 'visible'); //This is a fix to avoid flickering ass animate() temp. adds overflow: hidden during animation
	
	for (cclass in data['storyboard']) {
		if (cclass == 'background') {
			jQuery('div#drag_container').append('<img alt="background" class="storyboard-background" src="' + data['info']['background_url'] + '" style="position:absolute; z-index:0; border:none;">');
			//We have to wait for the image to finish loading or else we get false values
			jQuery('div#drag_container img[alt="background"]').load(function(){
				adjustImage(data);
			})
		} else if (cclass == 'overlay') {
			jQuery('div#drag_container').append('<img alt="overlay" style="border:none; width:' + display + 'px; height:' + screen_height + 'px; position: absolute; top:0px; left: 0px; z-index:1;" src="' + data['info']['overlay_url'] + '">')
		} else if (cclass == 'floor') {
			jQuery('div#drag_container').append('<img alt="floor" style="border:none; width:' + display + 'px; height:' + screen_height / 10 + 'px; position: absolute; bottom:0px; left: 0px; z-index:2;" src="' + data['info']['floor_url'] + '">')
		} else if (cclass == 'bot') {
			for (object in data['storyboard'][cclass]) {
				jQuery('div#drag_container').append(
					'<div id="bot_' + object + '" class="bot" style="z-index:' + data['storyboard'][cclass][object]['z'] + '; height: 193px; width: 153px; left:' + data['storyboard'][cclass][object]['x'] + 'px; top:' + data['storyboard'][cclass][object]['y'] + 'px;position:absolute">' +
						data['info'][cclass][object] +
					'</div>'
				);
			}
		} else if (cclass == 'ballon') {
			for (object in data['storyboard'][cclass]) {
				var ballon = data['storyboard'][cclass][object];
				var ballontext = '<div id="ballon_' + object + '" class="ballon ui-corner-all" style="z-index:' + ballon['z'] + ';position: absolute; border: solid 1px; left:' + ballon['left'] + 'px;top:' + ballon['top'] + 'px; width:' + ballon['width'] + 'px;height:' + ballon['height'] + 'px;">' +
							'<div style="height:100%; width: 100%;"><textarea name="ballon_'+object+'_text" id="ballon_'+object+'_text" style="width:' + ballon['width'] + 'px;height:' + ballon['height'] + 'px; margin:0; border:none;font-size:'+ballon['fontsize']+'px;" class="ui-corner-all" readonly="readonly">' +
								ballon['text'] +
							'</textarea></div>';
				if (ballon['appendix'] != undefined) {
						ballontext += '<div class="appendix" style="position: relative; left:'+ballon['appendix']['x']+'px;top:'+ballon['appendix']['y']+'px">' +
							'<img src="/osr/icons/kde/storyboard/custom/bubbles/'+ballon['appendix']['orientation']+'_'+ballon['appendix']['side']+'_'+ballon['appendix']['type']+'.png" alt="speaking">' +
						'</div>';
				}
				ballontext += '</div>';
				jQuery('div#drag_container').append(
					ballontext
				)
			}
		} else if (cclass == 'record') {
			for (object in data['storyboard'][cclass]) {
				var record = data['storyboard'][cclass][object];
				jQuery('div#drag_container').append(
					'<div id="record_' + object + '" class="record" style="left:' + record['x'] + 'px;top:' + record['y'] + 'px;">' +
						'<a href="javascript:start('+object+');">' +
							'<img id="record_img_'+object+'" src="/osr/icons/32/loudspeaker.png" border="0" alt="'+record['url']+'">' +
						'</a>' +
					'</div>'
				)
			}
		} else if (cclass == 'object') {
			for (object in data['storyboard'][cclass]) {
				if (object.match(/^cloud_/)) {
					jQuery('div#drag_container').append(data['info'][cclass][object]);
				} else if ((object == 'moon') || (object == 'sun')) {
					var thing = data['storyboard'][cclass][object];
					jQuery('div#drag_container').append(
						'<div id="object_' + object + '" class="new object" style="position:absolute; left: ' + thing['x'] + 'px; top: ' + thing['y'] + 'px; z-index:' + thing['z'] + ';">' +
							'<img alt="'+object+'" class="new object" src="/osr/storyboard/background/objects/'+object+'_80_80.gif">' +
						'</div>'
					);
				}
			}
		}
	}
	update_tabs('r');
	Storyboard = data['storyboard'];
	jQuery('div#drag_container').animate({opacity:1});
}

function create_sun(left, top) {
	if (!Storyboard['object']['sun']) {
		Storyboard['object']['sun'] = new Object();
   }
	Storyboard['object']['sun']['x'] = left;
	Storyboard['object']['sun']['y'] = top;
	Storyboard['object']['sun']['z'] = 5;
	
	if (jQuery('div#object_sun').size() > 0) {
		jQuery('div#object_sun').css({
			'left':left,
			'top': top
		})
	} else {
		jQuery('div#drag_container').append(
			'<div id="object_sun" class="new object" style="position:absolute; left: ' + left + 'px; top: ' + top + 'px; z-index:5;">' +
				'<img alt="sun" class="new object" src="/osr/storyboard/background/objects/sun_80_80.gif">' +
			'</div>'
		);
	}
	
	if ((left+80 > Storyboard['display']) || (top+80 > Storyboard['height'])) {
		if ((left+80 > Storyboard['display']) && (top+80 > Storyboard['height'])) {
			var offsetX = left+80-Storyboard['display'];
			var offsetY = top+80-Storyboard['height'];
			jQuery('#object_sun').animate({
				'left':'-=' + offsetX + 'px',
				'top':'-=' + offsetY + 'px'
			});	
		} else if (left+80 > Storyboard['display']) {
			var offset = left+80-Storyboard['display'];
			jQuery('#object_sun').animate({'left':'-=' + offset + 'px'});
		} else if (top+80 > Storyboard['height']) {
			var offset = top+80-Storyboard['height'];
			jQuery('#object_sun').animate({'top':'-=' + offset + 'px'});
		}
	}
	saveScreen();
}

function delete_record(url, object, caller) {
	var deletestring = 'delete_record_' + object;
	var dataArray = new Object();
	dataArray['mode'] = 'delete_record';
	dataArray['sid'] = sid;
	dataArray['com'] = com;
	dataArray['file'] = get_file(url.replace(/\.[^\.]+$/,''));
	dataArray['story'] = story;
	dataArray['screen_id'] = screen_id
	dataArray['ajax_retry'] = 'delete_record("'+url+'","'+object+'","'+caller+'")'
	updateCounter('deleteRecord'+object,'start',langDeleteRecordRequest+url);
	jQuery.ajax({
		data: dataArray,
		success: function(){
			updateCounter('deleteRecord'+object,'success',langDeleteRecordSuccess);
			if (Storyboard['record'][object] != 'undefined') {
   			delete Storyboard['record'][object];
   		}
			jQuery(caller).remove();
			var id = caller.id.split('_');
			jQuery('ul#availableRecords li#'+id[1]).remove();
			saveOption1 = 'smartupdate'; saveOption2 = 'record';
			saveScreen(saveOption1,saveOption2)
		},
		error: function() {
			updateCounter('deleteRecord'+object,'error',langDeleteRecordError,dataArray);
		}
	})
	
}

function update_lock() {
	var ajaxData = {
		sid: sid,
		projectid: story,
		screen: screen_id,
		mode: 'ajax_update_lock'
	};
	updateCounter('editMode','start',langUpdateLockRequest)
	jQuery.ajax({
		data: ajaxData,
		dataType: 'json',
		success: function(json) {
			if (json.status == 'free') {
				updateCounter('editMode','success',langUpdateLockSuccess);
				Lock = setTimeout('update_lock()',45000);
			} else {
				updateCounter('editMode','error',langUpdateLockError);
				exitEditMode();
			}
		}
	})
}

function errorHandling(error) {
	if (error == 1) {
		var jError = dialog(langAccessDenied,langNoReadAccess,0);
		jError.dialog({
			buttons: {
				'ok' : function() {
					jQuery(this).dialog('close');
				}
			}
		});
	}
}

function event_ajax_load_Bots (xml) {
	var i = 0;
	Bot = new Object();
	jQuery(xml).find('bot').each(function(){
		Bot[i] = this.textContent;
		i++;
	})
	for (var listBot in Bot) {
		for (var usedBot in Storyboard['bot']) {
			if (usedBot == Bot[listBot]) {
				temp = usedBot;
				break;
			}
		}
		if (temp) {
			break;
		}
	}
	var selectedBot = temp;
	delete temp;
	return selectedBot;
}

function event_drag_drop(event, ui) {
	jQuery(ui.helper).stop(true, true);
	var css = jQuery(ui.helper).attr('class');
//	var left = event.pageX - event.target.offsetLeft;
//	var top = event.pageY - event.target.offsetTop;
	var helperPosition = jQuery(ui.helper).offset();
	var containerPosition = jQuery('div#drag_container').offset();
	var left = helperPosition.left - containerPosition.left;
	var top = helperPosition.top - containerPosition.top;
	pObject = ui.helper;
	if (css.match(/ballon/)) {
		var id = 0;
		while (Storyboard['ballon'][id]) {
			id++;
		}
		create_ballon(id, left, top);
	} else if (css.match(/sun/)) {
		create_sun(left, top)
	} else if (css.match(/moon/)) {
		create_moon(left, top)
	} else if (css.match(/cloud/)) {
		var id = 1;
		if (css.match(/rightmenu/)) {
			var tempId = jQuery(pObject).children('div:first').attr('id');
			tempId = tempId.match(/^(.*?)_([^_]*?)$/);
			id = tempId[2];
		} else {
	  		while (Storyboard['object']['cloud_' + id]) {
	  			id++;
	  		}
	  	}	
		create_cloud(id, left, top)
	} else if (css.match(/bot/)) {
		if (css.match(/rightmenu/)) {
	  		var tempId = jQuery(pObject).children('div:first').attr('id');
	  		tempId = tempId.match(/_(.*?)$/);
	  		id = tempId[1];
			create_bot_id(id,left,top);
	  	} else {
	  		create_bot(left, top);
	  	}	
	} else if (css.match(/sound/)) {
		var id = 1;
		while (typeof(Storyboard['record'][id]) == 'undefined') {
			id++;
		}	
		create_record(id, left, top);
	}
	initDragContainer();
}

function event_drag_stop(event, ui, id) {
	var tempId = id.split('_');
	var cclass = tempId[0];
	var object = id.replace(/^.*?_/,'');
	if (cclass == 'ballon') {
   	Storyboard[cclass][object]['left'] = ui.position.left;
   	Storyboard[cclass][object]['top'] = ui.position.top;
   } else {
   	Storyboard[cclass][object]['x'] = ui.position.left;
   	Storyboard[cclass][object]['y'] = ui.position.top;
   }
	saveScreen();
}

function event_tab_change(event, ui) {
	if (typeof(rightMenuElementDropped) == 'undefined') {
		rightMenuElementDropped = false;
	}
	var panel = ui.panel.id;
	if (panel == 'rmcloud') {
		update_tabs('c');
	} else if (panel == 'rmbot') {
		update_tabs('b');
	} else if (panel == 'rmrecord') {
		update_tabs('r');
	} else if (panel == 'rmballon') {
		update_tabs('s');
	}
}

function exitEditMode() {
	jQuery('img#edit_screen').addClass('inactive').removeClass('active');
	jQuery('#edit_screen').attr('src','/osr/icons/kde/storyboard/custom/edit_passiv.png');
	clearTimeout(Lock);
	jQuery('div#leftmenu, div#rightmenu, div#editScene').hide();
	jQuery('div#drag_container').css({  //IE hack
		'left': -48
	})
	jQuery('div#drag_container *').unbind();
	jQuery('#drag_container textarea').attr('readonly','readonly');
	var ajaxData = {
		sid: sid,
		projectid: story,
		screen: screen_id,
		mode: 'ajax_remove_lock'
	};
	jQuery.ajax({
		data: ajaxData
	})
}

function GetHTTPParam(name) {  //Get Parameters through GET
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?((&amp;)|&)]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
};

function getClassType(pElement) {
	var cclass = jQuery(pElement).attr('class');
	if (cclass.match(/ballon/)) {
		return "ballon"
	} else if (cclass.match(/bot/)) {
		return "bot"
	} else if (cclass.match(/object/)) {
		return "object"
	} else if (cclass.match(/record/)){
		return "record"
	}
}

function get_file(string) {
	var folderArray = new Array();
	folderArray = string.split('/');
	return folderArray[folderArray.length - 1];
}

function getObjectType(pElement) {
	var id = jQuery(pElement).attr('id');
	var cclass = id.match(/^.*?_/);
	cclass = cclass[0].replace(/_/,'');
	var object = id.match(/_(.*?)$/);
	object = object[1];
	var resultObject = new Object();
	resultObject['class'] = cclass;
	resultObject['object'] = object;
	return resultObject;
}

function handleArrows() {
	if (screen_id <= 1) {
		jQuery('div#navi_bar img#prev_screen').attr('src','/osr/icons/kde/storyboard/custom/navi_back_gray.png').addClass('disabled');
		jQuery('div#navi_bar img#first_screen').attr('src','/osr/icons/kde/storyboard/custom/navi_first_gray.png').addClass('disabled');
	} else {
		jQuery('div#navi_bar img#prev_screen.disabled').attr('src','/osr/icons/kde/storyboard/custom/navi_back.png').removeClass('disabled');
		jQuery('div#navi_bar img#first_screen.disabled').attr('src','/osr/icons/kde/storyboard/custom/navi_first.png').removeClass('disabled');
	}
	
	if (screen_id*1 >= max_screens*1) {
		jQuery('div#navi_bar img#next_screen').attr('src','/osr/icons/kde/storyboard/custom/navi_forward_gray.png').addClass('disabled');
		jQuery('div#navi_bar img#last_screen').attr('src','/osr/icons/kde/storyboard/custom/navi_last_gray.png').addClass('disabled');
	} else {
		jQuery('div#navi_bar img#next_screen.disabled').attr('src','/osr/icons/kde/storyboard/custom/navi_forward.png').removeClass('disabled');
		jQuery('div#navi_bar img#last_screen.disabled').attr('src','/osr/icons/kde/storyboard/custom/navi_last.png').removeClass('disabled');
	}	
}

function hideBusySaving() {
	if ((currentAjaxErrors == 0) && (currentAjaxRequests == 0)) {
		jQuery('div#ajaxCounter').hide();
	}
}

function initAppendixDraggable() {
	jQuery('div#drag_container div.ballon div.appendix').draggable('destroy').draggable({
		start: function(event, ui) {
			draggedBubble = new Object();
			draggedBubble['selector'] = 'div#' + jQuery(this).parent().attr('id');
			var position = jQuery(draggedBubble['selector']).position();
			draggedBubble['left'] = position.left;
			draggedBubble['top'] = position.top;
			draggedBubble['right'] = position.left + jQuery(draggedBubble['selector']).width();
			draggedBubble['bottom'] = position.top + jQuery(draggedBubble['selector']).height();
			draggedBubble['width'] = jQuery(draggedBubble['selector']).width();
			draggedBubble['height'] = jQuery(draggedBubble['selector']).height();
			var imgsrc = jQuery(this).children('img').attr('src');
			var tempvar = imgsrc.split('/');
			var img = tempvar.pop();
			var folder = tempvar.join('/');
			var tempvar = img.split('_');
			var orientation = tempvar.shift();
			draggedBubble['folder'] = folder;
			draggedBubble['orientation'] = orientation;
			draggedBubble['img'] = tempvar.join('_');
			draggedBubble['accessor'] = jQuery(this).children('img');
		},
		drag: function(event, ui) {
			var test = jQuery(this).position();
			if (test.top < 0-jQuery(this).children('img').height()) {
				if (draggedBubble['orientation'] != 'upper') {
					rotateBubble('upper');
				}
			} else if (ui.position.top > 0) {
				if (draggedBubble['orientation'] != 'bottom') {
					rotateBubble('bottom');
				}
			} else if (ui.position.left < 0-jQuery(this).children('img').width()) {
				if (draggedBubble['orientation'] != 'left') {
					rotateBubble('left');
				}
			} else if (ui.position.left > draggedBubble['width']) {
				if (draggedBubble['orientation'] != 'right') {
					rotateBubble('right');
				}
			}
		},
		stop: function(event, ui) {
			if (draggedBubble['orientation'] == 'upper') {
				var position = jQuery(this).position();
				var offset = position.left;
				var bubbleWidth = jQuery(this).children('img').width();
				offset < 0 ? offset = 0 : offset;
				offset > draggedBubble['width']-bubbleWidth ? offset = draggedBubble['width']-bubbleWidth : offset;
				jQuery(this).animate({
					top: -(draggedBubble['height'])-jQuery(this).height()+'px',
					left: offset+'px'
				},saveAppendix)
			} else if (draggedBubble['orientation'] == 'bottom') {
				var position = jQuery(this).position();
				var offset = position.left;
				var bubbleWidth = jQuery(this).children('img').width();
				offset < 0 ? offset = 0 : offset;
				offset > draggedBubble['width']-bubbleWidth ? offset = draggedBubble['width']-bubbleWidth : offset;
				jQuery(this).animate({
					top: 0+'px',
					left: offset+'px'
				},saveAppendix)
			} else if (draggedBubble['orientation'] == 'left') {
				var position = jQuery(this).position();
				var offset = position.top;
				var bubbleWidth = jQuery(this).children('img').height();
				offset < 0 ? offset = 0 : offset;
				offset > draggedBubble['height']-bubbleWidth ? offset = draggedBubble['height']-bubbleWidth : offset;
				jQuery(this).animate({
					left: 0-jQuery(this).children('img').width()+'px',
					top: offset-draggedBubble['height']+'px'
				},saveAppendix)
			} else if (draggedBubble['orientation'] == 'right') {
				var position = jQuery(this).position();
				var offset = position.top;
				var bubbleWidth = jQuery(this).children('img').height();
				offset < 0 ? offset = 0 : offset;
				offset > draggedBubble['height']-bubbleWidth ? offset = draggedBubble['height']-bubbleWidth : offset;
				jQuery(this).animate({
					left: draggedBubble['width']+'px',
					top: offset-draggedBubble['height']+'px'
				},saveAppendix)
			}
			
		}
	})
	.unbind('dblclick').dblclick(function() {
		mirrorAppendix(this);
	})
}

function saveAppendix(caller) {
	parentID = jQuery(this).parent('div').attr('id');
	parentID = parentID.replace(/^ballon_/,'');
	var zeAppendix = Storyboard['ballon'][parentID]['appendix'];
	var left = jQuery(this).css('left');
	var top = jQuery(this).css('top');
	left = left.replace(/px$/,'');
	top = top.replace(/px$/,'');
	zeAppendix['x'] = left;
	zeAppendix['y'] = top;
	zeAppendix['orientation'] = draggedBubble['orientation'];
	saveScreen();
}

function initBallonsSpeech() {
	jQuery('ul#availableBallons li').draggable('destroy').draggable({
		helper: 'clone',
		appendTo: '#storyboard',
		zIndex: 2000,
		revert: false,
		drag: function() {
			jQuery('div#drag_container').children('div:not(.ballon)').stop(true,false).animate({
				opacity: 0.2
			});
		},
		stop: function() {
			jQuery('div#drag_container').children('div:not(.ballon)').stop(true,false).animate({
				opacity: 1
			});
		}
	});
	
	jQuery('div#drag_container div.ballon').droppable('destroy').droppable({
		accept: 'ul#availableBallons li',
		activeClass: 'acceptedBallon',
		hoverClass: 'hoveredBallon',
		drop: function(event, ui) {
			append_talking(ui.draggable, this);	
			initAppendixDraggable();
		}
	})
	
	jQuery('div#drag_container div.ballon').resizable('destroy').resizable({
		containment: 'div#drag_container',
		handles: 'all',
		minHeight: 60,
		minWidth: 60,
		start: function() {
			draggedBubble = new Object();
			var ObjectType = getObjectType(this);
			draggedBubble['class'] = ObjectType['class'];
			draggedBubble['object'] = ObjectType['object'];
			if (typeof(Storyboard[draggedBubble['class']][draggedBubble['object']]['appendix']) != 'undefined') {
			 	var imgsrc = jQuery(this).find('div.appendix').children('img').attr('src');
			 	var tempvar = imgsrc.split('/');
			 	var img = tempvar.pop();
			 	var tempvar = img.split('_');
			 	var orientation = tempvar.shift();
			 	draggedBubble['orientation'] = orientation;
			 	draggedBubble['left'] = Storyboard[draggedBubble['class']][draggedBubble['object']]['appendix']['x'];
			 	draggedBubble['top'] = Storyboard[draggedBubble['class']][draggedBubble['object']]['appendix']['y'];
			 	draggedBubble['parentHeight'] = jQuery(this).height();
		 	}
		},
		resize: function(event, ui) {
			if (typeof(Storyboard[draggedBubble['class']][draggedBubble['object']]['appendix']) != 'undefined') {
			 	if (draggedBubble['orientation'] == 'bottom') {
			 		var appendixWidth = jQuery(this).find('div.appendix').children('img').width();
			 		var bubbleWidth = jQuery(this).width();
			 		if (bubbleWidth < draggedBubble['left'] + appendixWidth) {
			 			jQuery(this).find('div.appendix').css({
			 				left: bubbleWidth - appendixWidth
			 			});
			 		}
			 	} else if (draggedBubble['orientation'] == 'upper') {
			 		var appendixWidth = jQuery(this).find('div.appendix').children('img').width();
					var appendixHeight = jQuery(this).find('div.appendix').children('img').height();
			 		var bubbleWidth = jQuery(this).width();
					var bubbleHeight = jQuery(this).height();
					var offset = draggedBubble['left'];
					if (bubbleWidth < draggedBubble['left'] + appendixWidth) {
						offset = bubbleWidth - appendixWidth
			   	}
			 		jQuery(this).find('div.appendix').css({
			 			left: offset,
						top: -bubbleHeight-appendixHeight
			 		});
			 	} else if (draggedBubble['orientation'] == 'left') {
			 		var appendixWidth = jQuery(this).find('div.appendix').children('img').width();
					var appendixHeight = jQuery(this).find('div.appendix').children('img').height();
			 		var bubbleWidth = jQuery(this).width();
					var bubbleHeight = jQuery(this).height();
					var offset = Math.abs(draggedBubble['top']) + bubbleHeight - draggedBubble['parentHeight'];
					if (bubbleHeight < draggedBubble['parentHeight']-Math.abs(draggedBubble['top'])+appendixHeight) {
						offset = appendixHeight
			   	}
		 			jQuery(this).find('div.appendix').css({
		 				top: -offset
		 			});
			 	} else if (draggedBubble['orientation'] == 'right') {
			 		var appendixWidth = jQuery(this).find('div.appendix').children('img').width();
					var appendixHeight = jQuery(this).find('div.appendix').children('img').height();
			 		var bubbleWidth = jQuery(this).width();
					var bubbleHeight = jQuery(this).height();
					var offset = Math.abs(draggedBubble['top']) + bubbleHeight - draggedBubble['parentHeight'];
					if (bubbleHeight < draggedBubble['parentHeight']-Math.abs(draggedBubble['top'])+appendixHeight) {
						offset = appendixHeight
			   	}
			 	jQuery(this).find('div.appendix').css({
			 		left: bubbleWidth,
					top: -offset
			 	});
			 	}
		 	}
			jQuery(this).find('textarea').css({
				width: jQuery(this).width(),
				height: jQuery(this).height()
			})
		},
		stop: function() {
			var thisBubble = Storyboard[draggedBubble['class']][draggedBubble['object']];
			thisBubble['width'] = jQuery(this).width();
			thisBubble['height'] = jQuery(this).height();
			if (typeof(thisBubble['appendix']) != 'undefined') {
				var temp = jQuery(this).find('div.appendix').css('left');
				thisBubble['appendix']['x'] =  temp.replace(/px$/,'');
				temp = jQuery(this).find('div.appendix').css('top');
				thisBubble['appendix']['y'] =  temp.replace(/px$/,'');
			}
			saveScreen();
		}
	});
	

}

function initDragContainer() {
	jQuery('#drag_container').children('div').draggable({
		containment: 'div#drag_container',
		drag: function(){
			jQuery('.overlay').hide();
		},
		stop: function(event, ui){
			jQuery('.overlay').show();
			var id = jQuery(this).attr('id');
			event_drag_stop(event, ui, id);
		}
	})
	.hover(
		function() {
			objectHoverIn(this)
		},
		function() {
  	 		objectHoverOut(this)
  		}
	);
	jQuery('#drag_container textarea').change(function(){
		var id = jQuery(this).parents('div.ballon:first').attr('id');
		id = id.split('_');
		Storyboard[id[0]][id[1]]['text'] = jQuery(this).val();
		saveScreen();
	});
	
	/* There is a Bug in IE7/8 where dragging of an appendix causes the speech bubble to move with it.
	 * While the cancel option negates that, it also causes a Bug in Firefox where you cannot place
	 * a cursor inside the bubble with left click. To get the best from 2 worlds, we introduce yet another
	 * Hack à la carte
	 */
	if (jQuery.browser.msie) {
		jQuery('#drag_container').children('div.ballon').draggable('option','cancel','div.appendix');
	}
	
	initAppendixDraggable();

}

function initDragDrop() {		
	initDragContainer();
	
	jQuery('div#leftmenu').find('li.object').draggable({
		helper: 'clone',
		zIndex: 2000,
		revert: false
	});
	
	jQuery('div#drag_container').droppable({
		accept: '.object,.rightmenu',
		tolerance: 'fit',
		over: function(event, ui){
			var css = jQuery(ui.helper).attr('class');
			if (!css.match(/rightmenu/)) {
		 		morph(ui.helper);
		 	} 
		},
		out: function(event, ui) {
			var css = jQuery(ui.helper).attr('class');
			if (!css.match(/rightmenu/)) {
		 		unmorph(ui.helper);
		 	}
		},
		drop: function(event, ui) {
			rightMenuElementDropped = true;
			event_drag_drop(event, ui);
		}
	});
	
	initBallonsSpeech();
	
	jQuery('div#rightmenu').tabs({
		show: function(event, ui){
			event_tab_change(event, ui);
		}
	})
	.tabs('select',0)
	.find('div:not(#rmballon) li').remove();	
	
	jQuery('div#rightmenu, div#rightmenu ul').removeClass('ui-corner-all');
}

function initDragDropRightMenuItem(pElement){
	jQuery(pElement).find('li').draggable({
		revert: 'invalid',
		zIndex: 2000,
		cursorAt: {top:0, left:0}, 
		appendTo: '#storyboard',
		helper:'clone',
		start: function(event,ui) {
			jQuery(this).css({
				'visibility':'hidden'
			});
		},
		stop: function(event,ui) {
			if (!rightMenuElementDropped) {
	   		jQuery(this).css({
					'visibility':'visible'
				});			
	   	};
			rightMenuElementDropped = false;
		}
	});
}

function initSlider() {
	jQuery('div#slider td').live('click', function(){
		screenTransition(this.id);
		handleArrows();
	})
}

function initTabs () {
	jQuery('#rightmenu').find('div').css({
		'max-height':Storyboard['height']-32 + 'px'
	})
}

function loadIntoSlider(json) {
	jQuery.each(json.screens, function(i, item) {
		var thisTD = jQuery('div#slider td#'+i+' div');
		thisTD.empty().append(item);
		if (json.locks[i] == 'busy') {
			thisTD.animate({
				borderTopColor: '#FF0000',
				borderLeftColor: '#FF0000',
				borderBottomColor: '#FF0000',
				borderRightColor: '#FF0000'
			});
		}
	});
}

function lowerLayer(caller) {
	var ObjectType = getObjectType(caller);
	var cclass = ObjectType['class'];
	var object = ObjectType['object'];
	if (Storyboard[cclass][object]['z'] > 5) {
		Storyboard[cclass][object]['z']--;
	}
	jQuery(caller).find('#layernumber').text(Storyboard[cclass][object]['z']-4)
}

function mirrorAppendix(caller) {
	var imgsrc = jQuery(caller).children('img').attr('src');
	var tempvar = imgsrc.split('/');
	var img = tempvar.pop();
	var folder = tempvar.join('/');
	var tempvar = img.split('_');
	tempvar[1] == 'left' ? tempvar[1] = 'right' : tempvar[1] = 'left'
	var imgsrc = folder + '/' + tempvar.join('_');
	jQuery(caller).children('img').attr('src',imgsrc);
	var parentID = jQuery(caller).parent('div').attr('id');
	parentID = parentID.replace(/^ballon_/,'');
	Storyboard['ballon'][parentID]['side'] = tempvar[1];
	Storyboard['ballon'][parentID]['appendix']['side'] = tempvar[1];
	saveScreen();
}

function objectHoverIn(caller) {
	jQuery(caller).css({
		'z-index':100
	})
	var ObjectType = getObjectType(caller);
	z_index = Storyboard[ObjectType['class']][ObjectType['object']]['z'];
	fontsize = Storyboard[ObjectType['class']][ObjectType['object']]['fontsize'];
	//jQuery(caller).prepend('<div id="layer" class="overlay">');
	jQuery(caller).append('<img title="' + langRemoveFromScreen + '" id="remove" class="overlay" src="/osr/icons/kde/crystalclear/16x16/actions/fileclose.png">');
	jQuery(caller).find('#remove').unbind().bind('click',function(){
		removeObject(caller);
	});
	if (ObjectType['class'] != 'record') {
		jQuery(caller).append('<img id="layerup" title="'+langBringToFront+'" class="overlay" src="/osr/icons/kde/crystalclear/16x16/actions/14_layer_raiselayer.png">');
		jQuery(caller).append('<p id="layernumber" class="overlay">' + (z_index-4) + '</p>');
		jQuery(caller).append('<img id="layerdown" title="'+langSendToBack+'" class="overlay" src="/osr/icons/kde/crystalclear/16x16/actions/14_layer_lowerlayer.png">');
		jQuery(caller).find('#layerup').unbind().bind('click',function(){
			raiseLayer(caller)
		});
		jQuery(caller).find('#layerdown').unbind().bind('click',function(){
			lowerLayer(caller)
		})
   }
	if (ObjectType['class'] == 'ballon') {
		if (jQuery(caller).find('div.appendix').size() > 0) {
	  		jQuery(caller).append('<img title="' + langRemoveTailFromScreen + '" id="removeAppendix" class="overlay" src="/osr/icons/kde/crystalclear/16x16/actions/edit_remove.png">');
	  		jQuery(caller).find('#removeAppendix').unbind().bind('click', function(){
	 	 		removeTheAppendix(caller);
	  		})
	  	};
		jQuery(caller).append('<img title="'+langMoveBubble+'" id="move_ballon" class="overlay" src="/osr/icons/kde/crystalclear/16x16/actions/move.png">');
		
		//Ugly Hack for IE8. We do it for all IE just to be sure
		if (jQuery.browser.msie) {
			jQuery(caller).find('textarea').css({
				'width'	:Storyboard[ObjectType['class']][ObjectType['object']]['width']-5+'px',
				'height':Storyboard[ObjectType['class']][ObjectType['object']]['height']-5+'px'
			})
		}
		jQuery(caller).append('<img title="'+langIncFontSize+'" id="bigger_font" class="overlay" src="/osr/icons/kde/crystalclear/16x16/actions/14_layer_raiselayer.png">');
		jQuery(caller).append('<p id="font_size" class="overlay">A</p>');
		jQuery(caller).append('<img title="'+langDecFontSize+'" id="smaller_font" class="overlay" src="/osr/icons/kde/crystalclear/16x16/actions/14_layer_lowerlayer.png">');
		jQuery(caller).find('#bigger_font').unbind().bind('click',function(){
			biggerFont(caller)
		});
		jQuery(caller).find('#smaller_font').unbind().bind('click',function(){
			smallerFont(caller)
		})
   }
};

function objectHoverOut(caller) {
	var ObjectType = getObjectType(caller);
	var cclass = ObjectType['class'];
	var object = ObjectType['object'];
	jQuery(caller).css({
		'z-index':Storyboard[ObjectType['class']][ObjectType['object']]['z']
	})
	jQuery(caller).find('.overlay').remove();
	if ((z_index != Storyboard[cclass][object]['z']) || (fontsize != Storyboard[cclass][object]['fontsize'])) {
		saveScreen();
	}
	//Ugly Hack for IE8. We do it for all IE just to be sure
	if (jQuery.browser.msie) {
		jQuery(caller).find('textarea').css({
			'width':Storyboard[ObjectType['class']][ObjectType['object']]['width']+'px',
			'height':Storyboard[ObjectType['class']][ObjectType['object']]['height']+'px'
		})
	}
};

function playThemAll() {
	if (player.playing) {
		player.stop();
	} else {
		player.playall();
	}
}

function raiseLayer(caller) {
	var ObjectType = getObjectType(caller);
	var cclass = ObjectType['class'];
	var object = ObjectType['object'];
	if (Storyboard[cclass][object]['z'] < 50) {
   	Storyboard[cclass][object]['z']++;
   }
	jQuery(caller).find('#layernumber').text(Storyboard[cclass][object]['z']-4)
}

function reloadPlaylist() {
	player.clearPlaylist();
	jQuery('ul#availableRecords li').each(function() {
		var id = this.id;
		player.addToPlaylist(Storyboard['record'][id]['url']);
	})
}

function remapSlider() {
	jQuery('div#slider td').each(function (i, item) {
		jQuery(this).attr('id',i+1);
	})
}

function removeTheAppendix(caller) {
	var ObjectType = getObjectType(caller);
	var cclass = ObjectType['class'];
	var object = ObjectType['object'];
	delete Storyboard[cclass][object]['appendix'];
	jQuery(caller).find('div.appendix').remove();
	jQuery(caller).find('img#removeAppendix').remove()
	saveScreen();
}

function removeObject(caller){
	var id = jQuery(caller).attr('id');
	var tempId = id.split('_');
	var cclass = tempId[0];
	var object = id.replace(/^.*?_/,'');
	var url = '';
	var saveOption1 = '';
	var saveOption2 = '';
	if (Storyboard[cclass][object]) {
		url = Storyboard[cclass][object]['url'];
	}
	
	if (cclass == 'record') {
		delete_record(url, object, caller);
	} else if (cclass == 'ballon') {
		saveOption1 = 'smartupdate'; saveOption2 = 'speech';
	} else if (cclass == 'bot') {
		saveOption1 = 'smartupdate'; saveOption2 = 'bot';
	} else if (cclass == 'object') {
		if (object.match(/^cloud_/)) {
			saveOption1 = 'smartupdate'; saveOption2 = 'cloud';
		}
	}
	if (cclass != 'record') {
		if (Storyboard[cclass][object]) {
   		delete Storyboard[cclass][object];
   	}
   	jQuery(caller).remove();
   	saveScreen(saveOption1, saveOption2);
   }
}

function rotateBubble(direction) {
	draggedBubble['orientation'] = direction;
	draggedBubble['accessor'].attr('src',draggedBubble['folder']+'/'+draggedBubble['orientation']+'_'+draggedBubble['img']);
}

function start(id) {
	if (player.playing) {
		player.stop();
   } else {
   	player.play(Storyboard['record'][id]['url'])
   }
}

function saveScreen(option1, option2) {
	var dataArray = new Object();
	for (cclass in Storyboard) {
		if ((cclass == 'background') || (cclass == 'overlay') || (cclass == 'floor') || (cclass == 'format')) {
			dataArray[cclass] = Storyboard[cclass];
		} else if (cclass == 'ballon') {
			for (object in Storyboard[cclass]) {
				dataArray[cclass + '_' + object + '_height'] = Storyboard[cclass][object]['height'];
				dataArray[cclass + '_' + object + '_left'] = Storyboard[cclass][object]['left'];
				dataArray[cclass + '_' + object + '_side'] = Storyboard[cclass][object]['side'];
				dataArray[cclass + '_' + object + '_top'] = Storyboard[cclass][object]['top'];
				dataArray[cclass + '_' + object + '_width'] = Storyboard[cclass][object]['width'];
				dataArray[cclass + '_' + object + '_z'] = Storyboard[cclass][object]['z'];
				dataArray[cclass + '_' + object + '_text'] = Storyboard[cclass][object]['text'];
				dataArray[cclass + '_' + object + '_fontsize'] = Storyboard[cclass][object]['fontsize'];
				if (typeof(Storyboard[cclass][object]['appendix']) != 'undefined') {
					dataArray[cclass + '_' + object + '_appendix_x'] = Storyboard[cclass][object]['appendix']['x'];
					dataArray[cclass + '_' + object + '_appendix_y'] = Storyboard[cclass][object]['appendix']['y'];
					dataArray[cclass + '_' + object + '_appendix_orientation'] = Storyboard[cclass][object]['appendix']['orientation'];
					dataArray[cclass + '_' + object + '_appendix_side'] = Storyboard[cclass][object]['appendix']['side'];
					dataArray[cclass + '_' + object + '_appendix_type'] = Storyboard[cclass][object]['appendix']['type'];
				}
			}
		} else if (cclass == 'bot') {
			for (object in Storyboard[cclass]) {
				dataArray['bot_x:' + object] = Storyboard[cclass][object]['x'];
				dataArray['bot_y:' + object] = Storyboard[cclass][object]['y'];
				dataArray['bot_z:' + object] = Storyboard[cclass][object]['z'];
			}
		} else if (cclass == 'object') {
			for (object in Storyboard[cclass]) { //don't look for any logic around here, it works and that's all that matters
				dataArray[cclass + '_' + object + '_x'] = Storyboard[cclass][object]['x'];
				dataArray[cclass + '_' + object + '_y'] = Storyboard[cclass][object]['y'];
				dataArray[cclass + '_' + object + '_z'] = Storyboard[cclass][object]['z'];
			}
		} else if (cclass == 'record') {
			var record_order = '';			
			jQuery('ul#availableRecords li').each(function() {
				var object = this.id;
				record_order += object+'_'; 
			//for (object in Storyboard[cclass]) {
				dataArray[cclass + '_name_' + object] = Storyboard[cclass][object]['name'];
				dataArray[cclass + '_length_' + object] = Storyboard[cclass][object]['size'];
				dataArray[cclass + '_url_' + object] = Storyboard[cclass][object]['url'];
				dataArray[cclass + '_x_' + object] = Storyboard[cclass][object]['x'];
				dataArray[cclass + '_y_' + object] = Storyboard[cclass][object]['y'];
			//}
			})
			dataArray['record_order'] = record_order;
		}
	}

	dataArray['mode'] = 'ajax_save_screen';
	dataArray['sid'] = sid;
	dataArray['projectid'] = story;
	dataArray['screen'] = screen_id;
	if (uploadMode != 0) {
		switch (uploadMode) {
			case 1: 
				//reserved for File Upload [unused]
			break;
			case 2:
				var folder = option1;
				var file = option2;
					dataArray['bg_folder'] = folder;
					dataArray['bg_file'] = folder + '/' + file.replace(/^tn_/,'');
					dataArray['background'] = 'upload:';
			break;
			case 3:
				//reserved for Painter
			break;
			default:
				//This should never happen
		}
		uploadMode = 0;
	}

	if (typeof(SaveRequest) != 'undefined') {
		SaveRequest.abort();
	}
	dataArray['ajax_retry'] = 'saveScreen("'+option1+'","'+option2+'")';
	updateCounter('saveScreen','start',langSaveScreenRequest);
	SaveRequest = jQuery.ajax({
		url: '/cgi-bin/apps/storyboard',
		data: dataArray,
		success: function(){
			updateCounter('saveScreen','success');
			if (option1 == 'smartupdate') {
				if (option2 == 'speech') {
					update_tabs('s');
				} else if (option2 == 'bot') {
					update_tabs('b');
				} else if (option2 == 'cloud') {
					update_tabs('c');
				} else if (option2 == 'record') {
					update_tabs('r');
				}
			}
		},
		error: function() {
			updateCounter('saveScreen','error',langSaveScreenError,dataArray);
		}
	})	
}

function screenTransition(end) {
	var data = chooseScreen(end);
	if (typeof(data) == 'object') {
		if (jQuery('img#edit_screen').hasClass('active')) {
			exitEditMode();
		}
		jQuery('div#drag_container').animate({opacity:0},function(){
			createScreen(data);
		})
		
		screen_id = end;
		jQuery('div#navi_bar input[name="screen"]').attr('value',end);
		updateSliderPosition(end);
	}
}

function showBusySaving() {
	jQuery('div#dragcontainer').append(
		'<div id="ajaxCounter" class="ajaxCounter"></div>'
	);
}

function sliderLoadScreens() {
	updateCounter('sliderLoadScreens','start','');
	var ajaxData = {
			sid: sid,
			projectid: story,
			mode: 'ajax_slider_screens',
			width: 80,
			height: 60,
			ajax_retry: 'sliderLoadScreens();'
	};
	jQuery.ajax({
		data: ajaxData,
		dataType: 'json',
		success: function(json) {
			updateCounter('sliderLoadScreens','success','');
			loadIntoSlider(json);
			updateSliderPosition(screen_id);
			sliderTimer = setTimeout('updateSlider();',15000);
		},
		error: function() {
			updateCounter('sliderLoadScreens','error','',ajaxData);
		}
	})
}

function smallerFont(caller) {
	var ObjectType = getObjectType(caller);
	var cclass = ObjectType['class'];
	var object = ObjectType['object'];
	
	jQuery(caller).find('textarea').animate({
		'fontSize': '-=5px'
	},'fast');
	Storyboard[ObjectType['class']][ObjectType['object']]['fontsize'] -= 5;
}

function stopped(){
	player.stopped();
}

function takeHiddenValues(){
	Storyboard = new Array();
	hv = jQuery('.hidden_values');
	
	Storyboard['overlay'] = jQuery(hv).find('input[name=overlay]').val();
	Storyboard['floor'] = jQuery(hv).find('input[name=overlay')
}

function morph(pObject){
	var css = jQuery(pObject).attr('class');
	if (css.match(/ballon/)) {
		jQuery(pObject).find('img').css({'position':'absolute'});
		jQuery(pObject).append('<textarea class="temp">');
		jQuery(pObject).children().stop(true, true);
		jQuery(pObject).find('img').animate({width:'150px', height:'75px', opacity:'0'},'def');
		jQuery(pObject).find('textarea.temp').animate({width:'150px', height:'75px', opacity:'1'},'def');
	} else if (css.match(/sun/)) {
		jQuery(pObject).find('img').css({'position':'absolute'});
		jQuery(pObject).append('<img class="temp" src="/osr/storyboard/background/objects/sun_80_80.gif">');
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'80px', height:'80px', opacity:'0'},'def');
		jQuery(pObject).find('img.temp').animate({width:'80px', height:'80px', opacity:'1'},'def');
	} else if (css.match(/moon/)) {
		jQuery(pObject).find('img').css({'position':'absolute'});
		jQuery(pObject).append('<img class="temp" src="/osr/storyboard/background/objects/moon_80_80.gif">');
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'80px', height:'80px', opacity:'0'},'def');
		jQuery(pObject).find('img.temp').animate({width:'80px', height:'80px', opacity:'1'},'def');
	} else if (css.match(/bot/)) {
		jQuery(pObject).find('img').css({'position':'absolute'});
		jQuery(pObject).append('<img class="temp" src="/osr/icons/kde/storyboard/custom/bot.png">');
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'171px', height:'203px', opacity:'0'},'def');
		jQuery(pObject).find('img.temp').animate({width:'171px', height:'203px', opacity:'1'},'def');
	} else if (css.match(/cloud/)) {
		jQuery(pObject).find('img').css({'position':'absolute'});
		jQuery(pObject).append('<img class="temp" src="/osr/icons/kde/storyboard/custom/cloud.png">');
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'112px', height:'67px', opacity:'0'},'def');
		jQuery(pObject).find('img.temp').animate({width:'112px', height:'67px', opacity:'1'},'def');
	} else if (css.match(/sound/)) {
		jQuery(pObject).find('img').css({'position':'absolute'});
		jQuery(pObject).append('<img class="temp" src="/osr/icons/32/loudspeaker.png">');
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'32px', height:'32px', opacity:'0'},'def');
		jQuery(pObject).find('img.temp').animate({width:'32px', height:'32px', opacity:'1'},'def');
	} 
}

function nameToId(pName) {
	var result = false;
	for (id in Storyboard['record']) {
		if (Storyboard['record'][id]['name'] == pName) {
			result = id;
		}
	}
	return result;
}

function urlToId(pName) {
	var result = false;
	for (id in Storyboard['record']) {
		if (Storyboard['record'][id]['url'] == pName) {
			result = id;
		}
	}
	return result;
}

function unmorph(pObject){
	var css = jQuery(pObject).attr('class');
	if (css.match(/ballon/)) {
		jQuery(pObject).children().stop(true, false);
		jQuery(pObject).find('img').animate({width:'32px', height:'32px', opacity:'1'},'def');
		jQuery(pObject).find('textarea.temp').animate({width:'32px', height:'32px', opacity:'0'},'def', function(){
			jQuery(this).remove();
		});
	} else if (css.match(/sun/)) {
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'32px', height:'32px', opacity:'1'},'def');
		jQuery(pObject).find('img.temp').animate({width:'32px', height:'32px', opacity:'0'},'def', function(){
			jQuery(this).remove();
		});
	} else if (css.match(/moon/)) {
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'32px', height:'32px', opacity:'1'},'def');
		jQuery(pObject).find('img.temp').animate({width:'32px', height:'32px', opacity:'0'},'def', function(){
			jQuery(this).remove();
		});
	} else if (css.match(/bot/)) {
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'32px', height:'32px', opacity:'1'},'def');
		jQuery(pObject).find('img.temp').animate({width:'32px', height:'32px', opacity:'0'},'def', function(){
			jQuery(this).remove();
		});
	} else if (css.match(/cloud/)) {
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'32px', height:'32px', opacity:'1'},'def');
		jQuery(pObject).find('img.temp').animate({width:'32px', height:'32px', opacity:'0'},'def', function(){
			jQuery(this).remove();
		});
	} else if (css.match(/sound/)) {
		jQuery(pObject).find('img').stop(true, false);
		jQuery(pObject).find('img.object').animate({width:'32px', height:'32px', opacity:'1'},'def');
		jQuery(pObject).find('img.temp').animate({width:'32px', height:'32px', opacity:'0'},'def', function(){
			jQuery(this).remove();
		});
	}
}

function updateCounter(type, direction, typeText, dataPackage) {
	if ((typeof(typeText) != 'undefined') && (typeText != "")) {
		jQuery('div#ajaxCounter li#' + type).find('span').text(typeText);
	}
	
	if (direction == 'start') {
		jQuery('div#ajaxCounter li#' + type).remove()
   	jQuery('div#ajaxCounter:hidden').show();
   	jQuery('div#ajaxCounter ul').append('<li id="' + type + '"><img src="/osr/giflib/ajax-loader.gif"><span class="desc">' + typeText + '</span></li>')
	} else if (direction == 'success') {
		jQuery('div#ajaxCounter li#'+type).find('img').attr('src','/osr/icons/kde/crystalclear/16x16/actions/apply.png');
		jQuery('div#ajaxCounter li#'+type).addClass('success').fadeOut(2000,function(){
			jQuery(this).remove();
			hideBusySaving();
		});
	} else if (direction == 'error') {
		jQuery('div#ajaxCounter li#'+type).find('img').attr('src','/osr/icons/kde/crystalclear/16x16/actions/cancel.png');
		jQuery('div#ajaxCounter li#'+type).addClass('error').append('<button id="'+type+'" class="retry">'+langRetry+'</button><button id="'+type+'" class="dismiss">'+langDismiss+'</button>');
		retryArray[type] = dataPackage;
	}
	currentAjaxRequests = jQuery('div#ajaxCounter li:not(.error):not(.success)').size();
	currentAjaxErrors = jQuery('div#ajaxCounter li.error').size();
	jQuery('div#ajaxCounter span#currentRequests').text(currentAjaxRequests);
	jQuery('div#ajaxCounter span#currentErrors').text(currentAjaxErrors);
}

function updateMenuPosition() {
	if (jQuery('img#edit_screen').hasClass('active')) {
		var temp = -(jQuery('div#storyboard').height()-jQuery('div#collaboration_toolbar').height()-8);
		jQuery('#leftmenu').show().css({
			'top':0,
			'height': Storyboard['height']
		});
		jQuery('#rightmenu').show().css({
			'top':0,
			'height':Storyboard['height']
		});
		jQuery('#rightmenu').find('div:not(.ui-tabs-panel), ul:not(#tabs)').css({
			'max-height':(Storyboard['height']-128-35-2)
		});
		jQuery('#editScene').show().css({
			'display':'inline'
		})
		if (jQuery.browser.msie) {  //IE hack
			jQuery('div#drag_container').css({
				'left': 0
			})
		}
	}
}

function updateSlider() {
	var screenOrder = ''
	jQuery('div#slider td').each(function(i, item) {
		screenOrder += this.abbr + '_';
	})
	var ajaxData = {
		sid: sid,
		projectid: story,
		date: theDate,
		screenOrder: screenOrder,
		mode: 'ajax_update_slider'
	};
	jQuery.ajax({
		data: ajaxData,
		dataType: 'json',
		success: function (json) {
			updateSliderContent(json);
		}
	})
	theDate = Math.round(new Date().getTime()/1000.0); //UNIX Timestamp
	sliderTimer = setTimeout('updateSlider();',15000);
}

function updateSliderContent(json) {
	var screen_order = json.screen_order.split('_');
	
	jQuery('div#slider img.slider_busy').remove();
	
	for (var i in json) {
		if (json[i].action == 'remove') {
			jQuery('div#slider td[abbr="'+i+'"]').fadeOut('slow',function(){
				jQuery(this).remove();
			});
		};
	};
	
	for (var i=0;i<screen_order.length;i++) {
		var screen_id = screen_order[i];
		var n = i;
		if (json[screen_id].action == 'add') {
			if (n < jQuery('div#slider td').size()-1){
				jQuery('div#slider td').eq(n).before(
					'<td id="new" abbr="'+screen_id+'" style="display: none;">'+
						'<div class="slider_screen" title="">' +
							json[screen_id].html+
						'</div>' +
					'</td>'
				);
			} else {
				jQuery('div#slider td').eq(n-1).after(
					'<td id="new" abbr="'+screen_id+'" style="display: none;">'+
						'<div class="slider_screen" title="">' +
							json[screen_id].html+
						'</div>' +
					'</td>'
				);
			}
			jQuery('div#slider td#new').fadeIn('slow');
		} else {
			if (json[screen_id].action == 'update') {
				jQuery('div#slider td[abbr="'+screen_id+'"] div').empty().append(json[screen_id].html);
			}
			var screenIdAtPosition = jQuery('div#slider td').eq(i).attr('abbr');
			if (screen_id != screenIdAtPosition) {
				var temp = jQuery('div#slider td[abbr="'+screen_id+'"]').clone();
				jQuery('div#slider td[abbr="'+screen_id+'"]').remove();
				temp.insertBefore('div#slider td[abbr="'+screenIdAtPosition+'"]');
			}
			if (json[screen_id].free == 'busy') {
				jQuery('div#slider td[abbr="'+screen_id+'"]').addClass('busy');
				jQuery('div#slider td[abbr="'+screen_id+'"]>div.slider_screen').animate({
					borderTopColor: '#FF0000',
					borderLeftColor: '#FF0000',
					borderBottomColor: '#FF0000',
					borderRightColor: '#FF0000'
				});
			} else if (jQuery('div#slider td[abbr="'+screen_id+'"]').hasClass('busy')) {
				jQuery('div#slider td[abbr="'+screen_id+'"]').removeClass('busy');
				jQuery('div#slider td[abbr="'+screen_id+'"]>div.slider_screen').animate({
					borderTopColor: 'black',
					borderLeftColor: 'black',
					borderBottomColor: 'black',
					borderRightColor: 'black'
				});
			}
		};
	};
	remapSlider();
	jQuery('span#total_screens').text(screen_order.length);
}

function updateSliderPosition(id) {
	id--;

	jQuery('div#slider div.slider_screen').removeClass('selected').css({
		'opacity':0.5,
		'background-color': 'transparent'
	});
	jQuery('div#slider div.slider_screen').eq(id).addClass('selected').css({
		'opacity':1,
		'background-color': 'black'
	});
	var position = jQuery('div#slider td').eq(id).position();
	if (position != undefined) {
		var middle = jQuery('div#slider').width()/2-jQuery('div#slider td').eq(id).width()/2;
		var offset = position.left-middle
		jQuery('div#slider').animate({
			scrollLeft: '+='+offset
		});
	};
}

function update_tab_bot() {
	var ajaxData = {
		sid: sid,
		projectid: story,
		screen_id: screen_id,
		mode: 'load_bots',
		ajax_retry: 'update_tab_bot()'
	};
	updateCounter('updateTabBot','start',langUpdateTabBotRequest);
	jQuery.ajax({
		dataType: 'json',
		data: ajaxData,
		success: function(json) {
			updateCounter('updateTabBot','success',langUpdateTabBotSuccess);
			jQuery('ul#availableBots').empty();
			jQuery(json).each(function(){
				jQuery('ul#availableBots').append('<li class="bot rightmenu">' + this.html + '</li>');
			});
			initDragDropRightMenuItem('ul#availableBots');
		},
		error: function() {
			updateCounter('updateTabBot','error',langUpdateTabBotError,ajaxData);
		}
	});
}

function update_tab_cloud() {
	var ajaxData = {
		sid: sid,
		projectid: story,
		screen_id: screen_id,
		mode: 'load_clouds',
		ajax_retry: 'update_tab_cloud()'
	}
	updateCounter('updateTabCloud','start',langUpdateTabCloudRequest);
	jQuery.ajax({
		dataType: 'json',
		data: ajaxData,
		success: function(json) {
			updateCounter('updateTabCloud','success',langUpdateTabCloudSuccess);
			jQuery('ul#availableClouds').empty();
			jQuery(json).each(function(){
				jQuery('ul#availableClouds').append('<li class="cloud rightmenu">' + this.html + '</li>');
			});
			jQuery('ul#availableClouds li.cloud').children('div').css({
				'position': 'relative'
			});
			initDragDropRightMenuItem('ul#availableClouds');
		},
		error: function() {
			updateCounter('updateTabCloud','error',langUpdateTabCloudError,ajaxData);
		}
	});
}

function update_tab_record() {
	var ajaxData = {
		sid: sid,
		projectid: story,
		screen_id: screen_id,
		mode: 'list_records',
		ajax_retry: 'update_tab_record'
	}
	updateCounter('updateTabRecord','start',langUpdateTabRecordRequest);
	jQuery.ajax({
		url: '/cgi-bin/apps/ajax/Storyboard',
		type: 'POST',
		dataType: 'json',
		data: ajaxData,
		success: function(json) {
			updateCounter('updateTabRecord','success',langUpdateTabRecordSuccess);
			jQuery('ul#availableRecords').empty();
			jQuery(json).each(function(){
				jQuery('ul#availableRecords').append('<li id="' + this.id + '" class="record rightmenu">' + 'Record ' + this.id + '</li>');
			});
			jQuery('ul#availableRecords li').hover(function(){
				var id = this.id;
				objectHoverIn('div#record_' + id);
			},
			function() {
				var id = this.id;
				objectHoverOut('div#record_' + id);
			})

			jQuery('ul#availableRecords').sortable({
				axis: 'y',
				update: function(event, ui) {
					saveScreen();
					reloadPlaylist();
				}
			});
			reloadPlaylist();
			if (slideshow && autoRedirect!="") {
				soundrecorderOnStopAll = function nextscreen() {
					window.location = autoRedirect;
				};
				player.playall();
			} else if (autoRedirect != '') {
				windowrefresh = setTimeout("window.location = '"+autoRedirect+"';",10000);
			}
		},
		error: function() {
			updateCounter('updateTabRecord','error',langUpdateTabRecordError,ajaxData);
		}
	});
}

function update_tab_speech() {
	//I have no Job :(
}

function update_tabs(pSwitch) {
	if (pSwitch.match(/c/)) { //c for cloud
		update_tab_cloud();
	}
	if (pSwitch.match(/b/)) { //b for bot
		update_tab_bot();
	}
	if (pSwitch.match(/r/)) { //r for record
		update_tab_record();
	}
	if (pSwitch.match(/s/)) { //s for speech
		update_tab_speech();
	}
}

function updateRecords(){
	var i = 1
	var temp = new Object();
	jQuery('div#rightmenu ul#availableRecords li').each(function() {
		var id = this.id;
		jQuery()
		temp[i] = Storyboard['record'][id];
		i++;
	})
	i = 1
	Storyboard['record'] = temp;
}