var leftpos = 0;
var scrollContainer = null;
var containerWidth;
var containerCenterX;
var scrollElement = null;
var scrollWidth;
var scrollTimer = null;
var autoScrollerOn = true;
var mouseScrollerOn = false;
var autoScrollDirection;
var defaultScrollSpeed;
var scrollSpeed;
var activeMenuButton = null;
var videoInitialized = false;
var videoPlaying = false;
var scrollInitialized = false;
var nr_imagesLoaded = 0;
var curr_img_id = null;
var shadow_id = null;

var nr_imgs = 0;
//var prev_id = 0;
var imgs_ids = new Array();
var imgs_ext = new Array();
var vid_names = new Array();
var page;
var autoShowInitialized = false;
var autoShowOn = true; 
var imgRefreshTime;
var imgElapsedTime;


function scroll_imagebar()
{

   if(autoScrollerOn) autoScroll();

   if(mouseScrollerOn) mouseScroll();
   
   if(autoShowOn) autoShow();

}

function initScroll(containerID, elementID, speed)
{
  if(!scrollInitialized)
	{
    // initialize for scrolling to the right
    defaultScrollSpeed = -speed; 
	  scrollSpeed = -speed;
	
	  scrollContainer = document.getElementById(containerID);
    containerWidth = scrollContainer.offsetWidth;
    containerCenterX = getLeftOffset(scrollContainer) + containerWidth/2;

	  scrollElement = document.getElementById(elementID);
		
		scrollWidth = scrollElement.offsetWidth;
		
		if(scrollElement.style.left != "")
		{ 
		  leftpos = parseInt(scrollElement.style.left);		
		}
		else
		{
		  leftpos = 0;
		}	

    scrollInitialized = true;
		
    // make sure animator is initialized
    init_animator();
	}
}

function init_video()
{
        var attributes = { id:"videoPlayer", 
		                   name:"videoPlayer"}; 
        var params = {movie:'http://www.interlubke.com/scripts/FlowPlayer.swf',
					  allowScriptAccess:'sameDomain',
                      quality:'high',
                      /*scale:'noScale',*/
                      wmode:'transparent',
                      allowNetworking:'all'};  
		
       // var flashvars = {config:"{videoFile:'http://www.interlubke.com/videos/eo.flv'}"};
         var flashvars={config:"{videoFile:'eo.flv?t=" +new Date().getTime()+"',"+
                        	   " baseURL:'http://www.interlubke.com/videos/',"+
                               " autoPlay: false, autoBuffering: false,"+
							   " allowFullScreen: false, "+
							   " showFullScreenButton: false, "+
							   " fullScreenScriptURL: 'http://www.interlubke.com/scripts/fullscreen.js', "+
	                           " startingBufferLength: 5,"+
	                           " bufferLength: 10,"+
	                           " loop: false,"+
	                           " hideControls: true,"+
							   " allowResize: false,"+
							   " width: '1'"+
							   " height: '1'"+
	                           " initialScale: 'scale'}"};
        swfobject.embedSWF('http://www.interlubke.com/scripts/FlowPlayer.swf?t='+new Date().getTime(), 
		                    'videoContainer', '1', '1', '9.0.0',
							'http://www.interlubke.com/scripts/expressInstall.swf?t='+new Date().getTime(), flashvars, params, attributes);
		

	videoInitialized = true;
}

// this function is called whenever a scrollbar images is loaded
// when all scrollbar images are loaded the scrollbar is started
function startScroller(nr_images)
{
  nr_imagesLoaded++;

  // check if all images of the scrollbar are loaded
  if(nr_images == nr_imagesLoaded)
    initScroll('h_scrollcontainer', 'h_scrollcontent', 1)
}

function startAutoShow(page_name, ids_str, ext_str, vid_str)
{
  // check if user has already switched autoShow off by clicking one of the images
  if(autoShowOn && !autoShowInitialized)
  { 
    // store current page name in global variable
    page = page_name;

    // convert id  string into an array
    var temp = new Array();
    temp = ids_str.split(' ');

	// store number of images in global variable
    nr_imgs = temp.length;  
	
    // store the image ids in a global variable
    for(var i = 0; i<nr_imgs; i++) 
    {
      imgs_ids[i] = parseInt(temp[i]);
    }	
	
	// convert extention string into an array and store in a global variable
    temp = ext_str.split(' ');
	for(var i = 0; i<nr_imgs; i++) 
    {
      imgs_ext[i] = temp[i];
    }	
	
    // convert video names string into an array and store in a global variable
    temp = vid_str.split(' ');
	for(var i = 0; i<nr_imgs; i++) 
    {
      vid_names[i] = temp[i];
    }	
	
	// set the time interval that an image need be displayed (in ms)
	imgRefreshTime = 7000;
	// set elapsed time to refresh time to ensure that a image will be shown right at start up
	imgElapsedTime = imgRefreshTime;
	
	autoShowInitialized = true;
  }

}

