var alreadyrunflag=0; //flag to indicate whether target function has already been run

if(document.addEventListener)
  document.addEventListener("DOMContentLoaded", function(){alreadyrunflag=1; init()}, false);
else if (document.all && !window.opera){
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
  var contentloadtag=document.getElementById("contentloadtag");
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete"){
      alreadyrunflag=1;
      init();
    }
  }
}

window.onload=function(){
  setTimeout("if (!alreadyrunflag) init()", 0);
}

/* global variables */
var curr_slide;
var slide_width;
var slide_height;
var unfocus_opacity;

var BrowserDetect = {
init: function () {
	this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
	this.version = this.searchVersion(navigator.userAgent)
	  || this.searchVersion(navigator.appVersion)
	  || "an unknown version";
	this.OS = this.searchString(this.dataOS) || "an unknown OS";
      },
searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
		  var dataString = data[i].string;
		  var dataProp = data[i].prop;
		  this.versionSearchString = data[i].versionSearch || data[i].identity;
		  if (dataString) {
		    if (dataString.indexOf(data[i].subString) != -1)
		      return data[i].identity;
		  }
		  else if (dataProp)
		    return data[i].identity;
		}
	      },
searchVersion: function (dataString) {
		 var index = dataString.indexOf(this.versionSearchString);
		 if (index == -1) return;
		 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	       },
dataBrowser: [
	     {
string: navigator.userAgent,
	subString: "Chrome",
	identity: "Chrome"
	     },
	     { 	string: navigator.userAgent,
subString: "OmniWeb",
	   versionSearch: "OmniWeb/",
	   identity: "OmniWeb"
	     },
	     {
string: navigator.vendor,
	subString: "Apple",
	identity: "Safari",
	versionSearch: "Version"
	     },
	     {
prop: window.opera,
      identity: "Opera"
	     },
	     {
string: navigator.vendor,
	subString: "iCab",
	identity: "iCab"
	     },
	     {
string: navigator.vendor,
	subString: "KDE",
	identity: "Konqueror"
	     },
	     {
string: navigator.userAgent,
	subString: "Firefox",
	identity: "Firefox"
	     },
	     {
string: navigator.vendor,
	subString: "Camino",
	identity: "Camino"
	     },
	     {		// for newer Netscapes (6+)
string: navigator.userAgent,
	subString: "Netscape",
	identity: "Netscape"
	     },
	     {
string: navigator.userAgent,
	subString: "MSIE",
	identity: "Explorer",
	versionSearch: "MSIE"
	     },
	     {
string: navigator.userAgent,
	subString: "Gecko",
	identity: "Mozilla",
	versionSearch: "rv"
	     },
	     { 		// for older Netscapes (4-)
string: navigator.userAgent,
	subString: "Mozilla",
	identity: "Netscape",
	versionSearch: "Mozilla"
	     }
      ],
	dataOS : [
	{
string: navigator.platform,
	subString: "Win",
	identity: "Windows"
	},
	{
string: navigator.platform,
	subString: "Mac",
	identity: "Mac"
	},
	{
string: navigator.userAgent,
	subString: "iPhone",
	identity: "iPhone/iPod"
	},
	{
string: navigator.platform,
	subString: "Linux",
	identity: "Linux"
	}
      ]

};

/* IE hacks */
function set_opacity(el, o) {
  if(BrowserDetect.browser == "Explorer" &&
      BrowserDetect.version < 8) {
    el.style.filter="Alpha(opacity="+(o*100)+")";
  } else {
    el.style.opacity = o;
  }
}

function isSlide(el) {
  if(BrowserDetect.browser == "Explorer") {
    if(el.getAttribute('className') == 'slide') return true;
  } else {
    if(el.getAttribute('class') == 'slide') return true;
  }
  return false;
}


/* Slide class */
function Slide(id) {

  this.id = id;
  this.style = document.getElementById(id).style;
  this.style.position = "absolute";
  this.style.marginLeft = (-slide_width/2) + "px";
  this.style.marginTop = (-slide_height/2) + "px";
  this.style.left = "50%";
  this.style.top = "50%";
  this.style.width = slide_width + "px";
  this.style.height = slide_height + "px";
  this.top_slide = undefined;
  this.left_slide = undefined;
  this.bottom_slide = undefined;
  this.right_slide = undefined;

  /* function declarations */ 
  this.addTopNeighbour    = addTopNeighbour;
  this.addLeftNeighbour   = addLeftNeighbour;
  this.addBottomNeighbour = addBottomNeighbour;
  this.addRightNeighbour  = addRightNeighbour;

}

