var siteLang;
var activeTab;
var rgbTabFrom = {"r":"","g":"","b":""};
var allRGB_colors = {"o0_R":"","o0_G":"","o0_B":"","o1_R":"","o1_G":"","o1_B":"","o2_R":"","o2_G":"","o2_B":"","o3_R":"","o3_G":"","o3_B":"","o4_R":"","o4_G":"","o4_B":""};
var interv ="";
var times=0;

// ------------------------------ startup site ---------------------------------
//
function StartUp(lang){
    loadActiveLanguages();
    loadAllColors();
    $S('contentFrame').backgroundColor = "rgb("+ rgbTabFrom.r +","+ rgbTabFrom.g +","+ rgbTabFrom.b +")";
    setLang(lang);
}
//
// -------------------------- END startup site ---------------------------------

function loadAllColors(){
    for (i=0; i<=6; i++){
        loadColor("0"+i);
    }
}
function loadColor(tab){
    // get saved color from database
    //var xmlhttp = new XMLHttpRequest();
    xmlhttp = xmlRequest();
    xmlhttp.open('get', 'getColor.php?&id=tab_' + tab, false);
    xmlhttp.send(null);
    var RGB_colors = {};
    RGB_colors = JSON.parse(xmlhttp.responseText);
    if (tab == "00") {allRGB_colors.o0_R = RGB_colors.R; allRGB_colors.o0_G = RGB_colors.G; allRGB_colors.o0_B = RGB_colors.B;}
    if (tab == "01") {allRGB_colors.o1_R = RGB_colors.R; allRGB_colors.o1_G = RGB_colors.G; allRGB_colors.o1_B = RGB_colors.B;}
    if (tab == "02") {allRGB_colors.o2_R = RGB_colors.R; allRGB_colors.o2_G = RGB_colors.G; allRGB_colors.o2_B = RGB_colors.B; rgbTabFrom.r = RGB_colors.R; rgbTabFrom.g = RGB_colors.G; rgbTabFrom.b = RGB_colors.B;}
    if (tab == "03") {allRGB_colors.o3_R = RGB_colors.R; allRGB_colors.o3_G = RGB_colors.G; allRGB_colors.o3_B = RGB_colors.B;}
    if (tab == "04") {allRGB_colors.o4_R = RGB_colors.R; allRGB_colors.o4_G = RGB_colors.G; allRGB_colors.o4_B = RGB_colors.B;}
    if (tab == "05") {allRGB_colors.o5_R = RGB_colors.R; allRGB_colors.o5_G = RGB_colors.G; allRGB_colors.o5_B = RGB_colors.B;}
    if (tab == "06") {allRGB_colors.o6_R = RGB_colors.R; allRGB_colors.o6_G = RGB_colors.G; allRGB_colors.o6_B = RGB_colors.B;}
}
function loadActiveLanguages(){
    xmlhttp = xmlRequest();
    //xmlhttp = new XMLHttpRequest();
    xmlhttp.open('get', 'getFields.php?lang='+ siteLang +'&subject=languages', false);
    xmlhttp.send(null);
    var result = {};
    result = JSON.parse(xmlhttp.responseText);
    $S('flag_en').display = (result.EN == 'on') ? 'block' : 'none';
    $S('flag_de').display = (result.DE == 'on') ? 'block' : 'none';
    $S('flag_fr').display = (result.FR == 'on') ? 'block' : 'none';
    $S('flag_za').display = (result.ZA == 'on') ? 'block' : 'none';
    $S('flag_nl').display = (result.NL == 'on') ? 'block' : 'none';
    $S('flag_it').display = (result.IT == 'on') ? 'block' : 'none';
}

function xmlRequest(){
   try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	    try {
		    xmlhttp = new XMLHttpRequest();
	    } catch (e) {
		    xmlhttp=false;
	    }
    }
    if (!xmlhttp && window.createRequest) {
	    try {
		    xmlhttp = window.createRequest();
	    } catch (e) {
		    xmlhttp=false;
	    }
    }
    return xmlhttp;
}
// -------------------- sets the sites currnet language ------------------------
//
function setLang(lang){
    siteLang=lang;
    fillContentPanes();
    if (!activeTab) activeTab='tab_02';
    if (activeTab=='tab_00') tab_00();
    else if (activeTab=='tab_01') tab_01();
    else if (activeTab=='tab_02') tab_02();
    else if (activeTab=='tab_03') tab_03();
    else if (activeTab=='tab_04') tab_04();
    else if (activeTab=='tab_05') tab_05();
    else if (activeTab=='tab_06') tab_06();
}
//
// ---------------- END sets the sites currnet language ------------------------

