// assumes jQuery & ui extensions are available
        // expects content to be loaded into a div#slidey
        // each page is div.slidable, like this:

//      <div id='slidey'>
//              <div id='slide_carrier'>
//                      <div class='slideable'>
//                              (content)
//                      </div>
//                      <div class='slideable'>
//                              (next content)
//                      </div>
//              </div>
//      </div>


        var options = { slideCount: 0,
                                        slideWidth: 511,        /* set this */
                                        slideHeight: 271,       /* and this */
                                        slideSpacing: 50,
                                        sliderRange: 0,
                                        carrierWidth: 0,
                                        carrierRange: 0,
                                        visibleWidth: 0 };

	function setupSlider() {
       // $(document).ready(function()
        // {
				
                /* calculate width of the slide carrier */
                options.slideCount = $('.slideable').length;
                var effectiveSlideWidth = options.slideWidth + options.slideSpacing;
                options.carrierWidth = options.slideCount * effectiveSlideWidth + 20; // allow for border
                options.carrierRange = ( ( options.slideCount - 1 ) * effectiveSlideWidth ); // allow for border

                
				/* nail everything down */
                $('#slide_carrier').css( {      'width' : options.carrierWidth,
                                                                        'height' : options.slideHeight } );

                $('div.slideable').css( {   'margin-right' : options.slideSpacing,
                                                                        'width' : options.slideWidth,
                                                                        'height' : options.slideHeight } );

                $('div#slidey').append( "<div id='slide_control'  text-align:center;'></div>");

                $('#slide_control').css( { 'padding-top' : options.slideHeight } );

                $('#slide_control').slider( { animate: false,
                                                                                slide: handleSlide,
                                                                                 stop: handleStopSliding } );

                options.sliderRange = $('#slide_control').width();

                /* put dots on the bar evenly based on the number of slides */
                if (options.slideCount > 1)
                {
                     for (i = 0; i < options.slideCount; i ++)
                     {
                          $('#slide_control').append("<div id='dot"+i+"' class='spot'>&nbsp;</div>");
                          $('#dot' + i).css( { 'left' : ((options.sliderRange / (options.slideCount -1)) * i) + 5 });
                     }
                }
			}
        // });

        function handleSlide( event, ui )
        {
                /* just scroll the slide carrier */
                var scroll_amount = options.carrierRange * ui.value / 100;
                $('#slide_carrier').css( 'left', -scroll_amount );
                $('#slide_control a').css( { 'background-image' : 'url(images/slider_handle_lit.png)' });

        }

        function handleStopSliding( event, ui )
        {
                /* pin the carrier on the nearest slideable */
                var slide_index = Math.floor( options.slideCount * ui.value / 101 );

                var carrier_scroll = slide_index * ( options.slideWidth + options.slideSpacing );
                $('#slide_carrier').animate( { 'left' : -carrier_scroll }, 600 );

                /* also pin the control */
                var control_scroll = options.sliderRange * ( slide_index / ( options.slideCount - 1 ) );
                $('#slide_control a').css( { 'background-image' : 'url(images/slider_handle.png)' });
                $('#slide_control a').css( { 'left' : control_scroll } );


        }