var imgstatus="full";
var infointerval = null;

function preloadProjectImages(){
  preloadImages('assets/background.png', 'menubutton-home.png', 'menubutton-in-progress.png', 'menubutton-vario-us.png', 'menubutton-contact-us.png');
  }
function preloadImages() {
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
  }
function setContent(){
  // Detect if the browser is IE or not.
  var IE = document.all?true:false  
  if (!IE) document.captureEvents(Event.MOUSEMOVE)  
  // Set-up to use getMouseXY function onMouseMove
  document.onmousemove = getMouseXY;
  // Temporary variables to hold mouse x-y pos.s
  var tempX = 0;
  var tempY = 0;
  //checktoscrollby
  CheckScrollBy();
  }
function CheckScrollBy(){
  var ww = getWindowWidth();
  if(ww < 1118){
    var toscroll = parseInt((1118 - ww)/2);
    window.scrollTo(toscroll, 0);
    //window.alert("inhere");
    }
  }
function getMouseXY(e) {
  var IE = document.all?true:false  
  if (IE) {
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX;
    tempY = e.pageY;
  }  
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  //windowwith
  var windowWidth = getWindowWidth();
  var middle = windowWidth/2;
  if(tempX > middle && parseInt(document.getElementById("grassposition").value) < 0){
    var changeX = parseInt(document.getElementById("grassposition").value) + parseInt(tempX/middle);
    document.getElementById("grass").style.backgroundPosition = changeX+"px bottom";
    document.getElementById("grassposition").value = changeX;
    }
  //2283 is width of the image  
  if(tempX < middle && ((2283 - windowWidth) + (parseInt(document.getElementById("grassposition").value))>0)){  
    var changeX = parseInt(document.getElementById("grassposition").value) - parseInt(((middle - tempX) + middle)/middle);  
    document.getElementById("grass").style.backgroundPosition = changeX+"px bottom";
    document.getElementById("grassposition").value = changeX;    
    }
  return true;  
  }
//Get WindowWidth
function getWindowWidth() {
	var windowWidth = 0;
	if(typeof(window.innerWidth) == 'number'){
		windowWidth = window.innerWidth;
  	}
	else{
		if(document.documentElement && document.documentElement.clientWidth) {
			windowWidth = document.documentElement.clientWidth;
		  }
		else{
			if(document.body && document.body.clientWidth) {
				windowWidth = document.body.clientWidth;
			  }
		  }
	  }
  return windowWidth;
  }  
window.onload = function() { 
  var browser = navigator.appName;
  var ver = navigator.appVersion;
  var thestart = parseFloat(ver.indexOf("MSIE"))+1;
  var brow_ver = parseFloat(ver.substring(thestart+4,thestart+7));

  if ((browser=="Microsoft Internet Explorer") && (brow_ver <= 6)){
    window.location="b-one-default.html";
    }

  var passme = document.getElementById("activemenu").value;  
  DefineMenu(passme);
  setContent();
  //preloadProjectImages();
  var myImg=new Array("background.png","menubutton-home.png","menubutton-in-progress.png", "menubutton-vario-us.png", "menubutton-contact-us.png", "bgcontent.png", "bgcontentcontact.png", "contact-foto.png", "fade-away-links.png", "fade-away-rechts.png");
  for(var i=0;i<myImg.length;i++){
    var img = new Image();
    img.src = 'http://www.various.be/assets/' + myImg[i];
    }
  CreateFilterContent(2);

  setInterval("CreateFadeEffect('fadeimg',90,30,1000)", 1000);
	}
window.onresize = function() {
  setContent();
  preloadProjectImages();
  
  var mypos = parseInt(document.getElementById("sliderpos").value);
  
  if(document.getElementById("pane1")){
    $('#pane1')[0].scrollTo(mypos);
    }
	}
window.onfocus = function(){
  setContent();
  preloadProjectImages();
  
  if(document.getElementById("sliderpos")){
    var mypos = parseInt(document.getElementById("sliderpos").value);
    
    if(document.getElementById("pane1")){
      $('#pane1')[0].scrollTo(mypos);
      }
    }
  }
  
