// Javascript code for www.wieweb.com
// for IE4+, NS6 and Opera5 browsers

var windoww = 640, windowh = 480; // defaults

var mainindex=-1;
var selindex=-1;
var curselindex=-1;
var content = 'divLayoutText';
var ypos = 0;
var speed=5;

var scrolling = false;
var actief;

var mainx = 100;
var mainy = 75;
var mainw = 952;
var mainh = 600;
var rborder = 100;
var tborder = 40;

var normalcolor0 = "#BCC420"; var activecolor0 = "#D5DB7A";
var normalcolor1 = "#006336"; var activecolor1 = "#248B64";
var normalcolor2 = "#5D7FAF"; var activecolor2 = "#9EAFC7";
var normalcolor3 = "#BBDE6B"; var activecolor3 = "#CCDE9C";
var normalcolor4 = "#152E5D"; var activecolor4 = "#4E5E8F";
var normalcolor5 = "#6EBBA5"; var activecolor5 = "#A3D3C3";

var totalminwidth = 1000;

var firsttime = true;

ImgLogo=new Image();
ImgLogo.src="../img/logo.jpg";

ImgUpOn=new Image(220,30);
ImgUpOn.src="../img/up_over.gif";
ImgUpOff=new Image(220,30);
ImgUpOff.src="../img/up.gif";
ImgUpOff1=new Image(220,30);
ImgUpOff1.src="../img/up1.gif";

ImgDownOn=new Image(220,30);
ImgDownOn.src="../img/down_over.gif";
ImgDownOff=new Image(220,30);
ImgDownOff.src="../img/down.gif";
ImgDownOff1=new Image(220,30);
ImgDownOff1.src="../img/down1.gif";