// ---------------- calling one of the content red tabs ------------------------
//
function tab_00(){                                       // movie tab
    activeTab = 'tab_00';
    var rgbTabTo = {"r":allRGB_colors.o0_R, "g":allRGB_colors.o0_G, "b":allRGB_colors.o0_B};
    InitiateColourChange(rgbTabTo);   // color change                              // color change
    var html =    "<div id=\"player_frame\" style=\"z-index: 1; position:absolute; left:10px; top:10px; width:358px; height:227px; background-image:url(../images/mov_player_bckg.png)\">";
    html = html + "<div id=\"player\" style=\"z-index: 1; position:absolute; left:6px; top:6px; width=358px; height=227px; display:none;\">";
    html = html + "<object width=\"358\" height=\"227\">";
	html = html + "<param name=\"movie\" value=\"../movies/player.swf?file=../movies/Sint_en_DKF.flv&volume=35\"></param>";
	html = html + "<embed type=\"application/x-shockwave-flash\" src=\"../movies/player.swf?file=../movies/Sint_en_DKF.flv&volume=35\" allowFullScreen=\"true\" width=\"345\" height=\"200\"></embed>";
    html = html + "</object>";
    html = html + "</div>";
    html = html + "</div>";
    html = html + "<div id=\"slider\" style=\"position:absolute; left:0px; top:245px; width:379px; height:69px; overflow: hidden; \">";     //start of slider
    html = html + "   <div id=\"movieBlock_01\" onClick=\"changeMovie('cuddle_company')\" onMouseOver=\"changeMovieBlockBackImg('01','over')\" onMouseOut=\"changeMovieBlockBackImg('01','out')\" style=\"position: relative; left:10px; width:167px; height: 69px; background-image:url(images/mov_thmb_back_out.png)\">";
    html = html + "      <div id=\"movieThumb_01\" style=\"position:absolute; left:5px; top:5px; width:61px; height: 59px; background-image:url(../movies/cuddle_company.gif)\"></div>";
    html = html + "      <div id=\"movieName_01\" style=\"position:absolute; left:80px; top:12px; width:61px; height: 59px; font-family: arial; font-size: 13px;\">knuffelfabriek</div>";
    html = html + "   </div>";
    html = html + "   <div id=\"movieBlock_02\" onClick=\"changeMovie('Sint_en_DKF')\" onMouseOver=\"changeMovieBlockBackImg('02','over')\" onMouseOut=\"changeMovieBlockBackImg('02','out')\" style=\"position: relative; left:182px; top:-69px; width:167px; height: 69px; background-image:url(images/mov_thmb_back_out.png)\">";
    html = html + "      <div id=\"movieThumb_02\" style=\"position:absolute; left:5px; top:5px; width:61px; height: 59px; background-image:url(../movies/Sint_en_DKF.gif)\"></div>";
if (siteLang=="EN") html = html + "      <div id=\"movieName_02\" style=\"position:absolute; left:80px; top:12px; width:81px; height: 59px; font-family: arial; font-size: 13px;\">Sinterklaas</div>";
if (siteLang=="NL") html = html + "      <div id=\"movieName_02\" style=\"position:absolute; left:80px; top:12px; width:61px; height: 59px; font-family: arial; font-size: 13px;\">Sinterklaas</div>";
    html = html + "   </div>";
    //html = html + "   <div id=\"movieBlock_03\" onClick=\"changeMovie('aperitivo')\" onMouseOver=\"changeMovieBlockBackImg('03','over')\" onMouseOut=\"changeMovieBlockBackImg('03','out')\" style=\"position: relative; left:354px; top:-138px; width:167px; height: 69px; background-image:url(images/mov_thmb_back_out.png)\">";
    //html = html + "      <div id=\"movieThumb_03\" style=\"position:absolute; left:5px; top:5px; width:61px; height: 59px; background-image:url(../movies/aperitivo.gif)\"></div>";
    //html = html + "      <div id=\"movieName_03\" style=\"position:absolute; left:80px; top:12px; width:61px; height: 59px; font-family: arial; font-size: 13px;\">aperitivo</div>";
    //html = html + "   </div>";
    html = html + "</div>";                  //end of slider
    xmlhttp = xmlRequest();
    xmlhttp.open('get', 'getMovies.php?&lang=' + siteLang, false);
    xmlhttp.send(null);

    var contentsDiv = new getObj('content_00');
    //contentsDiv.obj.innerHTML = html;
    contentsDiv.obj.innerHTML = Url.decode(xmlhttp.responseText);
    new CursorDivScroll('slider', 300, 40);
    setSubContents("tab_00");
    moveIntoSight(0);
}
function changeMovie(movie){
    $('player').innerHTML = "<object width=\"358\" height=\"227\"><param name=\"movie\" value=\"http://www.tcc.brizp.com/movies/player.swf?file=http://www.tcc.brizp.com/movies/"+movie+".flv&volume=35\"></param><embed type=\"application/x-shockwave-flash\" src=\"http://www.tcc.brizp.com/movies/player.swf?file=http://www.tcc.brizp.com/movies/"+movie+".flv&volume=35\" allowFullScreen=\"false\" width=\"345\" height=\"200\"></embed></object>";
}
function changeMovieBlockBackImg(item, inout){
    $S('movieBlock_'+item).backgroundImage = "url(images/mov_thmb_back_"+inout+".png)";
}