function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
        setTimeout("changeDisplayStyle('"+id+"', 'none')", 20);        
    }
    else if(opacStart < opacEnd) {
        setTimeout("changeDisplayStyle('"+id+"', 'block')", 20);
        for(i = opacStart; i <= opacEnd; i++){
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

function CreateFadeEffect(id, start, end, time){
  if(imgstatus == "full"){
    opacityOneElement(id,start,end,time);
    imgstatus = "low";
    }
  else{
    opacityOneElement(id,end,start,time);
    imgstatus = "full";
    }
  }
function opacityOneElement(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }      
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++){
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

function changeDisplayStyle(id, displaym){
  if(document.getElementById(id)){
    document.getElementById(id).style.display = displaym;
    }
  }

//change the opacity for different browsers
function changeOpac(opacity, id) {
  if(document.getElementById(id)){
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    }
  }
function ShowDetail(){
  if(document.getElementById("detail_activeprj").style.display == "none" || document.getElementById("detail_activeprj").style.display == ""){
    opacityOneElement('leftfilter', 75, 90, 1500);
    opacityOneElement('rightfilter', 75, 90, 1500);
    document.getElementById("detail_activeprj").style.display = "block";
    document.getElementById("detail_navigation").style.display = "block";
    getContent();  
    }
  }
function HideDetail(){
  if(document.getElementById("detail_activeprj").style.display == "block"){
    
    opacity('prj_info_' + parseInt(document.getElementById('project').value), 0, 100, 5);
    CreateFilterContent(parseInt(document.getElementById('project').value));
    
    opacityOneElement('leftfilter', 90, 75, 1500);
    opacityOneElement('rightfilter', 90, 75, 1500);
    document.getElementById("detail_activeprj").style.display = "none";
    document.getElementById("detail_navigation").style.display = "none";   
    }
  }
function ShowMyInfo(slide, move){
  var sliderpos = parseInt(document.getElementById("pane1").style.left) * -1;
  var begin = parseInt(document.getElementById("sliderpos").value);
  var end = parseInt(begin)-223;  
  //
  if(move == "prev"){
    //if(sliderpos <= begin){
    if(sliderpos == begin){
      opacity('prj_info_'+slide, 0, 100, 1500);
      CreateFilterContent(slide);    
      //window.alert(slide);
      clearInterval(infointerval);
      //window.alert(sliderpos + " " + begin + " " + move);
      }
    }
  if(move == "next"){
    //if(end <= sliderpos){    
    if(sliderpos == begin){
      //window.alert(slide);
      opacity('prj_info_'+slide, 0, 100, 1500);
      CreateFilterContent(slide);
      clearInterval(infointerval);
      //window.alert(sliderpos + " " + begin + " " + move);
      }
    }
  }  
function PrevSlide(){
  sliderhasmoved = true;
  document.getElementById("activepage").value = 0;
  if(document.getElementById("fadeimg")){
    document.getElementById("fadeimg").style.display = "none";
    }
  var nrprojects = document.getElementById("nrprojects").value;
  
  opacity('prj_info_'+parseInt(document.getElementById('project').value), 100, 0, 50); 
  //document.getElementById('prj_info_'+parseInt(document.getElementById('project').value)).innerHTML = "";
           
  if(parseInt(document.getElementById('project').value) == 2){
    var aprj = nrprojects;
    var newpos = 223 * (parseInt(nrprojects)-2);
    var movingto = "next";
    }
  else{
    var aprj = parseInt(document.getElementById('project').value) - 1;
    var newpos = parseInt(document.getElementById('sliderpos').value) - 223;
    var movingto = "prev";
    }
  //CreateFilterContent(aprj);
  $('#pane1')[0].scrollTo(newpos);
  document.getElementById('sliderpos').value = newpos;
  document.getElementById('project').value = aprj;              
  
  //window.alert(document.getElementById("detail_activeprj").style.display);
  
  if(document.getElementById("detail_activeprj").style.display == "none" || document.getElementById("detail_activeprj").style.display == ""){
    infointerval = setInterval("ShowMyInfo('"+aprj+"', '"+movingto+"')", 80);
    }
  }
function NextSlide(){
  sliderhasmoved = true;
  document.getElementById("activepage").value = 0;
  if(document.getElementById("fadeimg")){
    document.getElementById("fadeimg").style.display = "none";
    }
  var nrprojects = document.getElementById("nrprojects").value;
  opacity('prj_info_'+parseInt(document.getElementById('project').value), 100, 0, 50);         
    
  if(parseInt(document.getElementById('project').value) == nrprojects){
    var newpos = 0;
    var aprj = 2;
    var movingto = "prev";    
    }
  else{
    var newpos = parseInt(document.getElementById('sliderpos').value) + 223;
    var aprj = parseInt(document.getElementById('project').value) + 1;
    var movingto = "next";
    }
    
  //CreateFilterContent(aprj);
  $('#pane1')[0].scrollTo(newpos);
  document.getElementById('sliderpos').value = newpos;
  document.getElementById('project').value = aprj;   

  //window.alert(document.getElementById("detail_activeprj").style.display);
  
  if(document.getElementById("detail_activeprj").style.display == "none" || document.getElementById("detail_activeprj").style.display == ""){  
    infointerval = setInterval("ShowMyInfo('"+aprj+"', '"+movingto+"')", 80);
    }
  }
function CheckFilterLeftStatus(){
  if(leftfilterstatus == "on"){
    opacityOneElement('leftfilter', 90, 65, 1500);
    leftfilterstatus = "off";
    }
  }
function CheckFilterRightStatus(){
  if(rightfilterstatus == "on"){
    opacityOneElement('rightfilter', 90, 65, 1500);
    rightfilterstatus = "off";
    }
  }
function GoToSlide(slide){
  //reset filter content
  document.getElementById("leftfilter").innerHTML = "";
  document.getElementById("rightfilter").innerHTML = "";

  sliderhasmoved = true;
  //window.alert(document.getElementById('project').value + " " + document.getElementById('sliderpos').value);
  document.getElementById("activepage").value = 0;
  //CreateFilterContent(slide);
  if(document.getElementById("fadeimg")){
    document.getElementById("fadeimg").style.display = "none";
    }
  opacity('prj_info_'+parseInt(document.getElementById('project').value), 100, 0, 50);
  //
  var topos = (parseInt(slide) - 2) * 223;
  //opacity('prj_info_'+parseInt(slide), 0, 100, 1500);          
  var aprj = parseInt(document.getElementById('project').value) - 1;
  $('#pane1')[0].scrollTo(topos);
  
  if(parseInt(document.getElementById('project').value) > slide){
    
    var movingto = "prev";
    }
  else{
    var movingto = "next";
    }  
  document.getElementById('sliderpos').value = topos;
  document.getElementById('project').value = slide;
  
  infointerval = setInterval("ShowMyInfo('"+slide+"', '"+movingto+"')", 80);       
  }

function CreateFilterContent(slide){
  if(document.getElementById("nrprojects")){
    var nrprojects = document.getElementById("nrprojects").value;
    //check last slide
    var slideprev = parseInt(slide)-1;
      //check first slide
    if(slide == 2){
      var slideprev = nrprojects;
      }
    var slidenext1 = parseInt(slide)+1;
    if(slidenext1 > nrprojects){
      slidenext1 = 2;
      }
    var slidenext2 = slidenext1+1;
    if(slidenext2 > nrprojects){
      slidenext2 = 2;
      }
    var slidenext3 = slidenext2+1;
     if(slidenext3 > nrprojects){
      slidenext3 = 2;
      }
    //leftfilter content
    document.getElementById("leftfilter").innerHTML = "<a href='#' class='clickslider' onclick='GoToSlide("+slideprev+");getContent();'></a>";
    //rightfilter content
    document.getElementById("rightfilter").innerHTML = "<a href='#' class='clickslider' onclick='GoToSlide("+slidenext1+");getContent();'></a> <a href='#' class='clickslider' onclick='GoToSlide("+slidenext2+");getContent();'></a> <a href='#' class='clickslider' onclick='GoToSlide("+slidenext3+");getContent();'></a>";
    }
  }
  
function ChangePageDetail(page, image, text){
  oldpage = document.getElementById("activepage").value;
  document.getElementById("detailpage_"+oldpage).className = "nonactivepage";
  document.getElementById("detailpage_"+page).className = "activepage";
  document.getElementById("activepage").value = page;
  document.getElementById("detailpicture").src = image;
  document.getElementById("detailtext").innerHTML = text;
  }

function ValidateForm(form){
  formelements = new Array("naam_voornaam", "straat_nr", "plaats_postcode", "email", "vraag");
  var send = true;
  for(var i=0;i<formelements.length;i++){
    if(document.getElementById(formelements[i]).value==""){
      send = false;
      document.getElementById(formelements[i]).style.border = "1px solid #92ECFC";
      document.getElementById("message").innerHTML = "Gelieve alle velden in te vullen!";
      }
    }
  //check email
  var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  var address = document.getElementById("email").value;
  
  if(reg.test(address) == false && send == true){
    send=false;
    document.getElementById("message").innerHTML = "Verkeerd emailadres!"
    }  
  //check to send 
  if(send == true){
    document.getElementById("formaction").value = "verzenden";
    get(form);
    }
  else{
    return false;
    }
  }

function ResetFormElement(elem){
  document.getElementById(elem.id).style.border = "1px solid #9E9E9E";
  document.getElementById("message").innerHTML = "";
  }