var height = window.innerHeight;
var width = window.innerWidth;

var pictures = new Array();
var pictures_title = new Array();
var pictures_description = new Array();
var current_index = 0;
var galery_visible = false;

document.onkeydown = keyPressed;

function keyPressed (evt)
{
	if(galery_visible)
	{
		if(evt.keyCode == 38 || evt.keyCode == 37)
		{
			prevPicture();
		}
		else if(evt.keyCode == 39 || evt.keyCode == 40)
		{
			nextPicture();
		}
		else if(evt.keyCode == 27)
		{
			hideGalery();
		}
	}
}


function isIE()
{
 if("Microsoft Internet Explorer" == navigator.appName)
 {
   return true;
 }
 else
 {
   return false;
 }
}


function getStyle(id)
{
  if(isIE())
   return document.getElementById(id).getAttribute("style"); 
  else
   return document.getElementById (id).style;
  
}


function getInnerWidth() {
  myWidth = 0;
  
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  
  return myWidth;
}

function getInnerHeight() {
  myHeight = 0;
  
  if( typeof( window.innerWidth ) == 'number' ) {
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    myHeight = document.body.clientHeight;
  }
  
  return myHeight;
 }

/*

function getInnerHeight()
{
 if(isIE())
 {
   return document.body.offsetHeight;
   return document.body.clientHeight; 
 }
 else
   return window.innerHeight;
 
}

function getInnerWidth()
{

  if(isIE())
  {
     return document.body.offsetWidth;
     return document.body.clientWidth;
  }else
    return window.innerWidth;
}
*/

function initGaleryBG()
{
  getStyle('galery_bg').filter="alpha(opacity:80)";
  getStyle('galery_bg').KHTMLOpacity="0.80";
  getStyle('galery_bg').MozOpacity="0.80";
  getStyle('galery_bg').opacity="0.80";
  getStyle('galery_bg').height = getInnerHeight() + "px";
  getStyle('galery_bg').width = getInnerWidth() + "px";
}

function initGalery()
{
  /*getStyle('galery').filter="alpha(opacity:80)";
  getStyle('galery').KHTMLOpacity="0.80";
  getStyle('galery').MozOpacity="0.80";
  getStyle('galery').opacity="0.80";
  */getStyle('galery').top = (getInnerHeight()/2-(pictures[current_index].height/2)-100) + "px";
  getStyle('galery').left = (getInnerWidth()/2-(pictures[current_index].width/2)) + "px";
  getStyle('galery').height = pictures[current_index].height;
  getStyle('galery').width = pictures[current_index].width;
}

  var steps = 5000;
  var speed = 5000;
  var i = 0;
  var picture_height = 0;
  var picture_width = 0;
  
function initGalerySmooth()
{
  var picture_height_orig = pictures[current_index].height;
  var picture_width_orig = pictures[current_index].width;

  
  if(i<steps)
  {
	i++;
	
	picture_height = picture_height + picture_height_orig /steps;
	picture_width = picture_width + picture_width_orig / steps;

	getStyle('galery').top = (getInnerHeight()/2-(picture_height/2)-100) + "px";
	getStyle('galery').left = (getInnerWidth()/2-(picture_width/2)) + "px";
	getStyle('galery').height = picture_height;
	getStyle('galery').width = picture_width;
	
	setTimeout ( initGalerySmooth(), speed );

  }
  else
  {
	i=0;
	picture_height = 0;
    picture_width = 0;
	loadPictureFinish();
  }
}