function tab_01(){
    var currentTab = activeTab.substring(activeTab.length-2);
    if (currentTab=="00") $('player').innerHTML = "";
    var tabsToMove = 1 - currentTab;
    activeTab = 'tab_01';
    var rgbTabTo = {"r":allRGB_colors.o1_R, "g":allRGB_colors.o1_G, "b":allRGB_colors.o1_B};
    InitiateColourChange(rgbTabTo);   // color change
    setSubContents("tab_01");
    moveIntoSight(1);
}
function tab_02(){        // RED TAB 1
    //alert( $('content_02').innerHTML );
    $S('contact').display='none';
    $('coloringPictures').style.display='none';
    var currentTab = activeTab.substring(activeTab.length-2);
    if (currentTab=="00") $('content_00').innerHTML = "";
    var tabsToMove = 2 - currentTab;
    activeTab = 'tab_02';
    var rgbTabTo = {"r":allRGB_colors.o2_R, "g":allRGB_colors.o2_G, "b":allRGB_colors.o2_B};
    InitiateColourChange(rgbTabTo);   // color change
    setSubContents("tab_02");
    moveIntoSight(2);
}
function tab_03(){        // RED TAB 2
    //alert('r'+r);
    $('contact').style.display='none';
    $('coloringPictures').style.display='none';
    var currentTab = activeTab.substring(activeTab.length-2);
    if (currentTab=="00") $('player').innerHTML = "";
    var tabsToMove = 3 - currentTab;
    activeTab = 'tab_03';
    var rgbTabTo = {"r":allRGB_colors.o3_R, "g":allRGB_colors.o3_G, "b":allRGB_colors.o3_B};
    InitiateColourChange(rgbTabTo);   // color change
    setSubContents("tab_03");
    moveIntoSight(3);
}
function tab_04(){        // RED TAB 3
    $('contact').style.display='none';
    $('coloringPictures').style.display='none';
    var currentTab = activeTab.substring(activeTab.length-2);
    if (currentTab=="00") $('player').innerHTML = "";
    var tabsToMove = 4 - currentTab;
    activeTab = 'tab_04';
    var rgbTabTo = {"r":allRGB_colors.o4_R, "g":allRGB_colors.o4_G, "b":allRGB_colors.o4_B};
    InitiateColourChange(rgbTabTo);   // color change
    setSubContents("tab_04");
    moveIntoSight(4);
}
function tab_05(){        // RED TAB 4
    $('contact').style.display='none';
    $('coloringPictures').style.display='none';
    var currentTab = activeTab.substring(activeTab.length-2);
    if (currentTab=="00") $('player').innerHTML = "";
    var tabsToMove = 5 - currentTab;
    activeTab = 'tab_05';
    var rgbTabTo = {"r":allRGB_colors.o5_R, "g":allRGB_colors.o5_G, "b":allRGB_colors.o5_B};
    InitiateColourChange(rgbTabTo);   // color change
    setSubContents("tab_05");
    moveIntoSight(5);
}
function tab_06(){
    var currentTab = activeTab.substring(activeTab.length-2);
    if (currentTab=="00") $('player').innerHTML = "";
    var tabsToMove = 6 - currentTab;
    activeTab = 'tab_06';
    var rgbTabTo = {"r":allRGB_colors.o6_R, "g":allRGB_colors.o6_G, "b":allRGB_colors.o6_B};
    InitiateColourChange(rgbTabTo);   // color change
    setSubContents("tab_06");
    moveIntoSight(6);
}
function contact(){
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open('get', 'getFields.php?lang='+ siteLang +'&subject=contact', false);
    xmlhttp.send(null);
    var result = {};
    result = JSON.parse(xmlhttp.responseText);
    //result = Url.decode(xmlhttp.responseText);
    $('contactHeader').innerHTML=Url.decode(result.contactHeader);
    $('lblName').innerHTML = Url.decode(result.contactName);
    $('name').value="";
    $('lblEmail').innerHTML = Url.decode(result.contactEmail);
    $('email').value="";
    $('lblSubject').innerHTML = Url.decode(result.contactSubject);
    $('subject').value="";
    $('lblMessage').innerHTML = Url.decode(result.contactMessage);
    $('message').value="";
    $('lblVerify').innerHTML = Url.decode(result.contactVerify);
    $('verify').value="";
    $('lblRequired').innerHTML = Url.decode(result.contactRequired);
    $('message_submitted').value = Url.decode(result.contactSendMessage);
    $('siteLanguage').value = siteLang;
    $('contact').style.display='block';
}
function messageSubmitted(){
    var okName = true;
    var okMessage = true;
    var okEmail = true;
    var okVerify = true;
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open('get', 'getFields.php?lang='+siteLang+'&subject=contactMissing', false);
    var result = {};
    xmlhttp.send(null);
    result = JSON.parse(xmlhttp.responseText);
    if (!$('name').value) {
        $('lblNameReq').innerHTML= result.missing+' ';
        $S('lblNameReq').color='#f90101';
        okName = false;
      } else {
        $('lblNameReq').innerHTML='* ';
        $S('lblNameReq').color='#000000';
        okName = true;
    }
    if (!$('message').value) {
        $('lblMessageReq').innerHTML = result.missing+' ';
        $S('lblMessageReq').color='#f90101';
        okMessage = false;
      }else{
        $('lblMessageReq').innerHTML='* ';
        $S('lblMessageReq').color='#000000';
        okMessage = true;
    }
    var email=$('email').value;
    var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    if (!filter.test(email)) {
        if (email=='') $('lblEmailReq').innerHTML=result.missing+' '; else $('lblEmailReq').innerHTML=result.wrong+' ';
        $S('lblEmailReq').color='#f90101';
        okEmail = false;
      }else{
        $('lblEmailReq').innerHTML='* ';
        $S('lblEmailReq').color='#000000';
        okEmail = true;
    }
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open('get', 'verify.php?lang='+siteLang+'&captcha=' + $('verify').value, false);
    xmlhttp.send(null);
    var captcha = Url.decode(xmlhttp.responseText);
    if (captcha!='ok') {
        $('lblVerifyReq').innerHTML=captcha+' ';
        $S('lblVerifyReq').color='#f90101';
        okVerify = false;
      }else{
        $('lblVerifyReq').innerHTML='* ';
        $S('lblVerifyReq').color='#000000';
        okVerify = true;
    }
    if (okName==true && okMessage==true && okEmail==true && okVerify==true) {
        return true;
        }else{
        return false;
    }
}


