var myFx_panorama;
var panorama_on_header = false;

window.addEvent( 'domready', function() {
	expandToWindowSize();
	initPanorama();
});

function initPanorama() {

	if( $("panorama_box") ) {
	
		// fix the width of the panorama_container
		var container_width = $("panorama_container").getFirst("img.panorama").getSize().x;
		
		$("panorama_container").setStyle( 'width', container_width*2 );
	
		var el = new Element( "div", {
			"class": "panorama_controls"
		});
		
		var el_back = new Element( "div", {
			"class": "panorama_back",
			html: "<<"
		});
		
		var el_stop = new Element( "div", {
			"class": "panorama_stop",
			html: "X"
		});
		
		var el_front = new Element( "div", {
			"class": "panorama_front",
			html: ">>"
		});
		
		var el_clear = new Element( "div", {
			"style": "clear:both"
		});
		
		el_back.inject( el );
		el_stop.inject( el );
		el_front.inject( el );
		el_clear.inject( el );
		
		el.inject( $("panorama_container"), 'after' );
		
		el_stop.addEvent('click', function() {		
			myFx_panorama.pause();
		});
		
		el_back.addEvent('mousedown', function() {
			
			myFx_panorama.pause();
		
			var newFx = new Fx.Tween( "panorama_container", {duration: "normal"} );
			newFx.start( 'margin-left', $("panorama_container").getStyle( 'margin-left' ), ($("panorama_container").getStyle( 'margin-left' ).toInt()+50)+"px" );
		});
		
		el_front.addEvent('click', function() {
			myFx_panorama.set( 'margin-left', $("panorama_container").getStyle( 'margin-left' ) );
			myFx_panorama.resume();
		});
	}
	
	if( $("panorama_head_box") ) {
	
		// fix the width of the panorama_container
		var container_width = $("panorama_head_container").getFirst("img.panorama").getSize().x;
		
		$("panorama_head_container").setStyle( 'width', container_width*2 );
	
		var el = new Element( "div", {
			"class": "panorama_controls"
		});
		
		var el_back = new Element( "div", {
			"class": "panorama_back",
			html: "<<"
		});
		
		var el_stop = new Element( "div", {
			"class": "panorama_stop",
			html: "X"
		});
		
		var el_front = new Element( "div", {
			"class": "panorama_front",
			html: ">>"
		});
		
		var el_clear = new Element( "div", {
			"style": "clear:both"
		});
		
		el_back.inject( el );
		el_stop.inject( el );
		el_front.inject( el );
		el_clear.inject( el );
		
		el.inject( $("panorama_head_container"), 'after' );
		
		el_stop.addEvent('click', function() {		
			myFx_panorama.pause();
		});
		
		el_back.addEvent('mousedown', function() {
			
			myFx_panorama.pause();
		
			var newFx = new Fx.Tween( "panorama_head_container", {duration: "normal"} );
			newFx.start( 'margin-left', $("panorama_head_container").getStyle( 'margin-left' ), ($("panorama_head_container").getStyle( 'margin-left' ).toInt()+50)+"px" );
		});
		
		el_front.addEvent('click', function() {
			myFx_panorama.set( 'margin-left', $("panorama_head_container").getStyle( 'margin-left' ) );
			myFx_panorama.resume();
		});
	}
	
	panorama();
}

function open360(target) {
		
	var targets = new Array();
	targets['cassiopeia'] = '144_1293458670_RHCmj';
	targets['perseus'] = '144_1293619152_nont1';
	targets['pegasus'] = '144_1293619160_4BAVE';
	targets['athena'] = '144_1293619170_lJUrt';
	targets['cepheus'] = '144_1293619178_DgBBl';
	
	var panorama = '<div id="panorama_head_box">'+
		'<div id="panorama_head_container">'+
		'<img class="panorama" src="http://imgsrv.themechef.com//files/'+targets[target]+'.jpg" alt="" width="1275" height="290" />'+
		'<img class="panorama" src="http://imgsrv.themechef.com//files/'+targets[target]+'.jpg" alt="" width="1275" height="290" />'+
		'</div>';
	
	$('headerimage-swap').set('html', panorama );
	
	panorama_on_header = true;
}

function expandToWindowSize() {
	//if( $("wrapper-out").offsetHeight < window.innerHeight ){
	//	$("content-main").setStyle('min-height', (window.innerHeight-132-$("header").offsetHeight) + "px" );
	//}
}

function loadSlideshow(args, time) { 

	// preload images for slideshow
	for(var i = 0; i < args.length; i++ ) {
		var elem = new Element('img', { 'src': args[i] } );
	}
	
	var lastnumber = 1;
	
	var backimage = "url(" + args[Math.floor((Math.random()*(args.length-1))+1)] + ")";
	
	$("headerimage-swap").setStyle('background', backimage );
	$("header").setStyle('background', backimage );
	//$("headerimage-swap").setStyle('background', "url(" + args[lastnumber] + ") no-repeat center bottom");
	
	var args_length = args.length;
	var args_arr = args;
	
	var timerFunction = function() {
	
		if( panorama_on_header ) return;
	
		var randomnumber = Math.floor((Math.random()*(args_length-1))+1);
		do {
			randomnumber = Math.floor((Math.random()*(args_length-1))+1);
			if ( randomnumber === 0 ) randomnumber++;
		} while( lastnumber === randomnumber );
		
		lastnumber = randomnumber;
	
		//if( lastnumber < args_length-1 )
		//	lastnumber++;
		//else lastnumber = 1;
		
		$("header").setStyle('background', $("headerimage-swap").getStyle('background') );
		
		var myFx = new Fx.Tween( $('headerimage-swap'), {duration: 200});
		var myFx2 = new Fx.Tween( $('headerimage-swap'), {duration: 600});
		
		myFx.addEvent('complete', function() {
			$("headerimage-swap").setStyle('background', "url(" + args_arr[lastnumber] + ")");
			myFx2.start( 'opacity', 0.0, 1 );
		});
		
		myFx.start( 'opacity', 1, 0.0 );
		
	}
	
	timerFunction.periodical(time*1000);
}

function panorama() {

	// get current panorama
	if( $("panorama_box") ) {
	
		// fix the width of the panorama_container
		var container_width = $("panorama_container").getFirst("img.panorama").getSize().x;
	
		// panorama exists, start spin
		myFx_panorama = new Fx.Tween( $("panorama_container"), {duration: 20000, transition: "linear" } );
		
		myFx_panorama.addEvent('complete', function() {
			panorama();
		});
		
		myFx_panorama.start('margin-left', "0px", (container_width*-1)+"px" );
	}
	
	if( $("panorama_head_box") ) {
	
		// fix the width of the panorama_container
		var container_width = $("panorama_head_container").getFirst("img.panorama").getSize().x;
	
		// panorama exists, start spin
		myFx_panorama = new Fx.Tween( $("panorama_head_container"), {duration: 20000, transition: "linear" } );
		
		myFx_panorama.addEvent('complete', function() {
			panorama();
		});
		
		myFx_panorama.start('margin-left', "0px", (container_width*-1)+"px" );
	}
	
	return;
	
}