/**
* Represents the base functionality for Sliders.
*
* Broadcasts 1 event:
* -SliderEvent.CHANGE
*/
public class Slider extends Sprite
{
// elements
protected var track:Sprite;
protected var marker:Sprite;

// percentage
protected var percentage:Number = 0;
/**
* The percent is represented as a value between 0 and 1.
*/
public function get percent():Number { return percentage; }
/**
* The percent is represented as a value between 0 and 1.
*/
public function set percent( p:Number ):void
{
percentage = Math.min( 1, Math.max( 0, p ) );
marker.y = percentage * (track.height - marker.height);

dispatchEvent( new SliderEvent( SliderEvent.CHANGE, percentage ) );
}

/**
* Constructor
*/
public function Slider()
{
createElements();
}

// ends the sliding session
protected function stopSliding( e:MouseEvent ):void
{
marker.stopDrag();
stage.removeEventListener( MouseEvent.MOUSE_MOVE, updatePercent );
stage.removeEventListener( MouseEvent.MOUSE_UP, stopSliding );
}
// updates the data to reflect the visuals
protected function updatePercent( e:MouseEvent ):void
{
e.updateAfterEvent();
percentage = marker.y / (track.height - marker.height);

dispatchEvent( new SliderEvent( SliderEvent.CHANGE, percentage ) );
}

// Executed when the marker is pressed by the user.
protected function markerPress( e:MouseEvent ):void
{
marker.startDrag( false, new Rectangle( 0, 0, 0, track.height - marker.height ) );
stage.addEventListener( MouseEvent.MOUSE_MOVE, updatePercent );
stage.addEventListener( MouseEvent.MOUSE_UP, stopSliding );
}

/**
* Creates and initializes the marker/track elements.
*/
protected function createElements():void
{
track = new Sprite();
marker = new Sprite();

track.graphics.beginFill( 0xCCCCCC, 1 );
track.graphics.drawRect(0, 0, 10, 100);
track.graphics.endFill();

marker.graphics.beginFill( 0x333333, 1 );
marker.graphics.drawRect(0, 0, 10, 15);
marker.graphics.endFill();

marker.addEventListener( MouseEvent.MOUSE_DOWN, markerPress );

public class SliderEvent extends Event
{
// events
public static const CHANGE:String = "change";

protected var percentage:Number;
/**
* Read-Only
*/
public function get percent():Number
{
return percentage;
}

public class Scrollbar extends Sprite
{
// elements
protected var slider:Slider;
protected var up_arrow:Sprite;
protected var down_arrow:Sprite;

protected var scrollSpeed:Number = .1;

// read/write percentage value relates directly to the slider
public function get percent():Number { return slider.percent; }
public function set percent( p:Number ):void { slider.percent = p; }

/**
* Constructor
*/
public function Scrollbar()
{
createElements();
}

// executes when the up arrow is pressed
protected function arrowPressed( e:MouseEvent ):void
{
var dir:int = (e.target == up_arrow) ? -1 : 1;
slider.percent += dir * scrollSpeed;
}

/**
* Create and initialize the slider and arrow elements.
*/
protected function createElements():void
{
slider = new Slider();

up_arrow = new Sprite();
up_arrow.graphics.beginFill( 0x666666, 1 );
up_arrow.graphics.drawRect( 0, 0, 10, 10 );
up_arrow.graphics.endFill();

down_arrow = new Sprite();
down_arrow.graphics.beginFill( 0x666666, 1 );
down_arrow.graphics.drawRect( 0, 0, 10, 10 );
down_arrow.graphics.endFill();

slider.y = up_arrow.height;
down_arrow.y = slider.y + slider.height;

up_arrow.addEventListener( MouseEvent.MOUSE_DOWN, arrowPressed );
down_arrow.addEventListener( MouseEvent.MOUSE_DOWN, arrowPressed );

addChild( slider );
addChild( up_arrow );
addChild( down_arrow );
}

public class ScrollContent extends Sprite
{
// elements
protected var content:Sprite;
protected var scrollbar:Scrollbar;
protected var contentHeight:Number;

/**
* Constructor
*/
public function ScrollContent( clip:Sprite, scroller:Scrollbar, scrollRect:Rectangle )
{
content = clip;
contentHeight = clip.height;
content.scrollRect = scrollRect;

scrollbar = scroller;

scrollbar.addEventListener( SliderEvent.CHANGE, updateContent );
}

public function updateContent( e:SliderEvent ):void
{
var scrollable:Number = contentHeight - content.scrollRect.height;
var sr:Rectangle = content.scrollRect.clone();

sr.y = scrollable * e.percent;

public class ScrollbarExample extends Sprite
{
public function ScrollbarExample()
{
var content:Sprite = new Sprite();
var scrollbar:Scrollbar = new Scrollbar();
var scroll_rect:Rectangle = new Rectangle( 0, 0, 100, 50 );

content.graphics.beginFill( 0xFF0000, 1 );
content.graphics.drawRect( 0, 0, 100, 50 );
content.graphics.beginFill( 0x00FF00, 1 );
content.graphics.drawRect( 0, 50, 100, 50 );
content.graphics.beginFill( 0x0000FF, 1 );
content.graphics.drawRect( 0, 100, 100, 50 );
content.graphics.endFill();

var rect:Rectangle = new Rectangle( 0, 0, 100, 50 );
var sc:ScrollContent = new ScrollContent( content, scrollbar, rect );

scrollbar.x = content.width;