function coloringPictures(picnr){
    $('coloringPictures').style.display='block';
    xmlhttp = new XMLHttpRequest();
    //alert('getColoringPictures.php?lang=' + siteLang + '&picnr='+picnr);
    xmlhttp.open('get', 'getColoringPictures.php?lang=' + siteLang + '&picnr='+picnr, false);
    xmlhttp.send(null);
    var html = Url.decode(xmlhttp.responseText);
    $('coloringPictures').innerHTML= html;
}

//
// ------------ END calling one of the content red tabs ------------------------


function fillContentPanes(){
    //fill pane 00
    for (i=1; i<=6; i++){
        setContents(i);
    }
}

// -------------------- fill the contents in the right language ----------------
//
function setContents(tabnr){
    var tab = 'tab_0' + tabnr;
    if (tabnr==1 || tabnr==2 || tabnr==3 || tabnr==4){                                    //
      $S('tab_0'+tabnr).backgroundImage = "url(images/tab_0"+tabnr+"_"+siteLang+".png)";  //  selects the right red tabs language
    }                                                                                     //
    xmlhttp = xmlRequest();
    //xmlhttp = new XMLHttpRequest();
    xmlhttp.open('get', 'getContents.php?lang=' + siteLang + '&id=' + tab, false);
    xmlhttp.send(null);
    var html = Url.decode(xmlhttp.responseText);
    //alert(html);
    $('content_0'+tabnr).innerHTML= html;
}
//
// ---------------- END fill the contents in the right language ----------------

// ------------- fill the sub contents (left) in the right language ------------
//
function setSubContents(tab){
    xmlhttp = xmlRequest();
    //xmlhttp = new XMLHttpRequest();
    xmlhttp.open('get', 'getSubContents.php?lang=' + siteLang + '&id=' + tab,false);
    xmlhttp.send(null);
    var html = Url.decode(xmlhttp.responseText);
    //
	var subContent = new getObj('subContent');
    subContent.obj.style.opacity = 1;
    subContent.obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    subContent.obj.style.filter = "alpha(Opacity=100)";
    //
	var subContent2 = new getObj('subContent2');
    subContent2.obj.style.opacity = 0;
    subContent2.obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    subContent2.obj.style.filter = "alpha(Opacity=0)";
    //
    subContent2.obj.innerHTML = html;
    //alert(html);
	fade('subContent');
    fade('subContent2');
}
//
// --------- END fill the sub contents (left) in the right language ------------


