// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults


Event.observe(window, 'load', function() { 
    init_scrolling();
});

function init_scrolling() {
    if (!$('scrollable')) return;
    // horizontal slider control
    var slider = new Control.Slider('handle', 'track', {
    	onSlide: function(v) { scrollHorizontal(v, $('scrollable'), slider);  },
    	onChange: function(v) { scrollHorizontal(v, $('scrollable'), slider); }
    });

    // scroll the element horizontally based on its width and the slider maximum value
    function scrollHorizontal(value, element, slider) {
    	element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
    }
    
    // disable horizontal scrolling if text doesn't overflow the div
    if ($('scrollable').scrollWidth <= $('scrollable').offsetWidth) {
    	slider.setDisabled();
    	$('wrap').hide();
    }
    
    $('image_holder').update('<img src="" alt="" />');
    var image=$('image_holder').down('img');
    var links=$$('#scrollable a');
    links.each(function(element){
        Event.observe(element, 'click', function(e){
            var link = Event.element(e).up('a');
            image.src=link.href;
            image.alt=Event.element(e).alt;
            image.title=Event.element(e).title;
            Event.stop(e);
        })
    });
    
    var defaultLink=$$('#scrollable li.on a').first();
    if (!defaultLink) defaultLink=links.first();
    image.src=defaultLink.href;    
    image.alt=defaultLink.down('img').alt;
    image.title=defaultLink.down('img').title;
}