var History = {
    years:[
        {id:'jumpto1986', offset:0},
        {id:'jumpto1990', offset:0.14938},
        {id:'jumpto1995', offset:0.38313},
        {id:'jumpto2000', offset:0.61687},
        {id:'jumpto2005', offset:0.85061},
        {id:'jumpto2010', offset:1}
    ],
    startYear:5,           // from History.years starting from 0
    arrowScrollAmount:0.3, // amount one click on arrow moves slider
    itemGap:32,            // actual gap after margins, padding etc applied
    viewportWidth:790,     // width of viewport
	itemWidth:132,         // width of dt and dd's as set in CSS

    animateContent:function(toX) {
        window.clearInterval(History.slide);
        if (toX>1) {toX=1;}
        if (toX<0) {toX=0;}
        History.sliderValue = toX;
        contentStopPoint=Math.round(History.offsetContentWidth*toX);
// ------------------------------------------------------------------------------------- sorted to this point
        sliderStopPoint=Math.round(($('slidertrack').getWidth()-$('sliderhandle').getWidth())*toX);
        /* Bodge for IE6 preventing overlap of left arrow */
        /*@cc_on @*/
        /*@if (@_jscript_version < 5.7)
          if (sliderStopPoint < $('sliderleftarrow').getWidth()) {sliderStopPoint=$('sliderleftarrow').getWidth()};
        /*@end @*/
        History.isSliding=true;
        History.slide=window.setInterval(function() {
            var sliderPos=parseInt($('history').getStyle('left'), 10)||0;
            var handlePos=parseInt($('sliderhandle').getStyle('left'), 10)||0;
            var x=History.calculateDecel(sliderPos,contentStopPoint);
            var sx=History.calculateDecel(handlePos,sliderStopPoint);
            $('history').setStyle({'left':x+'px'});
            $('sliderhandle').setStyle({'left':sx+'px'});
            if(x==contentStopPoint) {
                window.clearInterval(History.slide);
                History.isSliding=false;
            }
            if(x==History.offsetContentWidth){
            	$('sliderhandle').setStyle({left:"569px"});
            }
        } ,30); //wait 30ms between calls
        $('content').setAttribute('style','display:block');
    },

    calculateDecel:function(from,to) {
        var n=from-Math.floor((from-to)*0.4);
        if(Math.abs(from-to)<4) {
            return to;}
        else {
            return n;
        }
    },

    createSlider:function() {
        slider =  Builder.node('div',{id:'slidertrack'},[
                      Builder.node('div',{id:'sliderhandle'}),
                      Builder.node('div',{'class':'sliderarrow', id:'sliderleftarrow'}),
                      Builder.node('div',{'class':'sliderarrow', id:'sliderrightarrow'}),
                      Builder.node('span',{'class':'jumpto', id:'jumpto1986'},'1986'),
                      Builder.node('span',{'class':'jumpto', id:'jumpto1990'},'1990'),
                      Builder.node('span',{'class':'jumpto', id:'jumpto1995'},'1995'),
                      Builder.node('span',{'class':'jumpto', id:'jumpto2000'},'2000'),
                      Builder.node('span',{'class':'jumpto', id:'jumpto2005'},'2005'),
                      Builder.node('span',{'class':'jumpto', id:'jumpto2010'},'2010')
                  ]);
        containerDiv = Builder.node('div',{id:'container'}, $('history'));
        $('content').appendChild(containerDiv);
        $('container').appendChild(slider);
    },

    left:function() {
        History.animateContent(History.sliderValue-History.arrowScrollAmount);
    },

    right:function() {
        History.animateContent(History.sliderValue+History.arrowScrollAmount);
    },

    init:function() {        
        $$('#growth dl')[0].setAttribute('id', 'history');
        
        History.createSlider();
        
        History.numberItems=$$('#history dd').length;
        History.contentWidth=(History.numberItems*History.itemWidth) + ((History.numberItems + 1)*History.itemGap); // +1 Fencepost
        $$('#history dt')[0].setStyle({'margin-left':History.itemGap+'px'});
        History.offsetContentWidth=-1*(History.contentWidth-History.viewportWidth); // calculates minimum left position so that content fills viewport when fully to the right 
        
        History.animateContent(History.years[History.startYear].offset); // move to initial position
   //console.log(        );
   
        
        timeline=new Control.Slider('sliderhandle','slidertrack');
        
        timeline.options.onChange=function(value) { //only called at end of click and drag
            if(History.isThrow&&!History.isSliding) {
                History.isSliding=true;
                History.isThrow=false;
                var mod=value+History.throwMod;
                if(mod<0) {
                    mod=0;
                }
                if(mod>1) {
                    mod=1;
                }
                History.animateContent(mod);
            } else if(!History.isSliding) {
                History.isSliding=true;
                History.animateContent(value);
            }
        };
        timeline.options.onSlide=function(value) { //only called during click and drag
            if(value&&!History.isSliding) {
                History.isSliding=true;
                History.isThrow=false;
                if(History.isMouseDown) {
                    History.dif=value-History.lastX;
                    History.lastX=value;
                    if(History.dif>0.05) {
                        History.isThrow=true;
                        History.throwMod=0.2;
                    } else if(History.dif<-0.04) {
                        History.isThrow=true;
                        History.throwMod=-0.2;
                    }
                }
                var w=History.offsetContentWidth;
                $('history').style.left=w*value+"px";
                History.sliderValue=value;
                History.lastX=value;
                History.isSliding=false;
            }
        };
        Event.observe('sliderleftarrow','mousedown',function() {
            History.left();
        });
        Event.observe('sliderrightarrow','mousedown',function() {
            History.right();
        });
        Event.observe('sliderhandle','mousedown',function() {
            History.isMouseDown=true;
        });
        Event.observe('sliderhandle','mouseup',function() {
            History.isMouseDown=false;
        });
        History.years.each(function(year) {
            Event.observe($(year.id),'mouseup',function() {
                History.animateContent(year.offset);
            });
        });
    }
};
Event.observe (window, 'load', function() {History.init({});}, false);