// ---------------------------------- image fades ------------------------------
// for more information see :
// http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
//
var TimeToFade = 1000.0;
function fade(eid){
	var element =  new getObj(eid);
  	if (element.obj.FadeState  == null) {                                       // case FadeState null
    	if (element.obj.style.opacity == null || element.obj.style.opacity+"" == '' || element.obj.style.opacity+"" == '1'){
      		element.obj.FadeState = 2;   //fully opaque
   	} else {
      		element.obj.FadeState = -2;  //fully transparent
    	}
  	}
  	if (element.obj.FadeState  == 1 || element.obj.FadeState == -1) {           // case FadeState -1 or 1
    	element.obj.FadeState = element.obj.FadeState == 1 ? -1 : 1;
    	element.obj.FadeTimeLeft = TimeToFade - element.obj.FadeTimeLeft;
  	} else {                                                                    // case FadeState not -1 null or 1
    	element.obj.FadeState = element.obj.FadeState == 2 ? -1 : 1;
        element.obj.FadeTimeLeft = TimeToFade;
    	setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  	}  
}
function  animateFade(lastTick, eid) {
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - lastTick;
	var element = new getObj(eid);
    var subContent = new getObj('subContent');
    var subContent2 = new getObj('subContent2');
    if (element.obj.FadeTimeLeft <= elapsedTicks) {      // ------------------ transition done ----------------------
        element.obj.style.opacity = element.obj.FadeState == 1 ? '1' : '0';
        element.obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity="+ element.obj.FadeState == 1 ? '100' : '0' +")";
    	element.obj.FadeState = element.obj.FadeState == 1 ? 2 : -2;
        if (subContent2.obj.innerHTML != ""){            //transfers active content to #1, #2 is cleared
            subContent.obj.innerHTML = subContent2.obj.innerHTML;
            //subContent2.obj.innerHTML="";
            subContent.obj.style.opacity = 1;
            subContent.obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            subContent2.obj.style.opacity = 0;
            subContent2.obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            subContent.obj.FadeState = 2;
            subContent2.obj.FadeState = -2;             //transparent
        }
    	return;
  	}
   	element.obj.FadeTimeLeft -= elapsedTicks;
    	var newOpVal = element.obj.FadeTimeLeft/TimeToFade;
  	if(element.obj.FadeState == 1) newOpVal = 1 - newOpVal;
	element.obj.style.opacity = newOpVal;
    //element.obj.filters.alpha.opacity = newOpVal*100;
    element.obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity="+ newOpVal*100 +")";
 	setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
//
// ------------------------------ end image fades ------------------------------

// -------------------- fades from one color to another ------------------------
//                  fades the border and the content color
//
function changecolour(newr, newg, newb) {
  var rstep = (newr - rgbTabFrom.r)/200;      //  -0.44=(24-111)/200    0.44=(111-24)/200
  var gstep = (newg - rgbTabFrom.g)/200;
  var bstep = (newb - rgbTabFrom.b)/200;
  times++;
  tempr = Math.round(parseInt(rgbTabFrom.r) + rstep * times);    //   24.44=111+(-0.44*199)  110.57=24+(0.44*199)
  tempg = Math.round(parseInt(rgbTabFrom.g) + gstep * times);
  tempb = Math.round(parseInt(rgbTabFrom.b) + bstep * times);
  if ((newr > rgbTabFrom.r && tempr < newr) || (newr < rgbTabFrom.r && tempr > newr)) {
     $S('contentFrame').backgroundColor = "rgb("+tempr+","+tempg+","+tempb+")";
     $S('xbL').borderColor = "rgb("+tempr+","+tempg+","+tempb+")";
     $S('xbR').borderColor = "rgb("+tempr+","+tempg+","+tempb+")";
     for (i=1; i<=6; i++){
        $S('xb' + i).background = "rgb("+tempr+","+tempg+","+tempb+")";
        $S('xb' + i + "b").background = "rgb("+tempr+","+tempg+","+tempb+")";
     }
     for (i=7; i<=21; i++){
        $S('xb' + i).borderLeftColor = "rgb("+tempr+","+tempg+","+tempb+")";
        $S('xb' + i).borderRightColor = "rgb("+tempr+","+tempg+","+tempb+")";
        $S('xb' + i + "b").borderLeftColor = "rgb("+tempr+","+tempg+","+tempb+")";
        $S('xb' + i + "b").borderRightColor = "rgb("+tempr+","+tempg+","+tempb+")";
     }
  } else {
    clearInterval(interv);
    rgbTabFrom.r = tempr;
    rgbTabFrom.g = tempg;
    rgbTabFrom.b = tempb;
  }
}