function ShowPage(i) {
 selindex = i;
 mouseDown();
}
function ShowDelayed(i) {
 if(i<6) {
   document.getElementById("divSelect"+i).style.visibility = "visible";
   document.getElementById("divEmpty"+i).style.visibility = "visible";
 }
 else {
   document.getElementById("divLogo1").style.visibility = "visible";
 }
 i++;
 if(i<7) setTimeout("ShowDelayed("+i+")",75);
}
function InitialSize() {
 var w = 800;
 var h = 600;
 if((windoww<w)||(windowh<h)) { w=620; h=465;}
 var xo = (windoww-w)/2;
 var yo = (windowh-0.7*h-0.18*w)/2;
 for(var i=0; i<6; i++) {
   document.getElementById("divSelect"+i).style.visibility = "hidden";
   document.getElementById("divEmpty"+i).style.visibility = "hidden";
 }
 document.getElementById("divLogo1").style.visibility = "hidden";
 var divSel;
 divSel = document.getElementById("divSelect4").style;
 divSel.left = xo+0.08*w+"px";
 divSel.top = yo+0.10*h+"px";
 divSel.height = 0.78*h+"px";
 divSel.width = 0.83*w+"px";
 divSel = document.getElementById("divSelect0").style;
 divSel.left = xo+0.05*w+"px";
 divSel.top = yo+0.03*h+"px";
 divSel.height = 0.45*h+"px";
 divSel.width = 0.50*w+"px";
 divSel = document.getElementById("divSelect1").style;
 divSel.left = xo+0.40*w+"px";
 divSel.top = yo+0.06*h+"px";
 divSel.height = 0.50*h+"px";
 divSel.width = 0.48*w+"px";
 divSel = document.getElementById("divSelect2").style;
 divSel.left = xo+0.15*w+"px";
 divSel.top = yo+0.42*h+"px";
 divSel.height = 0.48*h+"px";
 divSel.width = 0.42*w+"px";
 divSel = document.getElementById("divSelect5").style;
 divSel.left = xo+0.20*w+"px";
 divSel.top = yo+0.18*h+"px";
 divSel.height = 0.35*h+"px";
 divSel.width = 0.30*w+"px";
 divSel = document.getElementById("divSelect3").style;
 divSel.left = xo+0.35*w+"px";
 divSel.top = yo+0.35*h+"px";
 divSel.height = 0.38*h+"px";
 divSel.width = 0.38*w+"px";
 divSel = document.getElementById("divLogo1").style;
 divSel.left = xo+0.33*w+"px";
 divSel.top = yo+0.29*h+"px";
 var lw = 0.33*w;
 var lh = 0.59*lw;
 divSel.height = lh+"px";
 divSel.width = lw+"px";
 ShowDelayed(0);
}
function GetWindowSize() {
  //if(document.body.clientWidth) { // IE4, IE5
  //  windoww = document.body.clientWidth;
  //  windowh = document.body.clientHeight;
  //}
  //else if(window.innerWidth) { // NS6, Opera
    windoww = parseInt(window.innerWidth);
    windowh = parseInt(window.innerHeight);
  //}
}
function WindowResized() {
  GetWindowSize();
  if(firsttime) InitialSize();
  else {
    for(var i=0; i<6; i++) RandomSelectPosition(i);
    PositionMain();
    LineUp();
    if(mainindex>=0) ShowMain(mainindex);
  }
}
function PositionMain() {
  // Due to the limitations of Opera the container width (mainw - 202 - rborder) has to
  // be 55% of the window width.
  var containerwidth = 0.55*windoww;
  var border = (windoww-containerwidth-222)/3;
  if(border<0) border = 0;
  mainx = border;
  mainy = 60 + 0.02*windowh;
  mainw = windoww - 2*border;
  mainh = windowh - mainy - 0.25*border;
  rborder = 20 + border;
  tborder = 10 + 0.4*border;
    var thediv;
    thediv = document.getElementById("divMain").style;
    thediv.left = mainx + "px";
    thediv.top = mainy + "px";
    thediv.height = mainh + "px";
    thediv.width = mainw + "px";
    thediv = document.getElementById("divLogo").style;
    thediv.left = containerwidth + "px";
    thediv.top = tborder + "px";
    thediv.height = mainh - 2*tborder + "px";
    thediv = document.getElementById("divUpControl").style;
    thediv.left = containerwidth + "px";
    thediv.top = tborder + "px";
    thediv.width = "20px";
    thediv = document.getElementById("divUpBar").style;
    thediv.left = "0px";
    thediv.top = tborder + "px";
    thediv.width = containerwidth + "px";
    thediv = document.getElementById("divDownControl").style;
    thediv.left = containerwidth + "px";
    thediv.top = mainh - 21 - tborder + "px";
    thediv.width = "20px";
    thediv = document.getElementById("divDownBar").style;
    thediv.left = "0px";
    thediv.top = mainh - 21 - tborder + "px";
    thediv.width = containerwidth + "px";
    thediv = document.getElementById("divContainer").style;
    thediv.top = tborder + "px";
    thediv.width = containerwidth + "px";
    thediv.height = mainh - 2*tborder + "px";
    thediv.clip = "rect(0 " + containerwidth + " " + (mainh - 2*tborder) + " 0)";
}
function GetObjectSizes() {
   if(document.getElementById("divEmpty0").offsetWidth) {
     totalminwidth = 0;
     for(var i=0; i<6; i++) {
       var w = document.getElementById("divEmpty" + i).offsetWidth + 2;
       document.getElementById("divSelect" + i).style.minWidth = w ;
       totalminwidth += w;
     }
   }
   else {
     for(var i=0; i<6; i++) document.getElementById("divSelect" + i).style.minWidth = 100;
     totalminwidth = 1200;
   }
}
function RandomSelectPosition(index) {
  width = 0.05*windoww;
  var divSelectStyle;
  if(document.all) divSelectStyle = document.all["divSelect" + index].style;
  else divSelectStyle = document.getElementById("divSelect" + index).style;
  if(index==0) { divSelectStyle.xfin = 0.1*windoww+width*Math.random(); }
  else {
    var divSelect1;
    divSelect1Style = document.getElementById("divSelect" + (index-1)).style;
    if(index==1) { divSelectStyle.xfin = 0.23*windoww+width*Math.random(); }
    if(index==2) { divSelectStyle.xfin = 0.36*windoww+width*Math.random(); }
    if(index==3) { divSelectStyle.xfin = 0.49*windoww+width*Math.random(); }
    if(index==4) { divSelectStyle.xfin = 0.62*windoww+width*Math.random(); }
    if(index==5) { divSelectStyle.xfin = 0.75*windoww+width*Math.random(); }
    if(totalminwidth<0.9*windoww) {
      if(divSelectStyle.xfin < divSelect1Style.xfin + parseInt(divSelect1Style.minWidth))
        divSelectStyle.xfin = divSelect1Style.xfin + parseInt(divSelect1Style.minWidth);
    }
  }
  divSelectStyle.yfin = 0.05*windowh*Math.random();
  divSelectStyle.hfin = mainy+0.1*windowh*Math.random();
}
function abs(x) {
  if(x<0) x=-x;
  return(x);
}
function MoveSelectDiv(index) {
  // Move SelectDiv
  var thediv;
    thediv = document.getElementById("divSelect" + index).style;
    thediv.left   = parseInt(thediv.xfin) + "px";
    thediv.top    = parseInt(thediv.yfin) + "px";
    thediv.height = parseInt(thediv.hfin) + "px";
    thediv.width  = parseInt(thediv.minWidth) + windoww/10 + "px";
}
function mouseDown() {
  if(selindex<0) return;
  if(firsttime) {
    document.getElementById("divLogo1").style.visibility = 'hidden';
    for(var i=0; i<6; i++) {
      document.getElementById("divSelect" + i).style.visibility = "hidden";
      document.getElementById("divEmpty" + i).style.visibility = "hidden";
      document.getElementById("divSelect" + i).style.zIndex = i;
    }
    document.getElementById("divMain").style.zIndex = 6;
    // Initial positions of Select div's:
    for(var i=0; i<6; i++) RandomSelectPosition(i);
    LineUp();
    for(var i=0; i<6; i++) {
      document.getElementById("divEmpty" + i).style.left = "0px";
      document.getElementById("divEmpty" + i).style.top = "0px";      
      document.getElementById("divSelect" + i).style.visibility = "visible";
      document.getElementById("divEmpty" + i).style.visibility = "visible";
    }
    // Calculate position of divMain:
    PositionMain();
    firsttime = false;
  }
  if(selindex>=0) {
    // Hide divMain
    document.getElementById("divContainer").style.visibility = "hidden";
    document.getElementById(content).style.visibility = "hidden";
    document.getElementById("divMain").style.visibility = "hidden";
    // Current select div should become visible and move to it's
    // place in the row:
    if(mainindex>=0) {
      var divSelect;
      divSelect = document.getElementById("divSelect" + mainindex);
      divSelect.style.left   = mainx + "px";
      divSelect.style.top    = mainy + "px";
      divSelect.style.height = mainh + "px";
      divSelect.style.width  = mainw + "px";
      divSelect.style.visibility = "visible";
      document.getElementById("divEmpty" + mainindex).style.visibility = "visible";
      // Calculate new position:
      RandomSelectPosition(mainindex);
      // Animate to new position:
      LineUp();
    }
    // Move page #selindex to main after 300ms:
    setTimeout("ShowMain("+selindex+")",300);
  }
}
function Select(index) {
  if(selindex==index) return;
  selindex = index;
  setTimeout("UpdateSelection()",50);
}
function Deselect(index) {
  if(selindex<0) return;
  selindex = -1;
  setTimeout("UpdateSelection()",50);
}
function UpdateSelection() {
  if(curselindex==selindex) return;
  var divSelectStyle;
  if(curselindex>=0) {
    divSelectStyle = document.getElementById("divSelect" + curselindex).style;
    if(divSelectStyle.backgroundColor) divSelectStyle.backgroundColor = eval("normalcolor" + curselindex);
    else divSelectStyle.background = eval("normalcolor" + curselindex);
  }
  if(selindex>=0) {
    divSelectStyle = document.getElementById("divSelect" + selindex).style;
    if(divSelectStyle.backgroundColor) divSelectStyle.backgroundColor = eval("activecolor" + selindex);
    else divSelectStyle.background = eval("activecolor" + selindex);
  }
  curselindex = selindex;
}
function LineUp() {
  document.getElementById("divMain").style.visibility = "hidden";
  MoveSelectDiv(0);
  MoveSelectDiv(1);
  MoveSelectDiv(2);
  MoveSelectDiv(3);
  MoveSelectDiv(4);
  MoveSelectDiv(5);
}
function ShowMain(selindex) {
  // Make selindex the current page
  // First hide the corresponding button (divMain is already hidden):
  var divSelectStyle;
  divSelectStyle = document.getElementById("divSelect" + selindex).style;
  document.getElementById("divEmpty" + selindex).style.visibility = "hidden";
  divSelectStyle.visibility = "hidden";
  // Store index and content-div:
  mainindex = selindex;
  if(selindex==0) content = 'divCompInfoText';
  if(selindex==1) content = 'divLayoutText';
  if(selindex==2) content = 'divOtherText';
  if(selindex==3) content = 'divSupportText';
  if(selindex==4) content = 'divDownloadText';
  if(selindex==5) content = 'divLinksText';
  // Set scroll position to 0:
  ypos = 0;
  // Initialize properties:
  document.getElementById(content).style.top = "0px";
  document.getElementById(content).style.width = mainw - 212 - rborder + "px";
  document.getElementById(content).style.height = mainh - 2*tborder + "px";
  // Adjust size and color of divMain and other div's inside it:
  document.getElementById("divMain").style.backgroundColor = eval("normalcolor" + selindex);
  // Show everything:
  document.getElementById("divMain").style.visibility = "visible";
  document.getElementById("divContainer").style.visibility = "visible";
  document.getElementById(content).style.visibility = "visible";
  // UpDown scroll buttons
  UpDownActivate();
}
function Initialize() {
  firsttime=true;
  // React on mouse down events:
  document.onmousedown = mouseDown;
  // Get the size of the window:
  GetWindowSize();
  // Get size of objects:
  GetObjectSizes();
  // Set size of objects:
  InitialSize();
  // Browser dependent part:
  // Disable text selection if not appropriate:
  for(var i=0; i<6; i++) {
    var divSelect = document.getElementById("divSelect" + i);
    divSelect.onselectstart = function(){return false};
  }
  document.getElementById("divLogo").onselectstart = function(){return false};
  document.getElementById("divUpControl").onselectstart = function(){return false};
  document.getElementById("divDownControl").onselectstart = function(){return false};
  WindowResized();
}
// Up/down buttons:
function UpActive() { document['up_button'].src = ImgUpOn.src; }
function UpInactive() { document['up_button'].src = ImgUpOff.src; }
function UpInactive1() { document['up_button'].src = ImgUpOff1.src; }
function DownActive() { document['down_button'].src = ImgDownOn.src; }
function DownInactive() { document['down_button'].src = ImgDownOff.src; }
function DownInactive1() { document['down_button'].src = ImgDownOff1.src; }
// Scrolling:
function MoveAreaDown() {
  var maxy = 2000;
  if(document.all) {
    if(document.all[content].clientHeight) maxy = document.all[content].clientHeight - document.all["divContainer"].clientHeight;
  }
  if(ypos > -maxy) {
    DownActive();
    ypos -= 8;
    document.getElementById(content).style.top = ypos + "px";
    if(scrolling) {
      clearInterval(actief);
      scrolling = false;
    }
    actief = setInterval("MoveAreaDown()",speed);
    scrolling = true;
  }
  else {
    DownInactive1();
    if(ypos<0) { UpInactive(); }
    else { UpInactive1(); }
  }
}
function MoveAreaUp(){
  var maxy = 2000;
  if(document.all) {
    if(document.all[content].clientHeight) maxy = document.all[content].clientHeight - document.all["divContainer"].clientHeight;
  }
  if(ypos<0) {
    UpActive(); 
    ypos += 8;
    document.getElementById(content).style.top = ypos + "px";
    if(scrolling) {
      clearInterval(actief);
      scrolling = false;
    }
    actief = setInterval("MoveAreaUp()",speed);
    scrolling = true;
  }
  else {
    UpInactive1();
    if(ypos > -maxy) { DownInactive(); }
    else { DownInactive1(); }
  }
}
function StopScroll() {
  clearInterval(actief);
  scrolling = false;
  UpDownActivate();
}
function UpDownActivate() {
  var maxy = 2000;
  if(document.all) {
    if(document.all[content].clientHeight) maxy = document.all[content].clientHeight - document.all["divContainer"].clientHeight;
  }
  if(ypos<0) { UpInactive(); }
  else { UpInactive1(); }
  if(ypos > -maxy) { DownInactive(); }
  else { DownInactive1(); }
}
// Larger picture:
function LargePicture() {
  largewin = window.open('','','height=650,width=800');
  largewin.document.open('text/html');
  largewin.document.write('<HTML><HEAD><TITLE>CleWin Main Window</TITLE></HEAD><BODY BGCOLOR="#F7F6EF" TEXT="#000066" LINK="#000066">');
  largewin.document.write('<CENTER><IMG SRC="../img/clewinmainwindow.jpg"><BR>');
  largewin.document.write('<A href="javascript:self.close();">(close)</A></CENTER></BODY></HTML>');
  largewin.document.close();
  largewin.focus();
}