var oldContent;
var oldContentActivatedSlide;
var tmpContent;

var timer;
var slideTimer = null;
var Counter = 0;

var picturesSmall = new Array();
var picturesBig   = new Array();
var initialised = false;
var currentPictureID  = 0;

function initializePictures() {
  if(document.getElementById('currentPicture') == null ||
     document.getElementById('arrayContainer') == null ||
     document.getElementById('startSS') == null) {
    return;
  }

  oldContent = document.getElementById('currentPicture').innerHTML;
 


  setOpacity(document.getElementById('startSS'), 1);

  oldContentActivatedSlide = document.getElementById('currentPicture').innerHTML;


  content = document.getElementById('arrayContainer').innerHTML

  /* 
    id*weigth*height*linkSmall#linkBig|
   */

  var tmpArray = content.split('|');
  var arrCounter = 0;
  picturesSmall = new Array();
  picturesBig   = new Array();
  while(tmpArray.length-1 > 0) {
    var tmpStr    = tmpArray.shift();
    var tmpArray2 = tmpStr.split('#');
    picturesBig.push(tmpArray2[1]);
    var tmpArr3  = tmpArray2[0].split('*');
    
    picturesSmall.push('<img id="picture_'+tmpArr3[0]+'" style="width:'+tmpArr3[1]+'px;height:'+tmpArr3[2]+'px;margin:0 auto;" src="'+tmpArr3[3]+'" />');
  }
  initialised = true;
}

function showPictures(picId) {
  currentPictureID = picId;
  if(initialised == false) {
    initializePictures();
  }
  document.getElementById('currentPicture').innerHTML = oldContent + '<div>'+picturesSmall[picId]+'</div>';
  var thisElement = 'picture_'+picId;
  var previewHeight = document.getElementById(thisElement).style.height
  previewHeight = cutLastXChars(previewHeight, 2)
  var previewWidth  = document.getElementById(thisElement).style.width  
  previewWidth = cutLastXChars(previewWidth, 2)
  document.getElementById('currentPictureFlameFrameOne').style.height = (new Number(previewHeight) + 100)+"px";
  document.getElementById("navigator").style.visibility = "hidden";
  document.getElementById("outerPictureViewerFrame").style.visibility = "visible";
  document.getElementById("pictureViewFrame").style.visibility = "visible";

  document.getElementById(thisElement).style.width = 0+"px";
  startFadeIn(thisElement, previewWidth, 15, 1);
}



function startFadeIn(thisElement, maxWidth, stepWidth, time) {
  elementFadeIn(thisElement, maxWidth, stepWidth);
  timer = window.setInterval (function callFunc() { elementFadeIn(thisElement, maxWidth, stepWidth); }, time);
  return true;
}

function elementFadeIn(thisElement, maxWidth, stepWidth) {
  var oldWidth = document.getElementById(thisElement).style.width;
  oldWidth = cutLastXChars(oldWidth, 2)
  var newWidth = new Number(oldWidth) + new Number(stepWidth);
  var mW = new Number(maxWidth);
  if(newWidth >= mW) {
    newWidth = mW;
    document.getElementById("navigator").style.visibility = "visible";
    window.clearInterval(timer);
  }
  Counter++;
  if(Counter == 1000) {
    window.clearInterval(timer);  
  }
  document.getElementById(thisElement).style.width = newWidth + "px";
  document.getElementById(thisElement).style.marginLeft = (500/2 - newWidth/2)+"px";

}

function setOpacity(theObject, newOpacity) {
    theObject.style.opacity = newOpacity;
    theObject.style.filter = 'alpha(opacity=' + newOpacity*10 + ')';
}

function setStarterOpacity(theObject, newOpacity) {
 if(slideTimer == null) {
   theObject.style.opacity = newOpacity;
   theObject.style.filter = 'alpha(opacity=' + newOpacity*10 + ')';
 }
}

function nextPicture() {
  if(picturesSmall.length - 1 == currentPictureID) {
    currentPictureID = 0;
  } else {
    currentPictureID++;
  }
  document.getElementById('currentPicture').innerHTML = oldContent + '<div>'+picturesSmall[currentPictureID]+'</div>';
  var thisElement = 'picture_'+currentPictureID;
  
  var previewHeight = document.getElementById(thisElement).style.height
  var previewWidth  = document.getElementById(thisElement).style.width  
  
  previewHeight = cutLastXChars(previewHeight, 2)
  previewWidth = cutLastXChars(previewWidth, 2)
  
  document.getElementById('currentPictureFlameFrameOne').style.height = (new Number(previewHeight) + 100)+"px";
  document.getElementById("navigator").style.visibility = "visible";
  document.getElementById(thisElement).style.marginLeft = (250 - previewWidth/2) + "px";
}

function previousPicture() {
  if(0 == currentPictureID) {
    currentPictureID = picturesSmall.length - 1;
  } else {
    currentPictureID--;
  }
  document.getElementById('currentPicture').innerHTML = oldContent + '<div>'+picturesSmall[currentPictureID]+'</div>';
  var thisElement = 'picture_'+currentPictureID;

  var previewHeight = document.getElementById(thisElement).style.height
  var previewWidth  = document.getElementById(thisElement).style.width

  previewHeight = cutLastXChars(previewHeight, 2)
  previewWidth = cutLastXChars(previewWidth, 2)

  document.getElementById('currentPictureFlameFrameOne').style.height = (new Number(previewHeight) + 100)+"px";  
  document.getElementById("navigator").style.visibility = "visible";  
  document.getElementById(thisElement).style.marginLeft = (250 - previewWidth/2) + "px";
}

function showBigPicture() {
  window.open("http://melodic-chaos.de/" + picturesBig[currentPictureID]) 
}

function startSlideShow() {
  if(slideTimer == null) {
    setOpacity(document.getElementById('startSS'),1);
    tmpContent = oldContent;
    oldContent = oldContentActivatedSlide;
    slideTimer = window.setInterval("nextPicture()", 3000);
  }
}

function stopSlideShow() {
  if(slideTimer != null) {
    oldContent = tmpContent;
    window.clearInterval(slideTimer);
    setOpacity(document.getElementById('startSS'),0.7);
    slideTimer = null;
  }
}

function hidePictures() {
  stopSlideShow();
  document.getElementById('currentPicture').innerHTML = oldContent;
  document.getElementById("outerPictureViewerFrame").style.visibility = "hidden";
  document.getElementById("pictureViewFrame").style.visibility = "hidden";
}