function ElementBrowser(id, elementdisplaycount, elementscrollcount){


	this.elementList = new Array();

	if (!elementdisplaycount){
		elementdisplaycount = 1;
	}
	if (!elementscrollcount){
		elementscrollcount = 1;
	}

	this.id = id;
	this.elementDisplayCount = elementdisplaycount;
	this.elementScrollCount = elementscrollcount;
	this.pageCount = 0;

	/**
	 * Gets all the elements and puts them in the array
	 */
	this.populate = function(el, att){
		if (!att){ var att = ''; }
		this.elementList = document.getElementById(this.id).getElementsByTagName(el);
	}

	/**
	 * Resets the list so the display matches the settings.
	 */
	this.fixLayout = function(){
		if (this.elementList.length > 0){
			this.resetList(0);
		}
	}

	/**
	 *
	 */
	this.next = function(){

		var active = 0;
		for (var i = 0; i < this.elementList.length; i++){

			if (this.elementList[i].style.display != 'none'){
				//  active = i+1;
				active = i + this.elementScrollCount;
				break;
			}

		}
		if (typeof this.elementList[active] == 'undefined'){

			if (this.elementDisplayCount == 1){
				//this.resetList(0);
				return;
			}
			else {
				return;
			}

		}
		if (active <= 0){
			var page = 1;
		}
		else {
			var page = Math.ceil(active / this.elementScrollCount);
		}
		this.showPage(page+1);

		//this.resetList(active);

	}


	/**
	 *
	 */
	this.previous = function(){

		var active = 0;
		for (var i = 0; i < this.elementList.length; i++){
		
			if (this.elementList[i].style.display != 'none'){
				var active = i - this.elementScrollCount;
				break;
			}
		
		}
		if (active < 0 || typeof this.elementList[active] == 'undefined'){
			if (this.elementDisplayCount == 1){
				//active = this.elementList.length - this.elementDisplayCount;
				return;
			}
			else {
				active = 0;
			}
		}
		if (active <= 0){
			var page = 0;

		}
		else {
			var page = Math.ceil(active / this.elementScrollCount);
		}
		this.showPage(page+1);

		// this.resetList(active);

	}

	this.showPage = function(page){

		if (document.getElementById('previous_link') && document.getElementById('next_link')){
			if (page == 1){
				document.getElementById('previous_link').style.display = 'none';
			}
			else {
				document.getElementById('previous_link').style.display = '';
			}
			if (page == (this.elementList.length / this.elementDisplayCount)){
				document.getElementById('next_link').style.display = 'none';
			}
			else {
				document.getElementById('next_link').style.display = '';
			}
		}
		
		page--;
		var active = page * this.elementDisplayCount;
		this.resetList(active);

	}

	/**
	 * This puts all elements in the list to display:none
	 * after that it'll call show with the active value
	 */
	this.resetList = function(active){

		for (var i = 0; i < this.elementList.length; i++){

			this.elementList[i].style.display='none';

		}
		this.show(active);

	}

	/**
	 *
	 */
	this.show = function(active){

		// in case we display more than one item but scroll only one item at a time
		if (this.elementDisplayCount > 1 && this.elementScrollCount == 1){

			// we find the first value for Active to make sure we show the amount of elements defined in elementDisplayCount
			while (active + this.elementDisplayCount >= this.elementList.length){
				active--;
			}

			// then from here we loop over the elements to remove the display:none (or set display to default)
			for (var i = 0; i < this.elementDisplayCount; i++){
				this.elementList[active].style.display = '';
				active++;
			}

		}
		// in case we display more than one item and scroll more than one item at a time
		else if (this.elementDisplayCount > 1 && this.elementScrollCount > 1){

			// we work with pages here
			var elementpagecount = 0;
			// we show elements starting from element index defined in Active
			// then we show the amount of elements as defined in elementDisplayCount
			while (active < this.elementList.length && elementpagecount < this.elementDisplayCount){

				this.elementList[active].style.display = '';
				elementpagecount++;
				active++;
				
			}

		}
		// in case we show one and scroll per one
		else {
			this.elementList[active].style.display = '';
		}
		
	}
	
}

function do_gallery(){
	
	var tween_length = 4000;
	
	var parent = document.getElementById('gallery');
	var elements = parent.getElementsByTagName('img');
	
	for (var i = 0; i < elements.length; i++){
		
		var timeout = i * tween_length + tween_length - 2000;
		var prep_timeout = i * tween_length - 2000;
		if (prep_timeout <= 0){
			prep_timeout = elements.length * tween_length - 2000;
		}
		var bg_timeout = timeout + tween_length;
		
		elements[i].id = 'gallery_'+i;

		if (i == 0){
			elements[i].style.zIndex = 10;
		}
		else if (i == 1){
			elements[i].style.zIndex = 5;
		}
		
		elements[i].style.opacity = 1;
		elements[i].style.filter = 'alpha(opacity = 100)';
		elements[i].FadeState = null;
		setTimeout('prep_image("gallery_'+i+'", '+(elements.length * tween_length)+')', prep_timeout);
		setTimeout('do_image("gallery_'+i+'", '+(elements.length * tween_length)+')', timeout);
		setTimeout('bg_image("gallery_'+i+'", '+(elements.length * tween_length)+')', bg_timeout);		
		
	}
	
}

function prep_image(element_id, timeout){
	
	var element = document.getElementById(element_id)
	
	//document.getElementById('gallery').appendChild(element);
    element.style.opacity = 1;
    element.style.filter = 'alpha(opacity = 100)';
	element.style.zIndex = 5;
	element.FadeState = null;
	setTimeout('prep_image("'+element_id+'", '+timeout+')', timeout);
	
}

function do_image(element_id, timeout){
	
	var element = document.getElementById(element_id)
	element.style.zIndex = 10;
	
	fade(element_id);
	setTimeout('do_image("'+element_id+'", '+timeout+')', timeout);
	
}

function bg_image(element_id, timeout){
	
	var element = document.getElementById(element_id)
	
	//document.getElementById('gallery').appendChild(element);
    element.style.opacity = 1;
    element.style.filter = 'alpha(opacity = 100)';
	element.style.zIndex = 0;
	element.FadeState = null;
	setTimeout('bg_image("'+element_id+'", '+timeout+')', timeout);
	
}



var  TimeToFade = 1000.0;

function fade(eid){
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
    if(element.style.opacity != 0 &&
	   (element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1'))
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }
   
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}

function  animateFade(lastTick, eid){  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}