// BEGIN - CLEAR TIMEOUT FUNCTION
var timeOuts= new Array(); 
image_url= new Array();
name_url= new Array();

function clearAllTimeouts() {   
  for(key in timeOuts ) {   
    clearTimeout(timeOuts[key]);   
  }   
}  
// END - CLEAR TIMEOUT FUNCTION
function load_links(name1,link1,name2,link2,name3,link3,name4,link4,name5,link5){
	image_url[1]=link1;
	image_url[2]=link2;
	image_url[3]=link3;
	image_url[4]=link4;
	image_url[5]=link5;
	name_url[1]=name1;
	name_url[2]=name2;
	name_url[3]=name3;
	name_url[4]=name4;
	name_url[5]=name5;
	load_images();fade_bottom_block();total_appear(1,2);
}

// BEGIN - DRAW CONTROL BAR
function load_controls(etalage_imgs) {
  document.getElementById('carrousel').innerHTML += '<input type="hidden" id="val_prev_img" /><input type="hidden" id="val_next_img" /><div id="appear_div"><a id="img_link" href="http://www.tuinland.nl">Tuinland.nl</a></div>';
  //document.getElementById('carrousel').innerHTML += '<div id="carrousel_bottom"><ul id="control"><li style=""><a id="control_1" onclick="load_img(\'/images/carousel/img1.jpg\');" href="#">1</a></li><li><a id="control_2" onclick="load_img(\'/images/carousel/img2.jpg\');" href="#">2</a></li><li><a id="control_3" onclick="load_img(\'/images/carousel/img3.jpg\');" href="#">3</a></li><li><a id="control_4" onclick="load_img(\'/images/carousel/img4.jpg\');" href="#">4</a></li><li><a id="control_5" onclick="load_img(\'/images/carousel/img5.jpg\');" href="#">5</a></li></ul></div>';
  if (etalage_imgs == 4){
	document.getElementById('carrousel').innerHTML += '<div id="carrousel_bottom"><ul id="control"><li style=""><a id="control_1" onclick="load_img(\'1\');" href="javascript: void(0)">1</a></li><li><a id="control_2" onclick="load_img(\'2\');" href="javascript: void(0)">2</a></li><li><a id="control_3" onclick="load_img(\'3\');" href="javascript:void(0)">3</a></li><li><a id="control_4" onclick="load_img(\'4\');" href="javascript:void(0)">4</a></li></ul></div>';
  }
  if (etalage_imgs == 5){
	document.getElementById('carrousel').innerHTML += '<div id="carrousel_bottom"><ul id="control"><li style=""><a id="control_1" onclick="load_img(\'1\');" href="javascript:void(0)">1</a></li><li><a id="control_2" onclick="load_img(\'2\');" href="javascript:void(0)">2</a></li><li><a id="control_3" onclick="load_img(\'3\');" href="javascript:void(0)">3</a></li><li><a id="control_4" onclick="load_img(\'4\');" href="javascript:void(0)">4</a></li><li><a id="control_5" onclick="load_img(\'5\');" href="javascript:void(0)">5</a></li></ul></div>';
  }
  /*if (etalage_imgs == 4){
	document.getElementById('carrousel').innerHTML += '<li><a id="control_4" onclick="load_img(\'/images/carousel/img4.jpg\');" href="#">4</a></li>';
  }
  if (etalage_imgs == 5){
	document.getElementById('carrousel').innerHTML += '<li><a id="control_4" onclick="load_img(\'/images/carousel/img4.jpg\');" href="#">4</a></li><li><a id="control_5" onclick="load_img(\'/images/carousel/img5.jpg\');" href="#">5</a></li>';
  }
  document.getElementById('carrousel').innerHTML += '<li><a id="control_4" onclick="load_img(\'/images/carousel/img4.jpg\');" href="#">4</a></li><li><a id="control_5" onclick="load_img(\'/images/carousel/img5.jpg\');" href="#">5</a></li>';
  document.getElementById('carrousel').innerHTML += '</ul></div>';*/
  
}
// END - DRAW CONTROL BAR



// BEGIN - PRELOAD IMAGES
function load_images() {

  var pic = new Array(); 
  var head_object = document.getElementById('control');
  var total_links = head_object.getElementsByTagName('li');
  total_links = total_links.length;
  for (var obj = 1; obj <= total_links; obj++) {
    
    pic[obj] = new Image(); 
    pic[obj].src = '/images/carousel/'+"img" + obj + ".jpg"; 
  }

}
// END - PRELOAD IMAGES



