ScrollBar Mishaps

I’m attempting to buld a scrollbar/image scroller like the one used in http://thehulk.com/modern_evo/index.html

I’ve been trying to get the ScrollHead on my MC (attached) to “slide to/and stop” at 4 different sections of the ScrollBar. I’ve had little success. I know there is someone out there that must have run into this before. I would appreciate any, and all, tips/advice on this. Thanks in advance for your help!
-elstrausso

[SIZE=1][COLOR=blue]
 onClipEvent (enterFrame) {
	movie_width = 658;
	scroll_width = _root.content._width - movie_width;
	scrollbar_width = movie_width - _root.ScrollBar.ScrollHead._width;
	proportion = scroll_width/scrollbar_width;
	_root.content._x = proportion * _root.ScrollBar.ScrollHead._x * -1;
 }

[/SIZE] [/COLOR]
and for my ScrollHead:

[SIZE=1][COLOR=blue]
this.ScrollHead.onPress = function() {
	ScrollHead.startDrag("",false, 0, 480, 0, 0);
}
this.ScrollHead.onRelease = this.ScrollHead.onReleaseOutside=function () {
	stopDrag();
}

[/SIZE] [/COLOR]

the following is my initial rough try at getting the ScrollHead to stop at (4) sections:

[SIZE=1][COLOR=blue]

if (_root.ScrollBar.ScrollHead._x < 210 ) {
ScrollHead._x = 50;
}else if{ (_root.ScrollBar.ScrollHead._x >50 ) {
ScrollHead._x = 50;
}else if{  (_root.ScrollBar.ScrollHead._x < 370) {
ScrollHead._x = 210;
}else if{ (_root.ScrollBar.ScrollHead._x >210 ) {
ScrollHead._x = 210;
}else if{ (_root.ScrollBar.ScrollHead._x < 530) {
ScrollHead._x = 530;
}else if{  (_root.ScrollBar.ScrollHead._x >370 ) {
ScrollHead._x = 530;
}else{(_root.ScrollBar.ScrollHead._x =0) 
}

[/SIZE] [/COLOR]