/* Spark design & innovation
Peter@Kraaijeveld.nl
Joost@deKeijzer.org
27 juni 2008
6 juli 2008
24 september 2009
*/

// variabelen die gebruik worden voor het scrollen in de projectbrowser en het blok links en rechts
var scrollTimerRight; // gaat naar rightScrollDown wijzen
var scrollTimerLeft; // gaat naar rightScrollDown wijzen
var scrollTimerPb; // gaat naar de Projectbrowser wijzen
var	scrollTimerInterval = 20; // miliseconden tot een stapje verder
var iMax = 20; // aantal stappen
var i; // rightSrollDown wordt honderd keer uitgevoerd
var pBegin; // de beginpositie
var pBeginLeft; // de beginpositie
var pBeginRight; // de beginpositie
var pBeginPb; // de beginpositie
var pDelta; // de hoeveelheid pixels die gescrollt wordt
var pContent; // de totale hoeveelheid pixels van de content
var scrollbarRightZichtbaar;
var scrollbarLeftZichtbaar;

// voor de scroll sliders
var dragObj = new Object();
/* bevat:
elNode: sliderobject
canvasNode: text content
yMax: slider maximale uitslag
*/

var browserDetailStaatOpen;
var pageNumberCurrent = 1; // voor de foto's op de productpagina

function sparkInit () {
	// projectbrowser x positie uit de cookie halen en goed zetten
	var x = leesCookie('projectBrowserX');
	if ( x !== '') {
		document.getElementById('browser-canvas').style.left = x + 'px'; 
	}
	eraseCookie ('projectBrowserX');
	projectBrowserScrollPijlUpdate ();
}

/* menu's */
function menuOpen(menutitelId, menuId, animeer) {
	// eerst menu openzetten
  //alert (menutitelId)
  document.getElementById(menuId).style.left = document.getElementById(menutitelId).offsetLeft + 'px'; 
  document.getElementById(menuId).style.display = 'block'; 

  // dan de menutitel weer op oranje zetten
	if(document.getElementById(menutitelId).className.substr(-9,9) == "-selected") {
		document.getElementById(menutitelId).style.backgroundPosition = 'right bottom';
	} else {
		document.getElementById(menutitelId).style.backgroundPosition = 'right top';
	}
//	document.getElementById(menutitelId).style.backgroundPositionX = 'right';
	//alert (document.getElementById(menutitelId).style.backgroundPositionX);
	//document.getElementById(menutitelId).style.background-position = 'right';
	
  // de schaduwen
	// Mac FF bug laat de flash verdwijnen
	if ( schaduwAan) {
	  document.getElementById('menuSchaduw1').style.top = document.getElementById(menuId).offsetTop + 'px'; 
		document.getElementById('menuSchaduw1').style.left = document.getElementById(menuId).offsetLeft - 1 + 'px'; 
		document.getElementById('menuSchaduw1').style.width = document.getElementById(menuId).clientWidth + 4 + 'px'; 
		document.getElementById('menuSchaduw1').style.height = document.getElementById(menuId).clientHeight + 4 + 'px'; 
		document.getElementById('menuSchaduw1').style.display = 'block'; 
		
		document.getElementById('menuSchaduw2').style.top = document.getElementById(menuId).offsetTop + 'px'; 
		document.getElementById('menuSchaduw2').style.left = document.getElementById(menuId).offsetLeft - 2 + 'px'; 
		document.getElementById('menuSchaduw2').style.width = document.getElementById(menuId).clientWidth + 6 + 'px'; 
		document.getElementById('menuSchaduw2').style.height = document.getElementById(menuId).clientHeight + 5 + 'px'; 
		document.getElementById('menuSchaduw2').style.display = 'block'; 
		
		document.getElementById('menuSchaduw3').style.top = document.getElementById(menuId).offsetTop + 'px'; 
		document.getElementById('menuSchaduw3').style.left = document.getElementById(menuId).offsetLeft - 3 + 'px'; 
		document.getElementById('menuSchaduw3').style.width = document.getElementById(menuId).clientWidth + 8 + 'px'; 
		document.getElementById('menuSchaduw3').style.height = document.getElementById(menuId).clientHeight + 6 + 'px'; 
		document.getElementById('menuSchaduw3').style.display = 'block'; 
		
	  } else {
		document.getElementById('menuSchaduw7').style.top = document.getElementById(menuId).offsetTop + 'px'; 
		document.getElementById('menuSchaduw7').style.left = document.getElementById(menuId).offsetLeft - 0 + 'px'; 
		document.getElementById('menuSchaduw7').style.width = document.getElementById(menuId).clientWidth + 0 + 'px'; 
		document.getElementById('menuSchaduw7').style.height = document.getElementById(menuId).clientHeight + 0 + 'px'; 
		document.getElementById('menuSchaduw7').style.display = 'block'; 
	
		}
  }

