jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}

$.preloadImages('/images/boardroom.png', '/images/matrix-close.png', '/images/matrix-close-hover.png');

$(document).ready(function() {
	
	var greyOpacity = 0.6;			// Opacity for greying out the page
	var scrollSpeed = 5000;
	//---------------------------------
	
	/*$.fn.cycle.transitions.myfade = function($cont, $slides, opts) { 
	    var $el = $($slides[0]); 
	    var w = $el.width();
	    var h = $el.height();
	    opts.cssBefore = { position: 'absolute', top: $el.parent().parent().height() / 2 - h / 2, left: $el.parent().width() / 2 - w / 2, zIndex: 1, opacity: 0 }; 
	    opts.animIn    = { width: w, height: h, opacity: 0.8, top: $el.parent().parent().height() / 2 - h / 2, left: $el.parent().width() / 2 - w / 2}; 
	    opts.animOut   = { width: w, height: h, opacity: 0, top: $el.parent().parent().height() / 2 - h / 2, left: $el.parent().width() / 2 - w / 2 }; 
	    opts.cssAfter  = { position: 'absolute', top: $el.parent().parent().height() / 2 - h / 2, left: $el.parent().width() / 2 - w / 2, zIndex: 1, opacity: 0 }; 
	};*/
	
	$.fn.cycle.transitions.myfade = function($cont, $slides, opts) {
		$slides.not(':eq('+opts.startingSlide+')').css('opacity',0);
		opts.before.push(function() { $(this).show() });
		opts.animIn	   = { opacity: 0.8 };
		opts.animOut   = { opacity: 0 };
		opts.cssBefore = { opacity: 0 };
		opts.cssAfter  = { display: 'none' };
		opts.onAddSlide = function($s) { $s.hide(); };
	};
	
	function addSlideshow() {
		var bd = $('#boardroom');
		$('#boardroom div.pageContent').append(
			$('.boardroom-bullets .boardroom-page').clone().css({ position: 'absolute', top: bd.height() / 2 - 96, left: bd.width() / 2 - 146, zIndex: 1, opacity: 0.75 })
		);
		$('#boardroom div.pageContent').append($('<div class="boardroom-page" id="restarter"><div><a href="#">Restart Slideshow</a></div></div>').css({ position: 'absolute', top: bd.height() / 2 - 96, left: bd.width() / 2 - 146, zIndex: 1, opacity: 0.75 }));
		$('#boardroom .boardroom-page').eq(0).find('*').css('display', 'none');
		$('#boardroom .boardroom-page').eq(0).fadeIn(400, function() {
			$('#boardroom .boardroom-page').eq(0).find('*').fadeIn(400);
			setTimeout(function() {
				$('#boardroom div.boardroom-controls').fadeIn(400);
				var tcycle = $('#boardroom div.pageContent').cycle({ 
		        	fx:     'myfade',
					sync: 	false,
		        	timeout: scrollSpeed,
					customPositioning: true,
					autostop: 1,
					pager: '#boardroom .boardroom-page-links',
				    pagerAnchorBuilder: function(idx, slide) { 
						if (idx == $('#boardroom .boardroom-page').length - 1) return false;	// Hide the last link ("restart slideshow")
				        return '<a href="#">' + (idx + 1) + '</a>';
				    },
					timeoutFn: function(currElement, nextElement, opts, isForward) { 
						// If element has class timeout=x then we use that timeout for this slide
						// otherwise we juse use the default.
					    var rel = $(nextElement).attr('class');
						if (!rel) return scrollSpeed;
						rel = rel.split(' ');
						var timeout = scrollSpeed;
						$.each(rel, function() {
							var kvp = this.split('=');
							if (kvp[0] == 'timeout') {
								timeout = parseFloat(kvp[1]) * 1000;
							}
						});
						return timeout;
					},
					before: function() {
						// find out if thie slide contains rel after=x
						// in which case hide it and start a timeout to display it.
						
						// find elements with a rel attribute containing after just to filter it down a bit first, so we dont have to go through every element
						$(this).find('[class*=after]').each(function() {
							var el = $(this);
							var rel = $(this).attr('class').split(' ');
							$.each(rel, function() {
								var kvp = this.split('=');
								if (kvp[0] == 'after') {
									el.hide();
									setTimeout(function() {
										el.fadeIn(400);
									}, parseFloat(kvp[1]) * 1000);
								}
							});
						});
					}
		    	});
				$('#restarter a').click(function(e) {
					$('#boardroom .boardroom-controls a').attr('pause_state', 'pause');
/*					$('#boardroom div.pageContent .boardroom-page').fadeOut(400);
					$('#boardroom div.boardroom-page-links *').fadeOut(300, function() { $(this).remove(); });
					setTimeout(function() {
						$('#boardroom div.pageContent .boardroom-page').remove();
						addSlideshow();
					}, 400);*/
					$('#boardroom div.pageContent').cycle(0);
					e.preventDefault();
				});
			}, 400);
		});
	}
	
	function loadBoardroom(f) {
		var ld = $('<img src="/images/loading.gif" />').css({ border: '10px solid #fff', position: 'absolute', 'top': $(window).height() / 2 -  10 + $(window).scrollTop(), 'left': $(window).width() / 2 - 110, 'z-index': 9001});
		$('body').append(ld);
		$('<img />').load(function() { ld.fadeOut(400, function() { $(this).remove(); }); f(); }).attr('src', "/images/boardroom.png");
	}
	
	$('.boardroom-bullets').click(function() {
		var bg = $("<div></div>")
		var bd = $('<div></div>');
		function hideFunc() {
			bd.fadeOut(400, function() { $(this).remove(); });
			bg.fadeOut(400, function() { $(this).remove(); });
		}
		bg.attr('id', 'back').css({'z-index': 9000, 'background': '#000', 'opacity': greyOpacity, 'position': 'absolute', 'top': '0px', 'left': '0px', 'width': $(document).width(), 'height': $(document).height()});
		bg.click(function() {
			hideFunc();
		});
		$('body').append(bg);
		loadBoardroom(function() {

			bd.css({
				'z-index': 10000,
				'background': 'url(/images/boardroom.png)',
				'display': 'none',
				'position': 'absolute',
				'top': $(window).height() / 2 - 238 + $(window).scrollTop(),
				'left': $(window).width() / 2 - 333,
				'width': '666px',
				'height': '476px'
			});
			bd.attr('id', 'boardroom');
			bd.append($('<div></div>').css('position', 'relative').addClass('pageContent'));
			var copy_to_clipboard = $('<a href="#" class="copy-slides">Copy slides to clipboard</a>').css({'position': 'absolute', 'bottom': 10, 'left': 14});
			$.clipboardReady(function(){
				copy_to_clipboard.click(function(){
					$.clipboard( $('#boardroom div.pageContent').html().replace(/<(.*?)>/g, "\r\n").replace(/(\r\n)+/g, "\r\n\r\n"));
					return false;
				});
			}, { swfpath: "/jquery.clipboard.swf" } );
			bd.append(copy_to_clipboard);
			var close = $('<img src="/images/matrix-close.png" />').css({'position': 'absolute', 'bottom': 8, 'right': 16, 'cursor': 'pointer'});
			bd.append(close);
			close.hover(function() {
				$(this).attr('src', '/images/matrix-close-hover.png');
			}, function() {
				$(this).attr('src', '/images/matrix-close.png');
			}).click(hideFunc);
			$('body').append(bd);
			bd.fadeIn(800);

			var controls_div = $('<div class="boardroom-controls"></div>');
			controls_div.append('<a href=""></a>');
			controls_div.find('a').click(function(e) {
				var $this = $(this);
				var s = "";
				if (!$this.attr('pause_state') || $this.attr('pause_state') == 'pause') {
					// pause the slideshow and switch ourself to play mode
					$('#boardroom .pageContent').cycle('pause');
					s = 'play';
					$this.addClass('play');
				}
				else {
					// resume the slideshow and switch ourself to pause mode
					$('#boardroom .pageContent').cycle('resume');				
					s = 'pause';
					$this.removeClass('play');
				}
				$this.attr('pause_state', s);
	//			$this.text(s.substr(0, 1).toUpperCase() + s.substr(1));
			
				e.preventDefault();
			});
			$('#boardroom').append(controls_div.css({'position': 'absolute', 'bottom': '72px', 'text-align': 'center', 'width': '100%'}));
			var page_div = $('<div class="boardroom-page-links"></div>');
			$('#boardroom').append(page_div.css({'position': 'absolute', 'bottom': '48px', 'text-align': 'center', 'width': '100%'}));


			$('#boardroom').append($("<div></div>").css({'position': 'absolute', 'top': '32px'}).addClass('title'));
			var title = $('.sub-menu ul li.selected').text().replace(/^\s*/, '').replace(/\s*$/, '');
			$('#boardroom .title').append($("<span>" + title + ": Boardroom Bullet-points</span>"));
			$('#boardroom .title').css({'left': bd.width() / 2 - $('#boardroom .title').width() / 2});
		
			setTimeout(addSlideshow, 1000);

		});
	});
});