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);
		});
	}
	
	$('.boardroom-bullets').click(function() {
		var bd = $('<div></div>');
		var bg = $("<div></div>")
		function hideFunc() {
			bd.fadeOut(400, function() { $(this).remove(); });
			bg.fadeOut(400, function() { $(this).remove(); });
		}

		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 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);
		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();
		});
		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%'}));

		$('body').append(bg);
		$('#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);

	});
});