function menuClose (menutitelId, menuId) {
	if(document.getElementById(menutitelId).className.substr(-9,9) == "-selected") {
		document.getElementById(menutitelId).style.backgroundPosition = 'left bottom';
	} else {
		document.getElementById(menutitelId).style.backgroundPosition = 'left top';
	}
	document.getElementById(menuId).style.display = 'none'; 
	if ( schaduwAan) {
		  document.getElementById('menuSchaduw1').style.display = 'none'; 
		  document.getElementById('menuSchaduw2').style.display = 'none'; 
		  document.getElementById('menuSchaduw3').style.display = 'none'; 
	    }
		else {
		  document.getElementById('menuSchaduw7').style.display = 'none';
		  }
	}

/* project browser */
function projectBrowserScrollLeftStart () {
}

function projectBrowserScrollLeft () {
  // er kan nog een popup open staan
  if (browserDetailStaatOpen != null) projectBrowserDetailClose ('', browserDetailStaatOpen);
	i = 0;
	pBeginPb = document.getElementById('browser-canvas').offsetLeft;
	pDelta = Math.min( -pBeginPb, 400);
	scrollTimerPb = setInterval ("projectBrowserScrollStapje()", scrollTimerInterval);
  return false;
  }

function projectBrowserScrollRightStart () {
}

function projectBrowserScrollRight () {
  // er kan nog een popup open staan
  if (browserDetailStaatOpen != null) projectBrowserDetailClose ('', browserDetailStaatOpen);
	i = 0;
	if (document.getElementById('browser-canvas').clientWidth > document.getElementById('browser').clientWidth) {
	  pBeginPb = document.getElementById('browser-canvas').offsetLeft;
	  pContent = document.getElementById('browser-canvas').clientWidth;
	  pDelta = - Math.min (400, pContent - -pBeginPb - document.getElementById('browser').clientWidth);
    scrollTimerPb = setInterval ("projectBrowserScrollStapje()", scrollTimerInterval);
    }
  return false;
}

function projectBrowserScrollStapje () {
  i++;
  if ( i > iMax ) {
	    // scrollen is klaar
			clearInterval (scrollTimerPb);
      projectBrowserScrollPijlUpdate();
			}
		else {
			var functie1 = (i/iMax) * Math.PI;
			var functie2 = Math.cos(functie1);
			var functie3 = 0.5 * ( 1 - functie2);
			document.getElementById('browser-canvas').style.left = Math.round(pBeginPb + functie3 * pDelta) + 'px';
		}
	}

function projectBrowserScrollPijlUpdate () {
			// linker pijl enablen of disablen
      if (document.getElementById('browser-canvas').offsetLeft == 0) 
			    { document.getElementById('projectbrowser-scrollleft-pijl').src='/css/scrollleft.png'; }
				else 
				  { document.getElementById('projectbrowser-scrollleft-pijl').src='/css/scrollleft-enabled.png'; };
			// rechter pijl enablen of disablen
      if ( document.getElementById('browser-canvas').offsetLeft + document.getElementById('browser-canvas').clientWidth > document.getElementById('browser').clientWidth) 
			    { document.getElementById('projectbrowser-scrollright-pijl').src='/css/scrollright-enabled.png'; }
				else 
				  { document.getElementById('projectbrowser-scrollright-pijl').src='/css/scrollright.png'; };
	}

