window.addEvent('domready', function(){
// DONT move this script
// each time line element width
tlElemWidth = 161;
var tlArray = $$('.tlElem'); 
tlCount = tlArray.length;
tlcontainerWidth = (tlCount*tlElemWidth);

// set the container width according to the number of timeline elements
$('tlContainer').setStyle('width',tlcontainerWidth);

$$('.tlElem').setStyle('opacity',.65);

}); // DOM







window.addEvent('domready', function(){
scrollDurt = 1000;
elem = 'tlFrame';
clickedOnElem = 0;
var Scroll = new Fx.Scroll(elem, {
wait: false,
duration: scrollDurt
});

var framexy = $(elem).getScroll();
framex = framexy.x;
framey = framexy.y;

 // preloading start
 var images = ["/gfx/timeline/arrow_right.jpg","/gfx/timeline/arrow_right_on.gif","/gfx/timeline/arrow_left.jpg","/gfx/timeline/arrow_left_on.gif"];
     var loader = new Asset.images(images, {  
         onComplete: function() {  
 // alert ('s i loaded all the images');
         }  
     }); // preloading end

$('tlRight').setStyles({
'width':'13px',
'height':'19px',
'background-image':'url(/gfx/timeline/arrow_right.jpg)',
'background-repeat':'no-repeat'
});

$('tlLeft').setStyles({
'width':'13px',
'height':'19px',
'background-image':'url(/gfx/timeline/arrow_left.jpg)',
'background-repeat':'no-repeat'
});
/* 
if(tlCount > 3) {
$('tlRight').setStyles({
'width':'13px',
'height':'19px',
'background':'url(/gfx/timeline/arrow_right_on.gif) no-repeat'
});
}
*/ 

// RIGHT arrow actions
$('tlRight').addEvents({
'mouseenter':function() {
var framexy = $(elem).getScroll();
framex = framexy.x;
// alert ('x:'+framex+' from:'+(((tlCount-3)*tlElemWidth)+5)+' to:'+(((tlCount-6)*tlElemWidth)+5));

if(tlCount > 3) {
if(framex < ((tlCount-3)*tlElemWidth)+5 && framex > ((tlCount-6)*tlElemWidth)+5 ) {
$(this).setStyle('cursor','');
$(this).setStyle('background-image','url(/gfx/timeline/arrow_right.jpg)');
} else {
$(this).setStyle('cursor','pointer');
$(this).setStyle('background-image','url(/gfx/timeline/arrow_right_on.gif)');
}
} // tlCount > 3
},
'click':function() {
var framexy = $(elem).getScroll();
framex = framexy.x;
if(tlCount > 3) {
if(framex < ((tlCount-3)*tlElemWidth)+5 && framex > ((tlCount-6)*tlElemWidth)+5 ) {
$(this).setStyle('cursor','');
$(this).setStyle('background-image','url(/gfx/timeline/arrow_right.jpg)');
// $('tlLeft').setStyle('background-image','url(/gfx/timeline/arrow_left_on.gif)');
} else {
$(this).setStyle('cursor','pointer');
$(this).setStyle('background-image','url(/gfx/timeline/arrow_right_on.gif)');
// $('tlLeft').setStyle('background-image','url(/gfx/timeline/arrow_left_on.gif)');
}
} // tlCount > 3
Scroll.start(framex+(tlElemWidth*3),0);
},
'mouseleave':function() {
$(this).setStyle('background-image','url(/gfx/timeline/arrow_right.jpg)'); 
}
}); // tlRight

// LEFT arrow actions
$('tlLeft').addEvents({
'mouseenter':function() {
var framexy = $(elem).getScroll();
framex = framexy.x;
if(tlCount > 3) {
if(framex >= 0 && framex < 3*tlElemWidth) {
$(this).setStyle('background-image','url(/gfx/timeline/arrow_left.jpg)');
$(this).setStyle('cursor','');
} else {
$(this).setStyle('cursor','pointer');
$(this).setStyle('background-image','url(/gfx/timeline/arrow_left_on.gif)');
// $('tlRight').setStyle('background-image','url(/gfx/timeline/arrow_right_on.gif)');
}
} // tlCount > 3

},
'click':function() {
var framexy = $(elem).getScroll();
framex = framexy.x;
if(tlCount > 3) {
if(framex >= 0 && framex < 3*tlElemWidth) {
$(this).setStyle('background-image','url(/gfx/timeline/arrow_left.jpg)');
$(this).setStyle('cursor','');
} else {
$(this).setStyle('cursor','pointer');
$(this).setStyle('background-image','url(/gfx/timeline/arrow_left_on.gif)');
// $('tlRight').setStyle('background-image','url(/gfx/timeline/arrow_right_on.gif)');
}
} // tlCount > 3
Scroll.start(framex-(tlElemWidth*3),0); 
},
'mouseleave':function() {
$(this).setStyle('background-image','url(/gfx/timeline/arrow_left.jpg)');
}
}); // tlLeft

// HIGHLIGHT the timeline element
$$('.tlElem').addEvents({
'mouseenter':function() {
clickedOnElem = 0;
// reset
$$('.tlElem').setStyle('opacity',.65);
  $$('.tlYear').setStyles ({
'background-color':'#B2B2B2',
'color':'#000'  }); // tlYear
$$('.tlMssg').setStyles ({
'color':'#B2B2B2',
'background-color':''  }); // tlMssg
$$('.tlBottom').setStyle('background-color',''); 

// Selected
elemHightlight(this);
}, 
'mouseleave':function() {
if(clickedOnElem == 0) {
this.setStyle('opacity',.65);

$(this).getElement('.tlYear').setStyles({
'background-color':'#B2B2B2',
'color':'#000'     }); // tlYear
$(this).getElement('.tlMssg').setStyles({
'color':'#B2B2B2',
'background-color':''              }); // tlMssg
$(this).getElement('.tlBottom').setStyle('background-color',''); 
} // if clickedOnElem
}, 
'click':function() {
clickedOnElem = 1;
elemHightlight(this);
}
}); // tlElem

// function to HIGHTLIGHT the particular timeline element
var elemHightlight = function(el){
el.setStyle('opacity',1);
$(el).getElement('.tlYear').setStyles({
'background-color':'#0192C0',
'color':'#ffffff'    }); // tlYear
$(el).getElement('.tlMssg').setStyles({
'color':'#ffffff',
'background-color':'#3F3F3F'     }); // tlMssg
$(el).getElement('.tlBottom').setStyle('background-color','#0192C0'); 
}; // funct elemHighlight

}); // DOM