var menuActive = 'none';
var layerActive = 'none';
var appearTime = 1;
var onColor = '#990000';
var offColor = '#F3EEDD';
function myImageSwitch() {
	document.panoImg2.src = pano2.src;
	myImageFade();
}
function myImageFadeFinished() {
	var img1 = $('panoLayer1');
	var img2 = $('panoLayer2');
	Element.hide('panoLayer1');
	img2.style.opacity = 1;
}
function myImageFade() {
	var img1 = $('panoLayer1');
	var img2 = $('panoLayer2');
	img1.style.display = 'block';
	img2.style.display = 'none';
	new Effect.Appear(img2,	{
			duration: 5.0,
			fps: 8,
			queue: {
				position: 'end',
				scope: 'imagefade',
				limit: 1
			},
			afterFinish:function(){
				myImageFadeFinished();
			}
	});
}
function myMenuIndicatorOn(menuItem) {
	var itemId = $(menuItem).readAttribute('id');
	var highlight = $('o' + itemId);
	menuActive = itemId;
	if(Object.isElement(highlight)) {
		new Effect.Opacity(highlight, {
				duration: appearTime,
				from: 0.0,
				to: 1.0,
				queue: {
					position: 'end',
					scope: highlight.readAttribute('id'),
					limit: 1
				}
		});
		new Effect.Opacity(highlight, {
				duration: appearTime,
				from: 1.0,
				to: 0.0,
				queue: {
					position: 'end',
					scope: highlight.readAttribute('id'),
					limit: 2
				}
		});
	}
}
function myMenuIndicatorOff(menuItem) {
	var itemId = $(menuItem).readAttribute('id');
	var highlight = $('o' + itemId);
	menuActive = itemId;
	if(Object.isElement(highlight)) {
		new Effect.Highlight(highlight, {
				duration: appearTime,
				startcolor:onColor,
				endcolor:offColor,
				restorecolor: offColor,
				queue: {
					position: 'end',
					scope: highlight.id,
					limit: 3
				}
		});
	}
}
function myIFrameLayerShow() {
	var IFrameLayerVar = $('IFrameLayer');
	IFrameLayerVar.style.display = 'block';
}
function myIFrameLayerHide() {
	var IFrameLayerVar = $('IFrameLayer');
	IFrameLayerVar.style.display = 'none';
}
function prepareImageSlide() {
	var pan1 = $('panoLayer1');
	var pan2 = $('panoLayer2');
	var headCont = $('headerContainer');
	var slideCont = new Element('div', {
		'id': 'myImageFadeContainer'
	});
	headCont.insert(slideCont);
	pan1.hide();
	pan2.hide();
	//slideCont.insert(pan1);
	//slideCont.insert(pan2);
}
var pano2 = new Image();
pano2.src = "composite.jpg";