function projectBrowserDetailOpen (browserElement, detail) {
  if (browserDetailStaatOpen != null) projectBrowserDetailClose (browserElement, browserDetailStaatOpen);
  // alleen doen als 'ie helemaal zichtbaar is
	if ( (document.getElementById(browserElement).offsetLeft >= - document.getElementById('browser-canvas').offsetLeft) && ( (document.getElementById('browser-canvas').offsetLeft + document.getElementById(browserElement).offsetLeft + document.getElementById(browserElement).clientWidth) <= document.getElementById('browser').clientWidth) ) {
		browserDetailStaatOpen = detail; //bevat de id van de browser detail dat open staat
		// de linker positie wordt gecorrigeerd voor de breedte zodat 'ie in het midden oppupt
		document.getElementById(detail).style.display = 'block';
		var x = document.getElementById ('browser').offsetLeft + document.getElementById('browser-canvas').offsetLeft + document.getElementById(browserElement).offsetLeft - Math.round ((document.getElementById(detail).clientWidth - document.getElementById(browserElement).clientWidth) / 2 );
		//var y = document.getElementById ('browser').offsetTop + document.getElementById('browser-canvas').offsetTop + document.getElementById(browserElement).offsetTop ;
		document.getElementById(detail).style.left = x + 'px';
		//document.getElementById(detail).style.top = y + 'px';
		
		// schaduwen aanzetten, van binnen naar buiten
		if ( schaduwAan ) {
			document.getElementById('projectbrowser-detailSchaduw1').style.top = document.getElementById(detail).offsetTop + 1 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw1').style.left = document.getElementById(detail).offsetLeft - 1 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw1').style.width = document.getElementById(detail).clientWidth + 4 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw1').style.height = document.getElementById(detail).clientHeight + 3 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw1').style.display = 'block'; 
		
			document.getElementById('projectbrowser-detailSchaduw2').style.top = document.getElementById(detail).offsetTop + 2 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw2').style.left = document.getElementById(detail).offsetLeft - 2 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw2').style.width = document.getElementById(detail).clientWidth + 6 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw2').style.height = document.getElementById(detail).clientHeight + 3 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw2').style.display = 'block'; 
		
			document.getElementById('projectbrowser-detailSchaduw3').style.top = document.getElementById(detail).offsetTop + 3 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw3').style.left = document.getElementById(detail).offsetLeft - 3 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw3').style.width = document.getElementById(detail).clientWidth + 8 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw3').style.height = document.getElementById(detail).clientHeight + 3 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw3').style.display = 'block'; 
		
			document.getElementById('projectbrowser-detailSchaduw4').style.top = document.getElementById(detail).offsetTop + 4 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw4').style.left = document.getElementById(detail).offsetLeft - 4 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw4').style.width = document.getElementById(detail).clientWidth + 10 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw4').style.height = document.getElementById(detail).clientHeight + 3 + 'px'; 
			document.getElementById('projectbrowser-detailSchaduw4').style.display = 'block'; 
			}
		}
  }

function projectBrowserDetailClose (browserElement, detail) {
	//alert ('mouse eruit');
	// parameter browserElement wordt niet gebruikt
	document.getElementById(detail).style.display = 'none'; 
	if ( schaduwAan) {
		document.getElementById('projectbrowser-detailSchaduw1').style.display = 'none'; 
		document.getElementById('projectbrowser-detailSchaduw2').style.display = 'none'; 
		document.getElementById('projectbrowser-detailSchaduw3').style.display = 'none'; 
		document.getElementById('projectbrowser-detailSchaduw4').style.display = 'none'; 
	  }
	browserDetailStaatOpen = null;
	}

/* foto stepper voor projecten */
function stepperPlus(t) {
	for(var j = 1; j < t; j++) {
		var stepper = document.getElementById('n' + j);
		if(stepper != undefined && stepper.className == "active") {
			stepperGo(j+1, t);
			break;
		}
	}
}

function stepperMinus(t) {
	for(var j = t; j > 1; j--) {
		var stepper = document.getElementById('n' + j);
		if(stepper != undefined && stepper.className == "active") {
			stepperGo(j-1, t);
			break;
		}
	}
}

function stepperGo(i, t) {
	for(var j = 1; j <= t; j++) {
		if(document.getElementById('n' + j) != undefined) {
			var stepper = document.getElementById('n' + j);
			var foto = document.getElementById('foto' + j);
			var bijschrift = document.getElementById('bijschrift' + j);
			if(j == i) {
				// enable
				foto.style.display = "block";
				bijschrift.style.display = "block";
			} else {
				// disable
				stepper.className = "";
				foto.style.display = "none";
				bijschrift.style.display = "none";
			}
			document.getElementById('n' + i).className = "active";
		}
	}
}