function startAutoScroll()
{
  if(scrollInitialized)
  {
    autoScrollerOn = true;
    mouseScrollerOn = false;

    // reset to default scroll speed in current direction
    if(scrollSpeed >= 0) 
      scrollSpeed = -defaultScrollSpeed;
    else
      scrollSpeed = defaultScrollSpeed;

    // remove event listener from the scroll container
    if(browser.isIE)
      scrollContainer.detachEvent('onmousemove', adjustScrollSpeed);
    else
      scrollContainer.removeEventListener('mousemove',adjustScrollSpeed,false);  
  }
  
}

function startMouseScroll()
{
  if(scrollInitialized)
  {
    autoScrollerOn = false;
    mouseScrollerOn = true;

    // add event listener to the scroll container
    if(browser.isIE)
      scrollContainer.attachEvent('onmouseover', adjustScrollSpeed);
    else
      scrollContainer.addEventListener('mouseover',adjustScrollSpeed,false);  
  }
}

function adjustScrollSpeed(event)
{
  var mouseX = 0;

  // get x-position of mouse relative to the page
  if(!event) var event = window.event;
  if(browser.isIE) 
    mouseX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  else
    mouseX = event.pageX;

  // adjust scroll speed depending on mouse position w.r.t. the scroll container
  // fast when mouse is near the edges and near zero when the mouse is in the center
  scrollSpeed = 10*defaultScrollSpeed*(mouseX - containerCenterX)/containerWidth;  

}

function autoScroll()
{
			leftpos += scrollSpeed;

			if( containerWidth - leftpos >= scrollWidth && scrollSpeed < 0)
			{
			  leftpos -= scrollSpeed;
        scrollSpeed = -scrollSpeed;
			}	
      else if( leftpos >= 0 && scrollSpeed > 0)
			{
			  leftpos -= scrollSpeed;
        scrollSpeed = -scrollSpeed;
			}	
      else 
			{
        scrollElement.style.left = leftpos;
			}
}

function mouseScroll()
{

  leftpos += scrollSpeed;

	if( !(containerWidth - leftpos >= scrollWidth && scrollSpeed < 0)
     && !( leftpos >= 0 && scrollSpeed > 0))
	{
    scrollElement.style.left = leftpos;
	}
  else
  {
    leftpos -= scrollSpeed;
  }

}

function autoShow()
{
  // update time that has elapsed since current image has been displayed
  imgElapsedTime+=frame_interval;

  // check if previous image has been shown long enough
  if(imgElapsedTime >= imgRefreshTime)
  { 
    // hide image info of current image
	if(curr_img_id != null)
	   document.getElementById('photo_info'+curr_img_id).style.visibility='hidden';
       //hide_img_info();
	   
    // determine which images in the scrollbar are clearly within view 
    var leftBound = containerCenterX - containerWidth/2 + 10;
	var rightBound = containerCenterX + containerWidth/2 - 10;
  
    var inView = new Array(); 
	var el;
	var j = 0;
	for(var i=0; i<nr_imgs; i++)
	{
	   if(imgs_ids[i]!=curr_img_id)
	   {
	     el = document.getElementById('thumb'+imgs_ids[i]);
	     var of = getLeftOffset(el);
	     var el_left = of;
	     var el_right = of + el.offsetWidth;
	     if(el_left>leftBound && el_right<rightBound)
	     {
	       inView[j] = i;
	       j++;
	     }
	   }
	}
	
    // randomly select one of these images to be shown
	var now = new Date();
	var min = now.getMinutes();
	var nr = Math.round((j-1)*Math.random(min)); 
	
	// start showing the image
	nr = inView[nr];
	
	//if we're dealing with a video the extention is flv
	if(imgs_ext[nr] != 'flv')
	{
	  imgRefreshTime = 7000;
	  show_scrollbar_img(imgs_ids[nr], page, imgs_ext[nr], 'auto');
	}
	else
	{
      imgRefreshTime = 15000;
	  show_scrollbar_video(imgs_ids[nr], vid_names[nr]+'.'+imgs_ext[nr], 'auto');
	}
	
	// save current image id to make sure it will not be shown next
	curr_img_id = imgs_ids[nr];
	
	// reset elapsed time
	imgElapsedTime = 0;
  }
  
}

