// Anything Slider initialisieren
$(document).ready(function(){
 $('#slider1')
  .anythingSlider({
   width          	: 390,
   height         	: 300,
   autoPlay       	: false,
   toggleControls 	: false,
   buildNavigation  : false,
   startStopped   	: false,
   clickArrows      : "click"
  })
});

// Greyscale Hover Effekt
function prepareImages(){
	if(document.getElementById("person-img")){
		var personImg = document.getElementById("person-img");
		var origPersonSrc = personImg.src;
		var grayscalePersonSrc = grayscale(personImg, false);
		personImg.src = grayscalePersonSrc;
	}
	
	if (document.getElementById("sliderBox")) {
		var sliderBox = document.getElementById("sliderBox");
		var imagesArray = sliderBox.getElementsByTagName("img");
		var originalSource = new Array();
		var grayscaleSource = new Array();
		for (var i = 0; i < imagesArray.length; i++) {
			// Store original URLs
			originalSource[i] = sliderBox.getElementsByTagName("img")[i].src;
			// Create and store grayscale URLs
			grayscaleSource[i] = grayscale(imagesArray[i], false);
		}
		sliderBox.onmouseover = function(){
			for (var i = 0; i < imagesArray.length; i++) {
				sliderBox.getElementsByTagName("img")[i].src = originalSource[i];
			}
		}
		
		sliderBox.onmouseout = function(){
			for (var i = 0; i < imagesArray.length; i++) {
				sliderBox.getElementsByTagName("img")[i].src = grayscaleSource[i];
			}
		}
		
		for (var i = 0; i < imagesArray.length; i++) {
			sliderBox.getElementsByTagName("img")[i].setAttribute("src", grayscaleSource[i]);
		}
	}
}

function grayscale(image)
{
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");

  var imgWidth=image.width;
  var imgHeight=image.height;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
//  alert(imgWidth);
  myCanvasContext.drawImage(image,0,0);

  // The getImageData() function cannot be called if the image is not from the same domain.
  // You'll get security error
  var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
  for (i=0; i<imageData.height; i++)
  {
    for (j=0; j<imageData.width; j++)
    {
	  var index=(i*4)*imageData.width+(j*4);
	  var red=imageData.data[index];
	  var green=imageData.data[index+1];
	  var blue=imageData.data[index+2];
	  var alpha=imageData.data[index+3];
	  var average=(red+green+blue)/3;
   	  imageData.data[index]=average;
   	  imageData.data[index+1]=average;
   	  imageData.data[index+2]=average;
   	  imageData.data[index+3]=alpha;
	}
  }
  myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width, imageData.height);
  //myCanvasContext.drawIMage(imageData,0,0);//,0,0, imageData.width, imageData.height);

  return myCanvas.toDataURL();
}


// Preload hover-fills to avoid flickering
function preload(){
	var preloadSources = new Array("/workspace/images/white.png", "/workspace/images/yellow.png", "/workspace/images/black.png", "/workspace/images/suche_bg.png", "/workspace/images/pfeilschwarz.png");
	  var images = [];
	for (i = 0, length = preloadSources.length; i < length; ++i) {
    	images[i] = new Image();
    	images[i].src = preloadSources[i];
  	}
}

// Ausblenden des Nachoben Links wenn das Fenster klein ist
function noausblenden(){
	if($('.nOwrapper').offset()){
		var posX = $('.nOwrapper').offset().top;
		var viewPortHeight = $(window).height();
		
		if(posX < viewPortHeight){
			$('.nachOben').remove();
		}
	}
}


function init(){
	prepareImages();
	preload();
	$("#person-img").animate({opacity: 1},500);
	$("#slider1").animate({opacity: 1},500);
	$('#showSearchBox').click(function() {
		  $('#searchFrame').show();
	});
	$("#closeSearchBox").click(function()
    {
        $('#searchFrame', window.parent.document).hide();
    });
	noausblenden();
	}

	
window.onload = init;