function addTopNeighbour(slide) {
  slide.style.marginTop =  parseInt(this.style.marginTop.replace('px', '')) - slide_height + "px";
  slide.style.marginLeft =  this.style.marginLeft;
  set_opacity(slide, unfocus_opacity);
  this.top_slide = slide;
  slide.bottom_slide = this;
}
function addLeftNeighbour(slide) {
  slide.style.marginTop =  this.style.marginTop;
  slide.style.marginLeft =  parseInt(this.style.marginLeft.replace('px', '')) - slide_width + "px";
  set_opacity(slide, unfocus_opacity);
  this.left_slide = slide;
  slide.right_slide = this;
}
function addBottomNeighbour(slide) {
  slide.style.marginTop =  parseInt(this.style.marginTop.replace('px', '')) + slide_height + "px";
  slide.style.marginLeft =  this.style.marginLeft;
  set_opacity(slide, unfocus_opacity);
  this.bottom_slide = slide;
  slide.top_slide = this;
}
function addRightNeighbour(slide) {
  slide.style.marginTop =  this.style.marginTop;
  slide.style.marginLeft =  parseInt(this.style.marginLeft.replace('px', '')) + slide_width + "px";
  set_opacity(slide, unfocus_opacity);
  this.right_slide = slide;
  slide.left_slide = this;
}
/* End Slide Class */


/* init slide positions */
function init() {

  BrowserDetect.init();

  slide_width = 800;
  slide_height = 600;
  unfocus_opacity = 0.05;

  document.getElementById('move_up').style.opacity = 1;
  document.getElementById('move_left').style.opacity = 1;
  document.getElementById('move_down').style.opacity = 1;
  document.getElementById('move_right').style.opacity = 1;

  curr_slide = new Slide('home');
  var demo = new Slide('demo');
  curr_slide.addTopNeighbour(demo);
  var about = new Slide('about');
  curr_slide.addLeftNeighbour(about);
  var contact = new Slide('contact');
  curr_slide.addBottomNeighbour(contact);

  var dates = new Slide('dates');
  curr_slide.addRightNeighbour(dates);
  var old_dates_2011 = new Slide('old_dates_2011');
  dates.addRightNeighbour(old_dates_2011);
  var old_dates_2010_2 = new Slide('old_dates_2010_2');
  old_dates_2011.addRightNeighbour(old_dates_2010_2);
  var old_dates_2010_1 = new Slide('old_dates_2010_1');
  old_dates_2010_2.addRightNeighbour(old_dates_2010_1);
  var old_dates_2009 = new Slide('old_dates_2009');
  old_dates_2010_1.addRightNeighbour(old_dates_2009);


  var pics_indoor = new Slide('pics_indoor');
  demo.addLeftNeighbour(pics_indoor);
  about.addTopNeighbour(pics_indoor);
  var pics_outdoor = new Slide('pics_outdoor');
  pics_indoor.addLeftNeighbour(pics_outdoor);
  var pics_brazil = new Slide('pics_brazil');
  pics_outdoor.addLeftNeighbour(pics_brazil);
  var program = new Slide('program');
  dates.addTopNeighbour(program);
  demo.addRightNeighbour(program);
  var repertoire_1 = new Slide('repertoire_1');
  program.addTopNeighbour(repertoire_1);
  var repertoire_2 = new Slide('repertoire_2');
  repertoire_1.addRightNeighbour(repertoire_2);
  var repertoire_3 = new Slide('repertoire_3');
  repertoire_2.addRightNeighbour(repertoire_3);
  var biographie_wiebke = new Slide('biographie_wiebke');
  contact.addLeftNeighbour(biographie_wiebke);  
  about.addBottomNeighbour(biographie_wiebke);
  var biographie_christoph = new Slide('biographie_christoph');
  biographie_wiebke.addBottomNeighbour(biographie_christoph);
  var biographie_conny = new Slide('biographie_conny');
  biographie_christoph.addLeftNeighbour(biographie_conny);
  var biographie_michael = new Slide('biographie_michael');
  biographie_christoph.addBottomNeighbour(biographie_michael);
  var biographie_mathias = new Slide('biographie_mathias');
  biographie_michael.addBottomNeighbour(biographie_mathias);
  var critic = new Slide('critic');
  contact.addRightNeighbour(critic);
  dates.addBottomNeighbour(critic);
  var links = new Slide('links');
  critic.addRightNeighbour(links);
  links.addTopNeighbour(old_dates_2011);

  // set labels to 0.5 opacity
  set_opacity(document.getElementById('move_up_img'), 0.5);
  set_opacity(document.getElementById('move_left_img'), 0.5);
  set_opacity(document.getElementById('move_right_img'), 0.5);
  set_opacity(document.getElementById('move_down_img'), 0.5);

}

