// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// circus elleboog, e-line websolutions 
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// navigation level 1

function changeBackground( id, title )
{
  $( "menu_" + id ).src = "/shared/images/buttons/btn_" + title + "_10_over.jpg";
}

function changeBackgroundBack( id, title )
{
  $( "menu_" + id ).src = "/shared/images/buttons/btn_" + title + "_10.jpg";
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// elleboog 60

function closeMenu()
{
  new Effect.Fade('arrowup');
  new Effect.Fade('60menudiv',          {duration:0.3});
  new Effect.Morph($('elleboog60menu'), {style:{height:"49px"}}, {duration: 0.5 });    
  $('elleboog60menu').style.cursor      = "pointer";
  
  setTimeout("$('elleboog60menu').onmouseover = openMenu",300);
}

function openMenu()
{
  new Effect.Morph($('elleboog60menu'), {style:{height:"350px"}}, {duration: 0.5 });    
  new Effect.Appear('60menudiv',        {queue:'end', duration:0.3});
  new Effect.Appear('arrowup',          {queue:'end'});
  $('elleboog60menu').style.cursor      = "default";
  $('elleboog60menu').onmouseover       = "";
}

function menuMouseOver(div)
{
  $(div).style.backgroundColor          = '#763963'; 
  $(div).style.color                    = '#FFFFFF';
}
 function menuMouseOut(div)
{
  $(div).style.backgroundColor          = ''; 
  $(div).style.color                    = '#763963';
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// homepage

function startEffects()
{
 setTimeout("startFotos()", 1000);       
  
  /* [] 5/30/2008 setTimeout("dissableGif()", 5000); */
}

function startFotos()
{
  new Effect.Appear('homepage01', {duration: 1.0 });
   setTimeout("doMotion()", 2500);
}




function doMotion()
{
  new Effect.Appear('homepage03', {duration: 1.0 });
  new Effect.Morph($('homepage03'),    {style:{left:"90px"}}, {duration: .5 });
  new Effect.Morph($('balk_oranje'),    {style:{left:"200px"}}, {duration: .5 });
  new Effect.Morph($('balk_groen'),     {style:{left:"180px"}}, {duration: 4 });
  new Effect.Appear('vlak_blauw',       {duration: 1.0, to:0.7 });
  new Effect.Morph($('vlak_blauw'),     {style:{left:"0px"}},   {duration: 2 });  
  
  setTimeout("stap2()", 900);           
}

function stap2()
{
  new Effect.Morph($('balk_groen'),     {style:{left:"20px"}}, {duration: 4.4 });
  new Effect.Morph($('balk_oranje'),    {style:{left:"0px"}}, {duration: 1 });
  new Effect.Fade('balk_oranje',        {duration: 1.0 });      
  
  setTimeout("stap3()", 1050); 
}

function stap3()
{
  new Effect.Appear('homepage05',       {duration: 1.0 });
  new Effect.Morph($('homepage05'),     {style:{top:"225px"}}, {duration: 1 });
  new Effect.Morph($('balk_groen'),     {style:{left:"200px"}}, {duration: 1 });
  new Effect.Fade('balk_groen',         {duration: 1.0 });
  
  setTimeout("stap4()", 500); 
}      

function stap4()
{
  new Effect.Appear('textDiv',          {duration: 1.0 });
  setTimeout("stap5()", 4000); 
}

function stap5()
{
  new Effect.Fade('homepage01',         {duration: 1.5 });
  new Effect.Appear('homepage02',       {duration: 1.5, queue: 'end'});
  setTimeout("stap6()", 1600); 
}

function stap6()
{
  new Effect.Fade('homepage03',         {duration: 1.5 });
  new Effect.Appear('homepage04',       {duration: 1.5, queue: 'end' });  
  setTimeout("stap7()", 1600); 
}

function stap7()
{
  new Effect.Fade('homepage05',         {duration: 1.5 });
  new Effect.Appear('homepage06',       {duration: 1.5, queue: 'end' }); 
  setTimeout("stap8()", 1600); 
}

function stap8()
{
 
  setTimeout("stap9()", 4000); 
}

function stap9()
{
  new Effect.Fade('homepage02',         {duration: 1.5 });
  new Effect.Appear('homepage01',       {duration: 1.5, queue: 'end' });
  setTimeout("stap10()", 1600); 
}

function stap10()
{
  new Effect.Fade('homepage04',         {duration: 1.5 });
  new Effect.Appear('homepage03',       {duration: 1.5, queue: 'end' });  
  
  setTimeout("stap11()", 1600); 
}

function stap11()
{
  new Effect.Fade('homepage06',         {duration: 1.5 });
  new Effect.Appear('homepage05',       {duration: 1.5, queue: 'end' }); 
  
  setTimeout("stap12()", 1600); 
}

function stap12()
{
   
  setTimeout("stap5()", 4000); 
}

function dissableGif()
{
  $('circelGif').style.display          = "none";
  $('circelPng').style.display          = "block";        
}
      

function changeBackgroundColor()
{
  if( $('body').style.backgroundColor == "white")
    $('body').style.backgroundColor     = "#ffff00";
  else
    $('body').style.backgroundColor     = "white";
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// fotos
width = 0;
height = 400;
a = 0;
var offsetH = 0;

  
function showLarge( imgUrl, title, width, author, original, channelLink)
{
  if(  $('main').offsetHeight > 700 )
  {
    offsetH                               = $('main').offsetHeight + 189;
    offsetMargin                          = offsetH + 600;
    $('allblack').style.height            = offsetH + "px";
  }
  else
  {
    offsetH =  0 - height;
    offsetMargin = offsetH;
  }
  width = width + 40;
  document.getElementsByTagName('html')[0].style.overflow = "hidden";
  $('allblack').style.display           = "block";
  $('imagesGoHere').style.display       = "block";
  
  div                                   = document.createElement( "div" );
  div.style.height                      = (height + 70) + "px";
  div.style.width                       = width + "px";
  div.style.backgroundColor             = "white";
  div.style.position                    = "relative";
  div.style.left                        = "50%";
  div.style.top                         = "45%";
  div.style.marginLeft                  = - (width / 2) + "px";
  div.style.marginTop                   = (offsetMargin / 2) + "px";
  
  closeKruis                            = document.createElement( "div" );
  closeKruis.style.height               = "20px";
  closeKruis.style.width                = width + "px";
  
  imgClose                              = document.createElement( "img" );
  imgClose.src                          = _js_webroot + "/shared/images/closekruis4.jpg";
  imgClose.style.cssFloat               = "right";
  imgClose.style.styleFloat             = "right";
  imgClose.style.marginTop              = "2px";
  imgClose.style.cursor                 = "pointer";
  imgClose.onclick                      = closeDivs;
  
  img                                   = document.createElement( "img" );
  img.src                               = imgUrl;
  img.style.margin                      = "20px";
  img.style.marginTop                   = "0px";
  img.style.marginBottom                = "10px";
  
  closeKruis.appendChild( imgClose );
  div.appendChild( closeKruis );
  div.appendChild( img );
  $( 'imagesGoHere').appendChild( div );
  
  fillInfo( author, original, width, channelLink, title)
}

function fillInfo( author, original, width, channelLink, title )
{
  divInfo                               = document.createElement( "div" );
  divInfo.style.width                   = ( width - 40 )+ "px";
  divInfo.style.marginLeft              = "20px";
  divInfo.style.textAlign               = "center";
  divInfo.innerHTML                     = "<span style='color:#61B4E8; font-weight:bold;'>" + title + "</span>";
  
  div.appendChild( divInfo );
}

function closeDivs()
{ 
  $( 'imagesGoHere').innerHTML          = "";
  
  document.getElementsByTagName('html')[0].style.overflow = "auto";
  new Effect.Fade('imagesGoHere',       {duration: 0.1}) 
  new Effect.Fade('allblack',           {duration: 0.1})
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/* [] 26-8-2008 
  | <a href='" + channelLink + "'>Flickr serie </a> 
  <br /> <img src='http://www.telefoonboek.nl/images/searchprofile/partner_flickr.jpg' style='margin-top:5px;' />
  <br /> <a href='" + original + "' style='font-weight:bold;' >Originele foto</a> <br />Foto door: " + author
 */