var TimeToChangeColour = 1000.0;
function InitiateColourChange(rgbTabTo){
    $('contentFrame').ChangeColourTimeLeft = TimeToChangeColour;
    setTimeout("ColourChange(" + new Date().getTime() + "," + rgbTabTo.r + "," + rgbTabTo.g +"," + rgbTabTo.b +")", 33);
}
function ColourChange(lastTick, TabToR, TabToG, TabToB) {
    var diffR = TabToR - parseInt(rgbTabFrom.r);
    var diffG = TabToG - parseInt(rgbTabFrom.g);
    var diffB = TabToB - parseInt(rgbTabFrom.b);
   	var curTick = new Date().getTime();
   	var elapsedTicks = curTick - lastTick;
    $('contentFrame').ChangeColourTimeLeft -= elapsedTicks;
   	var newOpVal = $('contentFrame').ChangeColourTimeLeft / TimeToChangeColour;
    var tempr = Math.round(TabToR - newOpVal * diffR);
    var tempg = Math.round(TabToG - newOpVal * diffG);
    var tempb = Math.round(TabToB - newOpVal * diffB);
    if ($('contentFrame').ChangeColourTimeLeft <= elapsedTicks || diffR==0){
        rgbTabFrom.r = TabToR;
        rgbTabFrom.g = TabToG;
        rgbTabFrom.b = TabToB;
        return;
        //alert('diffR '+ diffR);
    }
    // adjust colours:
    $S('contentFrame').backgroundColor = "rgb("+tempr+","+tempg+","+tempb+")";
    $S('xbL').borderColor = "rgb("+tempr+","+tempg+","+tempb+")";
    $S('xbR').borderColor = "rgb("+tempr+","+tempg+","+tempb+")";
    for (i=1; i<=6; i++){
        $S('xb' + i).background = "rgb("+tempr+","+tempg+","+tempb+")";
        $S('xb' + i + "b").background = "rgb("+tempr+","+tempg+","+tempb+")";
    }
    for (i=7; i<=21; i++){
        $S('xb' + i).borderLeftColor = "rgb("+tempr+","+tempg+","+tempb+")";
        $S('xb' + i).borderRightColor = "rgb("+tempr+","+tempg+","+tempb+")";
        $S('xb' + i + "b").borderLeftColor = "rgb("+tempr+","+tempg+","+tempb+")";
        $S('xb' + i + "b").borderRightColor = "rgb("+tempr+","+tempg+","+tempb+")";
    }
    setTimeout("ColourChange(" + new Date().getTime() + "," + TabToR + "," + TabToG +"," + TabToB +")", 33);
}
//
color={};
color.HEX_RGB=function(o){
	cnumR = parseInt(o.substring(0,2),16);
	cnumG = parseInt(o.substring(2,4),16);
	cnumB = parseInt(o.substring(4,6),16);
    //rgb.r = cnumR/255; rgb.g = cnumG/255; rgb.b = cnumB/255
    return({'r':cnumR/255, 'g':cnumG/255, 'b':cnumB/255});
    }
//
// ---------------- END fades from one color to another ------------------------

// ------------------------- text content slider -------------------------------
// the text content is position in an filmstrip div which is positioned
//
var TimeToMove = 1000.0;    //new
function moveIntoSight(tabToShow){
    var PosToGoTo = ( -379 * (tabToShow-1)) - 379;
    var contentSlide = new getObj('contentSlide');
    //if (! $S('contentSlide').left) $S('contentSlide').left = 0 + 'px';
    if (!contentSlide.obj.style.left) contentSlide.obj.style.left = -379 + 'px';
    var currentPos = stripPx(contentSlide.obj.style.left);
    $('contentSlide').MoveTimeLeft = TimeToMove;
    $('contentSlide').DistanceToTravel = PosToGoTo - currentPos;
    setTimeout("MoveContent(" + new Date().getTime() +", "+ PosToGoTo +")", 33);
}
function MoveContent(lastTick,PosToGoTo) {
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - lastTick;
    var currentPos = stripPx($S('contentSlide').left);
    $('contentSlide').MoveTimeLeft -= elapsedTicks;
  	var newOpVal = $('contentSlide').MoveTimeLeft / TimeToMove;
    var StillToMove = newOpVal * $('contentSlide').DistanceToTravel;
    if ($('contentSlide').MoveTimeLeft <= elapsedTicks || StillToMove==0){
        $S('contentSlide').left = PosToGoTo + 'px';
        if (activeTab=="tab_00") $S('player').display = 'block';
        return;
    }
    currentPos = PosToGoTo - StillToMove;
    $S('contentSlide').left = currentPos + 'px';
    setTimeout("MoveContent(" + curTick + ",'" + PosToGoTo + "')", 33);
}
//
// --------------------- END text content slider -------------------------------