function update_labels() {
  /* top */
  if(curr_slide.top_slide == undefined) {
    if(document.getElementById('move_up').style.opacity != 0)
      new Fx.Tween('move_up').start('opacity', 1, 0);
  } else {
    new Fx.Tween('move_up').start('opacity', 0, 1);
    document.getElementById('move_up').getElementsByTagName('img')[0].src = 'images/slide_labels/'+curr_slide.top_slide.id+'.png';
    document.getElementById('move_up').getElementsByTagName('img')[0].alt = curr_slide.top_slide.id+'.png';
  }
  /* left */
  if(curr_slide.left_slide == undefined) {
    if(document.getElementById('move_left').style.opacity != 0)
      new Fx.Tween('move_left').start('opacity', 1, 0);
  } else {
    new Fx.Tween('move_left').start('opacity', 0, 1);
    document.getElementById('move_left').getElementsByTagName('img')[0].src = 'images/slide_labels/'+curr_slide.left_slide.id+'.png';
    document.getElementById('move_left').getElementsByTagName('img')[0].alt = curr_slide.left_slide.id+'.png';
  }
  /* bottom */
  if(curr_slide.bottom_slide == undefined) {
    if(document.getElementById('move_down').style.opacity != 0)
      new Fx.Tween('move_down').start('opacity', 1, 0);
  } else {
    new Fx.Tween('move_down').start('opacity', 0, 1);
    document.getElementById('move_down').getElementsByTagName('img')[0].src = 'images/slide_labels/'+curr_slide.bottom_slide.id+'.png';
    document.getElementById('move_down').getElementsByTagName('img')[0].alt = curr_slide.bottom_slide.id+'.png';
  }
  /* right */
  if(curr_slide.right_slide == undefined) {
    if(document.getElementById('move_right').style.opacity != 0)
      new Fx.Tween('move_right').start('opacity', 1, 0);
  } else {
    new Fx.Tween('move_right').start('opacity', 0, 1);
    document.getElementById('move_right').getElementsByTagName('img')[0].src = 'images/slide_labels/'+curr_slide.right_slide.id+'.png';
    document.getElementById('move_right').getElementsByTagName('img')[0].alt = curr_slide.right_slide.id+'.png';
  }
}

function move_up() {

  curr_slide = curr_slide.top_slide;
  var slide = document.getElementById('checker').getElementsByTagName('div');
  for(var i=0;i<slide.length;i++) {
    if(!isSlide(slide[i])) continue;
    var margin_top_old = parseInt(slide[i].style.marginTop.replace('px', ''));
    var margin_top_new = margin_top_old + slide_height;
    var fx1 = new Fx.Tween(slide[i]);
    var fx2 = new Fx.Tween(slide[i]);
    if(slide[i].id == curr_slide.id)
      fx1.start('opacity', unfocus_opacity, 1.0);
    else if(slide[i].id == curr_slide.bottom_slide.id)
      fx1.start('opacity', 1, unfocus_opacity);
    fx2.start('margin-top', margin_top_old, margin_top_new);
  }
  // update slide labels
  update_labels();
}

function move_left() {

  curr_slide = curr_slide.left_slide;
  var slide = document.getElementById('checker').getElementsByTagName('div');
  for(var i=0;i<slide.length;i++) {
    if(!isSlide(slide[i])) continue;
    var margin_top = parseInt(slide[i].style.marginTop.replace('px', ''));
    var margin_left_old = parseInt(slide[i].style.marginLeft.replace('px', ''));
    var margin_left_new = margin_left_old + slide_width;
    var fx1 = new Fx.Tween(slide[i]);
    var fx2 = new Fx.Tween(slide[i]);
    if(slide[i].id == curr_slide.id)
      fx1.start('opacity', unfocus_opacity, 1.0);
    else if(slide[i].id == curr_slide.right_slide.id)
      fx1.start('opacity', 1, unfocus_opacity);
    fx2.start('margin-left', margin_left_old, margin_left_new);
  }
  // update slide labels
  update_labels();

}

function move_down() {

  curr_slide = curr_slide.bottom_slide;
  var slide = document.getElementById('checker').getElementsByTagName('div');
  for(var i=0;i<slide.length;i++) {
    if(!isSlide(slide[i])) continue;
    var margin_left = parseInt(slide[i].style.marginLeft.replace('px', ''));
    var margin_top_old = parseInt(slide[i].style.marginTop.replace('px', ''));
    var margin_top_new = margin_top_old - slide_height;
    var fx1 = new Fx.Tween(slide[i]);
    var fx2 = new Fx.Tween(slide[i]);
    if(slide[i].id == curr_slide.id)
      fx1.start('opacity', unfocus_opacity, 1.0);
    else if(slide[i].id == curr_slide.top_slide.id)
      fx1.start('opacity', 1, unfocus_opacity);
    fx2.start('margin-top', margin_top_old, margin_top_new);
  }
  // update slide labels
  update_labels();

}

function move_right() {

  curr_slide = curr_slide.right_slide;
  var slide = document.getElementById('checker').getElementsByTagName('div');
  for(var i=0;i<slide.length;i++) {
    if(!isSlide(slide[i])) continue;
    var margin_top = parseInt(slide[i].style.marginTop.replace('px', ''));
    var margin_left_old = slide[i].style.marginLeft.replace('px', '');
    var margin_left_new = margin_left_old - slide_width;
    var fx1 = new Fx.Tween(slide[i]);
    var fx2 = new Fx.Tween(slide[i]);
    if(slide[i].id == curr_slide.id)
      fx1.start('opacity', unfocus_opacity, 1.0);
    else if(slide[i].id == curr_slide.left_slide.id)
      fx1.start('opacity', 1, unfocus_opacity);
    fx2.start('margin-left', margin_left_old, margin_left_new);
  }
  // update slide labels
  update_labels();

}

function fade_out(id) {
  exampleFx = new Fx.Tween(id, {
property: 'opacity',
duration: 500, 
transition: Fx.Transitions.Quart.easeInOut
});
exampleFx.start(1,0);
}