function getLeftOffset(obj) 
{
	var leftpos = 0;
	if (obj.offsetParent) 
  {
		leftpos = obj.offsetLeft;
		while (obj = obj.offsetParent) 
    {
			leftpos += obj.offsetLeft;
		}
	}
	return leftpos;
}

function getTopOffset(obj) 
{
	var toppos = 0;
	if (obj.offsetParent) 
  {
		toppos = obj.offsetTop;
		while (obj = obj.offsetParent) 
    {
			toppos += obj.offsetTop;
		}
	}
	return toppos;
}

// when an image on the image scrollbar is clicked
// this function makes sure that image is shown 
// on full scale in the content area
function show_scrollbar_img(id_scrollbar_img, page, ext, mode)
{
 // if mode is 'manual' switch off autoShow if this has not already been done
  if(mode=='manual' && autoShowOn)
    autoShowOn = false;

  if(!scrollInitialized)
    return false;

  // if the specifications tab is activated switch to the system tab instead
  if(tab_name == 'specs')
    activate_tab('system','system');

  // if a video is playing, stop and hide it
  if(videoPlaying)
    hide_scrollbar_video();

  // store current image id in global variable so it can be 
  // used to show the proper image info div
  curr_img_id = id_scrollbar_img;

  // determine if we're dealing with a png-image. if so, don't show shadow
  // in case there are transparent areas in the image
  var shadowOn = true;
  if(ext == "png")
    shadowOn = false;

  // get pointer to the animatable image container
  var container = document.getElementById('img_container1');

  // get pointer to the shadow image
  var shadow = document.getElementById('shadow1');

  // hide container and shadow till new source is loaded
  container.style.visibility='hidden';
  shadow.style.visibility='hidden';

  // get pointer to the animatable image
  var img = new Image();
  img = document.getElementById('img1');
  
  // set image source
  img.src = './pages/'+page+'/photo'+id_scrollbar_img+'.'+ext;

  // get pointer to the scrollbar image
  var thumb_img = document.getElementById('thumb'+id_scrollbar_img);

  // determine the starting size of the image 
  var start_width = thumb_img.offsetWidth;
  var start_height = thumb_img.offsetHeight;

  // get the starting position of the image
  var start_x = getLeftOffset(thumb_img);
  var start_y = getTopOffset(thumb_img);
 
  // adjust for offset of page container
  var page_container = document.getElementById('container');
  start_x -= getLeftOffset(page_container);
  start_y -= getTopOffset(page_container);

//----------------------------------------------
// set image container to starting position and size

  container.style.top = start_y;
  container.style.left = start_x;
  container.style.width = start_width;
  container.style.height = start_height;

// set shadow to starting position

  if(shadowOn)
  {
    shadow.style.top = start_y;
    shadow.style.left = start_x;
    shadow.style.width = start_width;
    shadow.style.height = start_height;
  }

//----------------------------------------------
// determine target position and size
  var center_x = 680;
  var center_y = 413;
  //var right_x = 880;
  //var top_y = 248;
  var max_width = 400;
  var max_height = 350;

  // determine scale factor
  var scale_x = max_width/start_width;
  var scale_y = max_height/start_height;
  var scale = Math.min(scale_x,scale_y);  

  // set target size
  var target_width = Math.round(scale*start_width);
  var target_height = Math.round(scale*start_height);

  // set target position
  var target_x = Math.round(center_x - target_width/2);
  var target_y = Math.round(center_y - target_height/2);
  //var target_x = Math.round(right_x - target_width);
  //var target_y = top_y;  

  // make image container, info and shadow visible
  container.style.visibility='visible';
  document.getElementById('photo_info_button').style.visibility='visible';
  if(shadowOn)
    shadow.style.visibility='visible';

  // start the image and shadow animation
  move_element('img_container1', target_x, target_y, target_width, target_height,0, 1000);
  if(shadowOn)
    move_element('shadow1', target_x+15, target_y+15, target_width, target_height,0, 1000);
}

function hide_scrollbar_img()
{
  // hide the animatable image container and its shadow
  document.getElementById('img_container1').style.visibility='hidden';
  document.getElementById('shadow1').style.visibility='hidden';
  document.getElementById('photo_info_button').style.visibility='hidden';
}