/* cookie functies */
function leesCookie(naam) {
	var naamEQ = naam + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(naamEQ) == 0) {
			return c.substring(naamEQ.length,c.length);
		}
	}
	// not found
	return '';
}

function createCookie(naam,waarde,dagen) {
	if (dagen) {
		var date = new Date();
		date.setTime(date.getTime()+(dagen*24*60*60*1000));
		var verval = "; expires="+date.toGMTString();
	} else {
		var verval = "";
	}
	document.cookie = naam+"="+waarde+verval+"; path=/";
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function schrijfBrowserCookie () {
	createCookie('projectBrowserX', document.getElementById('browser-canvas').offsetLeft, 1); 
}

/* overige functies */
function schrijfEmailLink () {
  var label = '<img src="/css/footer-email.jpg" width="65" height="14" />';
  var emailNaam = '(Spark%20design%20%26%20innovation)';
  // hieronder het echte mailadres voor de apestaart
  var emailAccount = 'mail';
  var emailHost = 'sparkdesign.nl';
  document.write('<a style="border:none" href=' + 'mai' + 'lto:' + emailNaam + emailAccount + '&#64;' + emailHost + '>' + label + '</a>');
}

function schrijfEmailLinkSchoon () {
  var label = '<strong>mail<img src="/user_files/image/at.png" alt="" width="11" height="9" />sparkdesign.nl</strong>';
  var emailNaam = '(Spark%20design%20%26%20innovation)';
  // hieronder het echte mailadres voor de apestaart
  var emailAccount = 'mail';
  var emailHost = 'sparkdesign.nl';
  document.write('<a href=' + 'mai' + 'lto:' + emailNaam + emailAccount + '&#64;' + emailHost + '>' + label + '</a>');
}

function schrijfMededeling (browserElement, detail) {
  /* voor intern gebruik: schrijf diverse variabelen ter debug*/
	var m = '';
	// m += document.compatMode;
	// m += ' Pb x= ' + leesCookie('projectBrowserX');
	//m += 'Rs y= ' + leesCookie('scrollRightY');
	document.write (m);
}

/* instellen variabelen */
var nuA   = navigator.userAgent;
var npf   = navigator.platform;
var nprod = navigator.product;

var Mac  = (nuA.indexOf("Macintosh") != -1);
var MacPPC  = (npf == 'MacPPC');
var MacIntel  = (npf == 'MacIntel');

var Op    = (nuA.indexOf("Opera") != -1);
var Op9   = (nuA.indexOf("Opera/9") != -1);

var IE    = (nuA.indexOf("MSIE") != -1) //&& !Op; //Opera gebruikt ook MSIE
var IE55  = (nuA.indexOf("MSIE 5.5") != -1) && !Op;
var IE60  = (nuA.indexOf("MSIE 6.0") != -1) && !Op;
var IE70  = (nuA.indexOf("MSIE 7.0") != -1) && !Op;
var IE80  = (nuA.indexOf("MSIE 8.0") != -1) && !Op;


var Ff    = (nuA.indexOf("Firefox" ) != -1);
var Ff1   = (nuA.indexOf("Firefox/1") != -1);
var Ff2   = (nuA.indexOf("Firefox/2") != -1);
var Ff12  = Ff1 || Ff2 ; // FireFox <= 2
var Ff3   = (nuA.indexOf("Firefox/3") != -1);

var Cam   = (nuA.indexOf("Camino") != -1);
var Cam1   = (nuA.indexOf("Camino/1") != -1);
var Cam2   = (nuA.indexOf("Camino/2") != -1);

var SM   = (nuA.indexOf("SeaMonkey") != -1);

var KHTML   = (nuA.indexOf("KHTML") != -1);
var Saf   = (nuA.indexOf("Safari") != -1);
var Saf3   = Saf && (nuA.indexOf("Version/3") != -1);

var Gecko = (nuA.indexOf("Gecko/") != -1);

// de transparante schaduw geeft soms problemen in combinatie met Flash: schaduw uit
var schaduwAan = !( (Mac && Ff12) || Cam || (MacPPC && Ff3) )