$(document).ready(function(){
	
	$('#gallery a').lightBox();

	var defaultOpen = 1;
	$("#news"+defaultOpen).css("display","block");
	$("#link"+defaultOpen).css("border-top","3px solid #FFF");

    $(".newslinks").click(function () {
		var tempid = $(this).attr("title");
			$("#link"+defaultOpen).css("border-top","none");

		$("#news"+defaultOpen).css("display","none");
		$("#news"+tempid).css("display","block");
		$("#link"+tempid).css("border-top","3px solid #FFF");
		defaultOpen = tempid;
    });
	 
	 var randomImage = Math.floor(Math.random()*13);
     var image = "<img src='images/"+randomImage+".jpg' alt='banner' class='noborder'/>";
     $("#banner").html(image);
	
	$('#sections').load('panes.html');
	
	$('#screen').serialScroll({
		target:'#sections',
		items:'li', 
		prev:'a.prev',
		next:'a.next',
		duration:500,
		interval:3000,
		cycle:false,
		force:true,
		lazy:true,
		onBefore:function( e, elem, $pane, $items, pos ){
			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			 //those arguments with a $ are jqueryfied, elem isn't.
			e.preventDefault();
			if( this.blur )
				this.blur();
		},
		onAfter:function( elem ){
			//'this' is the element being scrolled ($pane) not jqueryfied
		}
	});
	
		$('#bscreen').serialScroll({
		target:'#bsections',
		items:'li', 
		prev:'a.bprev',
		next:'a.bnext',
		duration:1000,
		force:true,
		lazy:true,
		onBefore:function( e, elem, $pane, $items, pos ){
			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			 //those arguments with a $ are jqueryfied, elem isn't.
			e.preventDefault();
			if( this.blur )
				this.blur();
		},
		onAfter:function( elem ){
			//'this' is the element being scrolled ($pane) not jqueryfied
		}
	});
	

		$('a.stop').toggle(function(){
		$('#sections').trigger('stop');
		$(this).html("Start");
	},function(){
		$('#sections').trigger('start');
		$(this).html("Stop");

	});
	
});