var thumb_width = 112;
var thumb_height = 76;
var thumb_shown = 5;
var speed = 64;
var scroller_element = 'scroller';

var scrolling_active = 0;
var uelm = 0;
var end_pos = 0;
var thumb_number = 0;

var thumb_step = thumb_width * thumb_shown;

window.onload = function() { 

var elm = document.getElementById(scroller_element);
var lelm = elm.getElementsByTagName("li");
uelm = elm.getElementsByTagName("ul")[0];
thumb_number = lelm.length;

elm.style.cssText = 'width:'+thumb_width * thumb_shown+'px';
uelm.style.cssText = 'position: relative; display: block; padding: 0px; margin: 0px; top: 0px; left: 0px; width:'+(thumb_number*thumb_width)+'px; height:'+thumb_height+'px';

for (var x=0; x<thumb_number; x++){
	lelm[x].style.cssText = 'float: left; display: block; list-style-type: none; width:'+thumb_width+'px; height:'+thumb_height+'px';				
	}
		
if(window.addEventListener){
	document.getElementById('left').addEventListener('mousedown', function() { scroll('left') }, true)
	document.getElementById('right').addEventListener('mousedown', function() { scroll('right') }, true)
	}
else {
	document.getElementById('left').attachEvent('onmousedown', function() { scroll('left') })
	document.getElementById('right').attachEvent('onmousedown', function() { scroll('right') })
	}

for (var n = 0; n < thumb_number; n++) 
	{ 
	var cnt = n+1;
	var id = 't'+cnt;
	changeOpac(60, id);

	if (window.addEventListener) { document.getElementById(id).addEventListener('mouseover', function(e) { opacity(get_event_id(e), 60, 100, 300) }, false)}
	else {document.getElementById(id).attachEvent('mouseover', function(e) { opacity(get_event_id(e), 60, 100, 300) })}			

	if (window.addEventListener) {document.getElementById(id).addEventListener('mouseout', function(e) { opacity(get_event_id(e), 100, 60, 300) }, false)}
	else {document.getElementById(id).attachEvent('mouseout', function(e) { opacity(get_event_id(e), 100, 60, 300) })}			
	}		
}

function get_event_id(evt){
	if (document.layers)
    eid = evt.target.id;
	else if (window.event && window.event.srcElement)
    eid = window.event.srcElement.id;
	else if (evt && evt.stopPropagation && !window.opera) {
    	if (evt.target.nodeType == 1) eid = evt.target.id;
    else eid = evt.target.parentNode.id
  	}
	else if (window.opera && evt)
    eid = evt.target.id;
    
    return(eid);
}

function scroll(direction) {
	if (!(scrolling_active==1)) {
		var start_pos = parseInt(getLeftPos(uelm));

		if (direction == 'left') {
			if (!(start_pos == 0)) {
				end_pos = start_pos + thumb_step;
				scrolling = setInterval(function() { 		
					var left_pos = parseInt(getLeftPos(uelm));
					var travel_left = Math.abs(end_pos - left_pos);
					if (travel_left < speed) { 
						uelm.style.left = left_pos + travel_left + 'px'; 
						clearInterval(scrolling);
						scrolling_active = 0;		
						}
					else {uelm.style.left = left_pos + speed + 'px';}																				
					}, 40);
				scrolling_active = 1;
				}
			}
		if (direction == 'right') {
			if (!((thumb_width*thumb_number) - Math.abs(start_pos) <= thumb_step)) {
				end_pos = start_pos - (thumb_width * thumb_shown);
				scrolling = setInterval(function() 
					{ 
					var left_pos = parseInt(getLeftPos(uelm));
					var travel_left = Math.abs(end_pos - left_pos);
					if (travel_left < speed) { 
						uelm.style.left = left_pos - travel_left + 'px'; 
						clearInterval(scrolling);
						scrolling_active = 0;					
						}
					else { uelm.style.left = left_pos - speed + 'px'; }			
					}, 40); 
				scrolling_active = 1;				
				}
			}
		}
	}

function getLeftPos(el) {
	if (el.currentStyle)
	var st = el.currentStyle['left'];
	else if (window.getComputedStyle)       
	var st = document.defaultView.getComputedStyle(el, null).getPropertyValue('left');
	return st;
	}                                                     

function show_image(img, height, width)
	{
	var main_img = document.getElementById('image');


    if (width > 654)
        {
        var width = 654;
        main_img.innerHTML='<a href="'+img+'"><img src="'+img+'" width="'+width+'" /></a>';
        }
    if (height > 479)
        {
        var height=480;
        main_img.innerHTML='<a href="'+img+'"><img src="'+img+'" height="'+height+'" /></a>';
        }
    else
        {
        main_img.innerHTML='<a href="'+img+'"><img src="'+img+'" /></a>';
        }
	}

/*Effects*/
      function opacity(id, opacStart, opacEnd, millisec) 
      {
      var speed = Math.round(millisec / 100);
      var timer = 0;

      if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
      } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
            }
        }
      }

    function changeOpac(opacity, id) 
      {
      var object = document.getElementById(id).style;
      object.opacity = (opacity / 100);
      object.MozOpacity = (opacity / 100);
      object.KhtmlOpacity = (opacity / 100);
      object.filter = "alpha(opacity=" + opacity + ")";
      }