function initGaleryNavi()
{
  var EXIT_WIDTH = 30;

  //getStyle('galery_nav').filter="alpha(opacity:20)";
  //getStyle('galery_nav').KHTMLOpacity="0.20";
  //getStyle('galery_nav').MozOpacity="0.20";
  //getStyle('galery_nav').opacity="0.20";
  getStyle('galery_nav').top = (getInnerHeight()/2+(pictures[current_index].height/2)-100) + "px";
  getStyle('galery_nav').left = (getInnerWidth()/2-(pictures[current_index].width/2)) + "px";
  getStyle('galery_nav').height = 20;
  getStyle('galery_nav').width = pictures[current_index].width;
  
  getStyle('galery_nav_table').width = pictures[current_index].width + "px";
  
  //getStyle('galery_nav_exit').filter="alpha(opacity:20)";
  //getStyle('galery_nav_exit').KHTMLOpacity="0.20";
  //getStyle('galery_nav_exit').MozOpacity="0.20";
  //getStyle('galery_nav_exit').opacity="0.20";
  getStyle('galery_nav_exit').top = (getInnerHeight()/2-(pictures[current_index].height/2)-120)+ "px";
  getStyle('galery_nav_exit').left = (getInnerWidth()/2+(pictures[current_index].width/2)-EXIT_WIDTH) + "px";
  
  
}

function initGaleryTitle()
{
  
  /*getStyle('galery_title').filter="alpha(opacity:80)";
  getStyle('galery_title').KHTMLOpacity="0.80";
  getStyle('galery_title').MozOpacity="0.80";
  getStyle('galery_title').opacity="0.80";
  */getStyle('galery_title').top = (getInnerHeight()/2-(pictures[current_index].height/2) - 130) + "px";
  getStyle('galery_title').left = (getInnerWidth()/2-(pictures[current_index].width/2)) + "px";
  //getStyle('galery_title').height = 20;
  getStyle('galery_title').width = pictures[current_index].width;
  
  getStyle('galery_title_table').width = pictures[current_index].width + "px";
  
}

function initGaleryDescription()
{
  
  /*getStyle('galery_description').filter="alpha(opacity:80)";
  getStyle('galery_description').KHTMLOpacity="0.80";
  getStyle('galery_description').MozOpacity="0.80";
  getStyle('galery_description').opacity="0.80";
  */getStyle('galery_description').top = (getInnerHeight()/2+(pictures[current_index].height/2) - 100 + 0) + "px";
  getStyle('galery_description').left = (getInnerWidth()/2-(pictures[current_index].width/2)) + "px";
  //getStyle('galery_description').height = 30;
  getStyle('galery_description').width = pictures[current_index].width;
  
  getStyle('galery_description_table').width = pictures[current_index].width + "px";
  
}

function showGalery()
{
  showGalery(0);
}

function showGalery(index)
{
   galery_visible = true;

   current_index = index;
   initGaleryBG();
   
   getStyle('galery_bg').visibility = 'visible';
   getStyle('galery').visibility = 'visible';
   getStyle('galery_nav').visibility = 'visible';
   getStyle('galery_nav_exit').visibility = 'visible';
   getStyle('galery_title').visibility = 'visible';
   getStyle('galery_description').visibility = 'visible';
   loadPicture();
}

function hideGalery()
{
    galery_visible = false;

    getStyle('galery_bg').visibility = 'hidden';
    getStyle('galery').visibility = 'hidden';
    getStyle('galery_nav').visibility = 'hidden';
    getStyle('galery_nav_exit').visibility = 'hidden';
    getStyle('galery_title').visibility = 'hidden';
    getStyle('galery_description').visibility = 'hidden';
}

function addPicture(url, titel, beschreibung)
{
  
  var tmp = new Image();
  tmp.src = url;
  
  pictures.push(tmp);
  pictures_title.push(titel);
  pictures_description.push(beschreibung);
}

function nextPicture()
{
  current_index++;
  current_index = current_index%(pictures.length);
  loadPicture();
}

function prevPicture()
{
  current_index--;

  if(current_index<0)
	current_index += pictures.length;
  current_index = current_index%(pictures.length);
    
  loadPicture();
}

function loadPicture()
{
   initGalery();
   initGaleryNavi();
   initGaleryTitle();
   initGaleryDescription();
   
   document.getElementById("galery_picture").src = pictures[current_index].src;
   document.getElementById("galery_title_text").innerHTML = pictures_title[current_index];
   document.getElementById("galery_description_text").innerHTML = pictures_description[current_index];
}