// --------------------- control of red tabs movements -------------------------
//
var TabsStartPos=760;
var bouncespeed=20;
//       this one is because the tabs sometimes remain pulled out
function bodyMouseover(){
   	for (i=1; i<=4; i++){
        //alert('tab_0'+i);
        var tab = new getObj('tab_0'+i);
        if (!tab.obj.style.left) tab.obj.style.left = TabsStartPos + "px";
        var tabPos = stripPx(tab.obj.style.left);
        //alert('tabPos '+ tabPos);
        if (tabPos > TabsStartPos) {
            //alert('tab '+ i +'staat uit, '+ 'tabPos '+tabPos+' TabsStartPos '+TabsStartPos);
        	movebuttonIn('tab_0'+i, tabPos);
        }
    }
}
// END   this one is because the tabs sometimes remain pulled out
// initiates the outward movement
function movebuttonOut(item){
    var tomove=14;
    StartBigMoveRight(item, TabsStartPos,tomove);
}
// initiates the inward movement
function movebuttonIn(item){
    //alert('move in');
    var tab = new getObj(item);
    var endpos = tab.obj.offsetLeft;
    StartBigMoveLeft(item, endpos);
}
//    every move consists of three parts:
//    big move one way,                     ---------->
//    small move the other way,                     <--
//    and small move back again                     -->
var moving;
moving="";
//-------------------------- move out ------------------------------------------
function StartBigMoveRight(item, TabsStartPos,tomove) {                             // initiate big move out
 if (moving=="") {
   moving="true";
   BMR = setInterval("BigMoveRight('"+item+"',"+TabsStartPos+","+tomove+")", bouncespeed);
   }
}
function BigMoveRight(item,TabsStartPos,tomove) {                                   // big move out ------->
  var tab = new getObj(item);
  var tab_cadre = new getObj(item+"_cadre");
  var pos = tab.obj.offsetLeft;
  if (pos < TabsStartPos + tomove) {
    pos = pos + 2;
    tab.obj.style.left = pos+'px';
    tab_cadre.obj.style.left = pos+'px';
  } else {
    BMR = clearInterval(BMR);
    moving="";
    StartSmallMoveLeft_RightBounce(item, pos,5)
  }
}
function StartSmallMoveLeft_RightBounce(item, TabsStartPos,tomove) {                // initiates small move in
 if (moving=="") {
   moving="true";
   SMRL = setInterval("SmallMoveLeft_RightBounce('"+item+"',"+TabsStartPos+","+tomove+")", bouncespeed*1.5);
   }
}
function SmallMoveLeft_RightBounce(item, TabsStartPos,tomove) {                     // small move in      <--
  var tab = new getObj(item);
  var tab_cadre = new getObj(item+"_cadre");
  var pos = tab.obj.offsetLeft;
  if (pos > TabsStartPos - tomove) {
    pos = pos - 2;
    tab.obj.style.left = pos+'px';
    tab_cadre.obj.style.left = pos+'px';
  } else {
    SMRL = clearInterval(SMRL);
    moving="";
    StartSmallMoveRight_RightBounce(item, pos,5)
  }
}
function StartSmallMoveRight_RightBounce(item, TabsStartPos,tomove) {               // initiates small move out
 if (moving=="") {
   moving="true";
   SMRR = setInterval("SmallMoveRight_RightBounce('"+item+"',"+TabsStartPos+","+tomove+")", bouncespeed*2);
   }
}
function SmallMoveRight_RightBounce(item, TabsStartPos,tomove) {                    // small move out     -->
  var tab = new getObj(item);
  var tab_cadre = new getObj(item+"_cadre");
  var pos = tab.obj.offsetLeft;
  if (pos < TabsStartPos + tomove) {
    pos = pos + 2;
    tab.obj.style.left = pos+'px';
    tab_cadre.obj.style.left = pos+'px';
 } else {
    SMRR = clearInterval(SMRR);
    moving="";
  }
}
//-------------------------- move in -------------------------------------------
function StartBigMoveLeft(item, endpos) {                                       // initiate big move in
 if (moving=="") {
   moving="true";
   SML = setInterval("BigMoveLeft('"+item+"',"+endpos+")", bouncespeed);
   }
}
function BigMoveLeft(item, endpos) {                                            // big move in <-------
  var tab = new getObj(item);
  var tab_cadre = new getObj(item+"_cadre");
  var pos = tab.obj.offsetLeft;
  if (pos > TabsStartPos) {
    pos = pos - 2;
    tab.obj.style.left = pos+'px';
    tab_cadre.obj.style.left = pos+'px';
  } else {
    SML = clearInterval(SML);
    moving="";
    StartSmallMoveRight_LeftBounce(item,pos,5)
  }
}
function StartSmallMoveRight_LeftBounce(item, pos, tomove) {                    // initiate small move out
 if (moving=="") {
   moving="true";
   SMLR = setInterval("SmallMoveRight_LeftBounce('"+item+"',"+tomove+")", bouncespeed*1.5);
   }
}
function SmallMoveRight_LeftBounce(item, tomove) {                              // small move out -->
  var tab = new getObj(item);
  var tab_cadre = new getObj(item+"_cadre");
  var pos = tab.obj.offsetLeft;
  if (pos < TabsStartPos + tomove) {
    pos = pos + 2;
    tab.obj.style.left = pos+'px';
    tab_cadre.obj.style.left = pos+'px';
  } else {
    SMLR = clearInterval(SMLR);
    moving="";
    StartSmallMoveLeft_LeftBounce(item, pos);
  }
}
function StartSmallMoveLeft_LeftBounce(item, pos,tomove) {                      // initiate small move in
 if (moving=="") {
   moving="true";
   SMLL = setInterval("SmallMoveLeft_LeftBounce('"+item+"',"+pos+")", bouncespeed*2);
   }
}
function SmallMoveLeft_LeftBounce(item, endpos) {                               // small move in  <--
  var tab = new getObj(item);
  var tab_cadre = new getObj(item+"_cadre");
  var pos = tab.obj.offsetLeft;
  if (pos > TabsStartPos) {
    pos = pos - 2;
    tab.obj.style.left = pos+'px';
    tab_cadre.obj.style.left = pos+'px';
  } else {
    SMLL = clearInterval(SMLL);
    moving="";
  }
}
//
// ----------------- END control of red tabs movements -------------------------


