jQuery(document).ready(function(){
	//Events
	if (story != undefined) {
		jQuery('button#delete_screen_now').live('click',function() {
			delete_screen(this.value);
			remove_deleteScreenConfirm();
		});
		
		jQuery('button#delete_screen_cancel').live('click',function() {
			remove_deleteScreenConfirm();
		});
		
		jQuery('img#copy_screen').live('click',function() {
			var page = jQuery(this).parent('div').attr('id');
			page = page.split('_');
			page = page[1];
			copyScreen(page);
		})
	}
})

function add_screen() {
	dataArray = {
		sid: sid,
		projectid: story,
		mode: 'ajax_add_screen',
		ajax_retry: 'add_screen();'
	}
	jQuery.ajax({
		async: false,
		data: dataArray,
		success: function() {
			draw_expose();
			max_screens++;
		}
	})
}

function copyScreen(page) {
	var ajaxData = {
		sid: sid,
		projectid: story,
		mode: 'ajax_copy_screen',
		screen: page
	};
	jQuery.ajax({
		data: ajaxData,
		success: function() {
			draw_expose();
		}
	});
}

function create_dialog(page) {
	jQuery('body').append(
		'<div id="blur2">' +
		'</div>' +
		'<div id="delete_screen_confirm">' +
			'<div id="delete_screen_title">' +
				'<span>'+langDeleteScreen+'</span>' +
			'</div>' +
			'<div id="delete_screen_content">' +
				'<p>'+langDeleteScreenText+'</p>' +
				'<div id="delete_screen_content_illustration">' +
					'<img id="screen" src="/osr/icons/kde/crystalclear/64x64/actions/thumbnail.png" alt="This screen">' +
					'<img id="arrow" src="/osr/icons/kde/crystalclear/64x64/actions/next.png" alt="goes to the">' +
					'<img id="trash" src="/osr/icons/kde/storyboard/64x64/trash.png" alt="trash!">' +
				'</div>' +
			'</div>' +
			'<div id="delete_screen_controls">' +
				'<button id="delete_screen_now" value="'+page+'">'+langDelete+'</button>' +
				'<button id="delete_screen_cancel">'+langCancel+'</button>' +
			'</div>' +
		'</div>'
	);
}

function start_expose(story) {
	jQuery('div#recordGenerator').hide();
	jQuery('body').append('<div id="blur"></div>');
	jQuery('body').append('<div id="expose"><ul id="expose_screens"></ul></div>');
	jQuery('body').append(
		'<div id="expose_controls" class="ui-corner-all">' +
			'<div class="black-background ui-corner-all">' +
			'</div>' +
			'<div class="content">' +
				'<span id="add_screen">' + langAddScreen + '</span> | <span id="exit_expose">' + langBack + '</span>' +
			'</div>' +
		'</div>'
	);
	draw_expose();
	jQuery('div#expose_controls span#exit_expose').unbind().click(function() {
		end_expose();
	});
	
	jQuery('div#expose_controls span#add_screen').unbind().click(function() {
		add_screen();
	})
	
	jQuery(window).unbind().resize(function() {
		jQuery('div#expose ul#expose_screens').unbind().empty();
		jQuery(window).bind('mouseenter',function() {
			draw_expose();
			jQuery(window).unbind('mouseenter');
		})
	})
	
	jQuery('div#expose img#remove_screen').die().live('click', function() {
		var page = jQuery(this).parent('div').attr('id');
		page = page.split('_');
		page = page[1];
		create_dialog(page);
		//delete_screen(page);
	})
	
	jQuery('div#expose span.screen_name').die().live('click', function() {
		var text = jQuery(this).text();
		var caller = this;
		jQuery(this).after('<input style="background-color: black; border: none; height:13px; padding-top:0px;color:white;" type="text" value="'+text+'"></input>').hide();
		jQuery('div#expose input').keypress(function(e) {
			if (e.which == 13) {
				var page = jQuery(caller).parents('li').attr('id');
				rename_screen(this, page);
		 	}
		});
	});
	
	jQuery('div#expose ul#expose_screens li').die().live('dblclick', function() {
		jQuery(this).hide('puff', function() {
			var id = jQuery('div#expose ul#expose_screens li').index(this) + 1;
			end_expose(id);
		})
	});
}

function delete_screen(page) {
	var dataArray = {
		sid: sid,
		projectid: story,
		page: page,
		mode: 'ajax_delete_screen',
		ajax_retry: 'delete_screen('+page+');'
	}
	jQuery.ajax({
		async: false,
		data: dataArray,
		success: function(){
			max_screens--;
			draw_expose();
		}
	})
}

function end_expose(screen) {
	jQuery('div#recordGenerator').show();
	if (typeof(screen) == 'undefined') {
		screen = 1;
	}
	jQuery('div#blur, div#expose, div#expose_controls').unbind().die().fadeOut(function() {
		jQuery(this).remove();
	});
	jQuery('div#expose img#remove_screen').die();
	jQuery('span#total_screens').text(max_screens);
	jQuery('input[name="screen"]').val(1);
	screenTransition(screen); //needs storyboard.js
	handleArrows(); //needs storyboard.js
	clearTimeout(expose_lock_timer);
}