function show_img_info()
{
  // only show info if the width of the image container is over 200px
  if(document.getElementById('img_container1').offsetWidth >= 200)
  {
    // hide the info button
    //document.getElementById('photo_info_button').style.visibility='hidden';
    fade_element('photo_info_button', 10, 0, 600);

    // document.getElementById('photo_info'+curr_img_id).style.visibility='visible';
    // perform fade-in
    fade_element('photo_info'+curr_img_id, 70, 0, 600);
  }
}

function hide_img_info()
{
  // perform fade-out
  fade_element('photo_info'+curr_img_id, 0, 100, 600);

  // show the info button
  //document.getElementById('photo_info_button').style.visibility='visible';
  fade_element('photo_info_button', 60, 100, 600);
}

// when an image on the image scrollbar is clicked
// that is associated with a video file this function makes 
// sure that the video is shown on full scale 
// in the content area
function show_scrollbar_video(id_scrollbar_img, video_src, mode)
{
  // if mode is 'manual' switch off autoShow if this has not already been done
  if(mode=='manual' && autoShowOn)
    autoShowOn = false;

  if(!scrollInitialized || !videoInitialized)
    return false;

  // if the specifications tab is activated switch to the system tab instead
  if(tab_name == 'specs')
    activate_tab('system','system');

  // hide possible image being displayed
  hide_scrollbar_img();

  // get pointer to the scrollbar image
  var thumb_img = document.getElementById('thumb'+id_scrollbar_img);

  // get pointer to the shadow image
  var shadow = document.getElementById('shadow1');

  // determine the starting size of the video
  var start_width = thumb_img.offsetWidth;
  var start_height = thumb_img.offsetHeight;

  // get the starting position of the video
  var start_x = getLeftOffset(thumb_img);
  var start_y = getTopOffset(thumb_img);
 
  // adjust for offset of page container
  var page_container = document.getElementById('container');
  start_x -= getLeftOffset(page_container);
  start_y -= getTopOffset(page_container);

//----------------------------------------------
// set the current video clip

  // get pointer to the video player
  var video = document.getElementById('videoPlayer');
  
  //setup the FlowPlayer configuration
  videoConf = {
    videoFile: video_src+"?t=" +new Date().getTime(),
	baseURL: 'http://www.interlubke.com/videos/',
	autoPlay: true,
	autoBuffering: false,
	startingBufferLength: 5,
	bufferLength: 10,
	loop: false,
	allowResize: false,
	hideControls: true,
	initialScale: 'scale',
	allowFullScreen: false,
    showFullScreenButton: false,
	fullScreenScriptURL: 'http://www.interlubke.com/scripts/fullscreen.js'
  }; 
  
//----------------------------------------------
// set video to starting position and size

   video.style.top = start_y;
   video.style.left = start_x;
   video.style.width = start_width;
   video.style.height = start_height;

// set shadow to starting position

  shadow.style.top = start_y;
  shadow.style.left = start_x;
  shadow.style.width = start_width;
  shadow.style.height = start_height;

//----------------------------------------------
// determine target position and size

  var center_x = 680;
  var center_y = 393;
  var max_width = 400;
  var max_height = 300;

  // determine scale factor
  var scale_x = max_width/start_width;
  var scale_y = max_height/start_height;
  var scale = Math.min(scale_x,scale_y);  

  // set target size
  var target_width = Math.round(scale*start_width);
  var target_height = Math.round(scale*start_height);

  // set target position
  var target_x = Math.round(center_x - target_width/2);
  var target_y = Math.round(center_y - target_height/2);

  // make video and shadow visible
  //flashcontent.style.visibility='visible';
  video.style.visibility='visible';
  shadow.style.visibility='visible';

  // perform the video configuration
  video.setConfig(videoConf);
  videoPlaying = true;

  // start the animation
  move_element('videoPlayer', target_x, target_y, target_width, target_height,0, 1000);
  move_element('shadow1', target_x+15, target_y+15, target_width, target_height,0, 1000);
}

function hide_scrollbar_video()
{
  // get pointer to the video player and its shadow
  var video = document.getElementById('videoPlayer');
  var shadow = document.getElementById('shadow1');

  // stop the video
  video.DoStop();
  videoPlaying = false;

  // hide video and shadow
  video.style.visibility = 'hidden';
  shadow.style.visibility = 'hidden';
}

function make_visible(obj)
{
  obj.style.visibility = 'visible';
}