$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });
	
				// Tabs
				$('#tabs').tabs();
				
				// Body Tabs
				$('#bodytabs').tabs();
	

				// Dialog			
				//$('#dialog').dialog({
				//	autoOpen: false,
				//	width: 600,
				//	buttons: {
				//		"Ok": function() { 
				//			$(this).dialog("close"); 
				//		}, 
				//		"Cancel": function() { 
				//			$(this).dialog("close"); 
				//		} 
				//	}
				//});
				
				// Dialog Link
				//$('#dialog_link').click(function(){
				//	$('#dialog').dialog('open');
				//	return false;
				//});

				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				//$('#dialog_link, ul#icons li').hover(
				//	function() { $(this).addClass('ui-state-hover'); }, 
				//	function() { $(this).removeClass('ui-state-hover'); }
				//);
				
			});
			
			
function theRotator() {
	//Set the opacity of all images to 0
	//('div#comingsoon ul li').css({opacity: 0.0});
	$('div#rotator ul li').css({opacity: 0.0});
	$('div#rotator2 ul li').css({opacity: 0.0});
	$('div#rotator3 ul li').css({opacity: 0.0});
	
	$('div#headerMedia ul li').css({opacity: 0.0});
	
	
	//Get the first image and display it (gets set to full opacity)
	//$('div#comingsoon ul li:first').css({opacity: 1.0});
	$('div#rotator ul li:first').css({opacity: 1.0});
	$('div#rotator2 ul li:first').css({opacity: 1.0});
	$('div#rotator3 ul li:first').css({opacity: 1.0});
	
	$('div#headerSlide ul li:first').css({opacity: 1.0});
	
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	//setInterval('comingsoon()', 6000);
	setInterval('rotate()',6000);
	setInterval('rotate2()',6000);
	setInterval('rotate3()',6000);
	
	setInterval('rotateHeader()',4000);
	
}


function comingsoon() {	
	//Get the first image
	var current = ($('div#comingsoon ul li.show')?  $('div#comingsoon ul li.show') : $('div#comingsoon ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#comingsoon ul li:first') :current.next()) : $('div#comingsoon ul li:first'));
		
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};


function rotate() {	
	//Get the first image
	var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
		
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};

function rotate2() {	
	//Get the first image
	var current = ($('div#rotator2 ul li.show')?  $('div#rotator2 ul li.show') : $('div#rotator2 ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator2 ul li:first') :current.next()) : $('div#rotator2 ul li:first'));
		
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};

function rotate3() {	
	//Get the first image
	var current = ($('div#rotator3 ul li.show')?  $('div#rotator3 ul li.show') : $('div#rotator3 ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator3 ul li:first') :current.next()) : $('div#rotator3 ul li:first'));
		
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};


function rotateHeader() {	
	//Get the first image
	var current = ($('div#headerSlide ul li.show')?  $('div#headerSlide ul li.show') : $('div#headerSlide ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#headerSlide ul li:first') :current.next()) : $('div#headerSlide ul li:first'));
		
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};




$(document).ready(function() {		
	//Load the slideshow
	theRotator();
	
<!-- 	$("#dialog").dialog({ resizable: false; width: 400; height: 332; draggable: true; position:'center'; });  -->
	
	$('#dialog').dialog({
					resizable: true,
					draggable: true,
					autoOpen: true,
					width: 440,
					height: 605,
					position:'center'

				});
				
				
		$('#dialog2').dialog({
					resizable: true,
					draggable: true,
					autoOpen: true,
					width: 440,
					height: 605,
					position:'center'

				});
				

	});