// ---------------------- Get document element by id ---------------------------
//
function getObj(name) {
  if (document.getElementById) {
  	this.obj = document.getElementById(name);
  }
  else if (document.all) {
	this.obj = document.all[name];
  }
  else if (document.layers) {
   	this.obj = document.layers[name];
  }
}
function $(v,o) {
    return((typeof(o)=='object'?o:document).getElementById(v));
}
function $S(o) {
    o=$(o);
    if(o) return(o.style);
}
//
// ------------------ END Get document element by id ---------------------------


function stripPx(item){
    var pxPos = item.search('px');
    result=0;
    if (pxPos > -1){
       result = parseInt(item.substring(0,pxPos));
    } else {
       result = parseInt(item);
    }
    return result;
}


var Url = {
	// public method for url encoding
	encode : function (string) {
		return escape(this._utf8_encode(string));
	},
	// public method for url decoding
	decode : function (string) {
        if (!string) return;
		return this._utf8_decode(unescape(string));
	},
	// private method for UTF-8 encoding
	_utf8_encode : function (string) {
		string = string.replace(/\r\n/g,"\n");
		var utftext = "";
		for (var n = 0; n < string.length; n++) {
			var c = string.charCodeAt(n);
			if (c < 128) {
				utftext += String.fromCharCode(c);
			}
			else if((c > 127) && (c < 2048)) {
				utftext += String.fromCharCode((c >> 6) | 192);
				utftext += String.fromCharCode((c & 63) | 128);
			}
			else {
				utftext += String.fromCharCode((c >> 12) | 224);
				utftext += String.fromCharCode(((c >> 6) & 63) | 128);
				utftext += String.fromCharCode((c & 63) | 128);
			}
		}
		return utftext;
	},
	// private method for UTF-8 decoding
	_utf8_decode : function (utftext) {
		var string = "";
		var i = 0;
		var c = c1 = c2 = 0;
		while ( i < utftext.length ) {
			c = utftext.charCodeAt(i);
			if (c < 128) {
				string += String.fromCharCode(c);
				i++;
			}
			else if((c > 191) && (c < 224)) {
				c2 = utftext.charCodeAt(i+1);
				string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
				i += 2;
			}
			else {
				c2 = utftext.charCodeAt(i+1);
				c3 = utftext.charCodeAt(i+2);
				string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
				i += 3;
			}
		}
		return string;
	}
}