function expose_create(width, height) {
	var data = expose_requestPage(width, height);
	var busy = data.busy;
	data = data.screens;
	if (typeof(data) != 'object') {
		return 0;
	}
	
	var screen = 1;
	while (data[screen]) {
		jQuery('div#expose ul').append(data[screen]);
		screen++;
	};
	jQuery('div#blur, div#expose, div#expose_controls').fadeIn();
	
	if (busy == 'free') {
		expose_dragDrop();
		expose_lock();
	}
	
	var screenWidth = jQuery('div#expose li').width();
	var screenHeight = jQuery('div#expose li').height();
	
	jQuery('head').append('<style title="dynamic" type="text/css">ul#expose_screens li {width:'+screenWidth+'px;height:'+screenHeight+'px; float: left;}</style>');
}

function expose_dragDrop() {
	jQuery('ul#expose_screens li').children('div.screen').unbind().hover(
		function() {
			jQuery(this).find('img:first').css({
				'outline': '4px solid #2462E4'
			});
			if (max_screens > 1) {
		 		jQuery(this).append(
		 			'<img title="'+langExposeDeleteScreen+'" id="remove_screen" class="expose_overlay ui-corner-all16" src="/osr/icons/kde/crystalclear/16x16/actions/fileclose.png">'
		 		);
		 	}
			jQuery(this).append(
		 		'<img title="'+langExposeCopyScreen+'" id="copy_screen" class="expose_overlay2 ui-corner-all16" src="/osr/icons/kde/crystalclear/16x16/actions/editcopy.png">'
		 	);
		},
		function() {
			jQuery(this).find('img:first').css({
				'outline': '0px'
			});
			jQuery(this).find('.expose_overlay, .expose_overlay2').unbind().remove();
		}
	)
	
	jQuery('div#expose ul#expose_screens').sortable({
		placeholder: 'dragged_screen',
		tolerance: 'pointer',
		update: function(event, ui) {
			var ordered_list = new Array();
			jQuery('div#expose ul#expose_screens li').each(function(){
				ordered_list.push(this.id);
		 	});
			sort_screen(ordered_list);
		}
	}).disableSelection();
};

function expose_lock() {
	var dataArray = {
		sid: sid,
		projectid: story,
		mode: 'ajax_update_expose_lock',
		ajax_retry: 'expose_lock();'	
	};
	jQuery.ajax({
		data: dataArray,
		success: function() {
			expose_lock_timer = setTimeout('expose_lock();',45000);
		}
	});
}

function expose_requestPage(width, height) {
	var python = 'bla';
	dataArray = {
		sid: sid,
		projectid: story,
		width: width,
		height: height,
		mode: 'ajax_load_screens',
		ajax_retry: 'start_expose('+story+');'
	};
	updateCounter('startExpose','start','Loading...');
	jQuery.ajax({
		async: false,
		data: dataArray,
		dataType: 'json',
		type: 'POST',
		success: function(json) {
			updateCounter('startExpose','success');
			python = json;
		},
		error: function() {
			updateCounter('startExpose','error','Loading failed',dataArray);
			python = 'error';
		}
	});
	return python;
}

function draw_expose() {
	jQuery('div#expose ul#expose_screens').empty();
	var expose_width = window.innerWidth-20;
	var expose_height = window.innerHeight-45;
	/*	
	 * The Internet Explorer Brand (including 8) is the only Brand of Mainstream Browsers
	 *	who does not support window.innerHeight and window.innerWidth... This IE Hack is not
	 *	perfect but... well... Complain to Microsoft!
	 */
	if (jQuery.browser.msie) {
		expose_width = document.body.offsetWidth-20;
		expose_height = document.body.offsetHeight-45;	
	};
	expose_create(expose_width, expose_height);
}

function remove_deleteScreenConfirm() {
	jQuery('div#delete_screen_confirm, div#blur2').unbind().remove();
}

function rename_screen(caller, page){
	var name = jQuery(caller).val();
	var ajaxData = {
		sid: sid,
		projectid: story,
		mode: 'ajax_rename_screen',
		page: page,
		name: name,
		ajax_retry: 'rename_screen('+caller+', '+page+');'
	}
	jQuery.ajax({
		data: ajaxData,
		success: function() {
			jQuery('div#expose li#'+page+' span').text(name);
		},
		complete: function() {
			jQuery('div#expose li#'+page+' span').show();
		}
	})
	jQuery(caller).remove();
}

function sort_screen(ordered_list) {
	var dataArray = {
		sid: sid,
		projectid: story,
		type: 'GET',
		'ordered_list': ordered_list,
		mode: 'ajax_sort_screen',
		ajax_retry: 'sort_screen('+ordered_list+');'
	};
	jQuery.ajax({
		data:dataArray,
		success: function() {
			
		}
	});
}