// BEGIN - FADE IN BOTTOM BLOCK
var bottom_block_w = '25';
var bottom_block_interval = (bottom_block_w / 16);
var fade_bottom_block_w_tmp = 0;
var fade_bottom_block_item = 'carrousel_bottom';

function fade_bottom_block() {
  fade_bottom_block_w_tmp = (fade_bottom_block_w_tmp + bottom_block_interval)
  document.getElementById(fade_bottom_block_item).style.height = fade_bottom_block_w_tmp +'px';
  if (fade_bottom_block_w_tmp < bottom_block_w) { setTimeout("fade_bottom_block()",25);  } else { fade_bottom_block_w_tmp = 0; }
}
// END - FADE IN BOTTOM BLOCK



// BEGIN - LOAD IMG CHOSEN BY USER
function load_img(img_src) {

clearAllTimeouts();
  /*var src2='/images/carousel/'+	"img";*/
  tmp_src = img_src.replace("img","");
  tmp_src = tmp_src.replace(".jpg","");

  prev_img = document.getElementById('val_prev_img').value;
  total_appear(prev_img,tmp_src);
}
// END - LOAD IMG CHOSEN BY USER



// BEGIN - FADE IN FOREGROUND IMAGE
var fr_img_block_trans = 0;
var fr_img_block_interval = 4;
var fr_img_block_item = 'appear_div';

function fr_appear() {
  if (fr_img_block_trans == 0) { document.getElementById(fr_img_block_item).style.display=''; }
  fr_img_block_trans = (fr_img_block_trans + fr_img_block_interval)

    document.getElementById(fr_img_block_item).style.filter = 'alpha(opacity='+ fr_img_block_trans +')';
    document.getElementById(fr_img_block_item).style.MozOpacity = parseInt(fr_img_block_trans)/100;
    document.getElementById(fr_img_block_item).style.Opacity = parseInt(fr_img_block_trans)/100;

  if (fr_img_block_trans != 100) { timeOuts["555"] = setTimeout("fr_appear()",50); } else { fr_img_block_trans = 0; }
}
// END - FADE IN FOREGROUND IMAGE



// BEGIN - TOTAL APPEAR FUNCTION
var prev_img;
var next_img;

function total_appear(prev_img,next_img) {

  // HIGHLIGHT CURRENT IMAGE BUTTON
  document.getElementById('control_' + prev_img).className = '';
  document.getElementById('control_' + next_img).className = 'control_button_active';
  // HIGHLIGHT CURRENT IMAGE BUTTON

  // COUNT TOTAL LINKS AVAILABLE
  var head_object = document.getElementById('control');
  var total_links = head_object.getElementsByTagName('li');
  total_links = total_links.length;
  // COUNT TOTAL LINKS AVAILABLE

  // DRAW PREVIOUS IMAGE
  var tmp = prev_img;
  if (tmp == 0) { tmp = total_links; }
  var tmp = '/images/carousel/'+'img' + prev_img + '.jpg';
  document.getElementById('carrousel').style.background = 'url('+ tmp +')';
  // DRAW PREVIOUS IMAGE

  // DRAW NEXT IMAGE
  var tmp = '/images/carousel/'+'img' + next_img + '.jpg';
  document.getElementById('appear_div').style.background = 'url('+tmp+')';
  document.getElementById('img_link').href= image_url[next_img];
  document.getElementById('img_link').innerHTML= name_url[next_img];
  fr_appear();
  // DRAW NEXT IMAGE

  // MAKE VARIABLES FOR NEXT ROUND
  prev_img = next_img;
  next_img++;
  if (next_img > total_links) { next_img = 1; prev_img = total_links; }
  // MAKE VARIABLES FOR NEXT ROUND
  
  // WRITE VARIABLES FOR NEXT ROUND TO INPUT FIELDS
  document.getElementById('val_prev_img').value = prev_img;
  document.getElementById('val_next_img').value = next_img;
  // WRITE VARIABLES FOR NEXT ROUND TO INPUT FIELDS
  
  // LOOP FUNCTION
  timeOuts["666"] = setTimeout('total_appear("'+prev_img+'","'+next_img+'")',8000);
  // LOOP FUNCTION

}
// END - TOTAL APPEAR FUNCTION