//<![CDATA[
//if (navigator.userAgent.indexOf("Firefox") == -1 || navigator.userAgent.indexOf("Macintosh") == -1) {
    sifrCollection[sifrCollection.length] = new SifrCall('div#storySelector ul#stories li', '.sIFR-root {text-align: center; font-weight: bold; letter-spacing: -0.5; leading: -3; text-transform: lowercase;} a {color: #ffffff; text-decoration: none;} a:hover {color:#ec008c} strong {leading: 4;}');
//}
window.addEvent('domready', function() {InitialisePage();});

function InitialisePage() {
    if ($chk('storySelector') && $chk('stories') && ItemCount > 0) {
        
        var revList = new StoryList(
            $('storySelector'), 
            $('stories')); 
            
        revList.Count = ItemCount;
        revList.ListLeftMin = listMinLeft;

        var listItems = revList.List.getChildren();
        revList.ListItemWidth = listItems.length > 1 ? parseInt(listItems[1].getStyle('width')) : 169;

        revList.InitialiseStories();
    }
}

var StoryList = new Class({
        initialize: function(listContainer, storyList, itemCount, listMinLeft) {
                this.Container = listContainer;
                this.NavigationContainer = null;
                this.List = storyList;
                this.Count = 0;
                this.CurrentItem = 0;
                this.ListLeftMin = null;
                this.ListItemWidth = null;
                this.ScrollContainer = null;
                this.ScrollBar = null;
                this.ScrollLeftMin = 0;
                this.Working = false;
                this.ListPadWidth = 0;
            },
            
        InitialiseStories: function() {
                if (this.Count > 0) {
                    var backLink = $chk('backLinkCopy') ? $('backLinkCopy').value : 'back';
                    var nextLink = $chk('nextLinkCopy') ? $('nextLinkCopy').value : 'next';
                    
                    var navA = new Element('a', {
                            'class': 'floatingNavLink floatingNavLinkNext',
                            'events': {
                                'click': function() {return this.Navigate(1);}.bind(this)
                                }
                        });
                    
                    navA.setHTML("<span></span>" + nextLink);
                    navA.injectTop($('storySelector'));

                    navA = new Element('a', {
                            'class': 'floatingNavLink',
                            'events': {
                                'click': function() {return this.Navigate(-1);}.bind(this)
                                }
                        });
                    
                    navA.setHTML("<span></span>" + backLink);
                    navA.injectTop($('storySelector'));
                    
                                        this.NavigationContainer = new Element('ul', {'id': 'storyNav'});

                    navA = new Element('a', {
                            'class': 'navLink',
                            'events': {
                                'click': function() {return this.Navigate(-1);}.bind(this)
                                }
                        });
                    
                    navA.setText(backLink);

                    navLi = new Element('li');
                    navLi.appendChild(navA);

                    this.NavigationContainer.appendChild(navLi);
                    
                    navLi = new Element('li', {'class': 'next'});
                    navA = new Element('a', {
                            'class': 'navLink',
                            'events': {
                                'click': function() {return this.Navigate(1);}.bind(this)
                                }
                        });
                    
                    navA.setText(nextLink);
                    navLi.appendChild(navA);
                    this.NavigationContainer.appendChild(navLi);
                        
                    this.Container.appendChild(this.NavigationContainer);
                    this.Container.setStyle('overflow', 'hidden');

                    this.ScrollContainer = new Element('div', {'id': 'scrollDivContainer'});
                    this.ScrollBar = new Element('div', {'id': 'scrollDiv'});
                    this.ScrollContainer.appendChild(this.ScrollBar);
                    this.Container.appendChild(this.ScrollContainer);
                    this.ScrollLeftMax = parseInt(this.ScrollContainer.getStyle('width')) - 
                                            parseInt(this.ScrollBar.getStyle('width'));

                    if ($chk('storiesStart')) {
                        this.ListPadWidth = parseInt($('storiesStart').getStyle('width'));
                    }

                    if (this.Count > 5) {
                        this.ScrollBar.makeDraggable({
                                container: this.ScrollContainer,
                                onDrag: function() {this.ScrollBarDrag(parseInt(this.ScrollBar.getStyle('left')))}.bind(this),
                                onComplete: function() {this.ScrollComplete(parseInt(this.ScrollBar.getStyle('left')))}.bind(this)
                            });
                    }
                    
                    this.List.setStyle('width', this.ListPadWidth + this.Count * this.ListItemWidth);
                }
            },
            
        ScrollBarDrag: function(leftPosition) {
                var percent = (((leftPosition - this.ScrollLeftMin) / (this.ScrollLeftMax - this.ScrollLeftMin)));
                this.List.setStyle('left', percent * this.ListLeftMin + 'px');
            },
            
        ScrollComplete: function(leftPosition) {
                var scrollPad = Math.round(this.ScrollLeftMax * this.ListPadWidth / parseInt(this.List.getStyle('width')));
                var scrollUnit = (this.ScrollLeftMax - scrollPad) / (this.Count - 5);

                leftPosition = leftPosition > scrollPad ? leftPosition - scrollPad : 0;

                this.CurrentItem = Math.round(leftPosition / scrollUnit);
            },
            
        Navigate: function(direction) {
                if (this.Working) {
                    return true;
                }
                else if (this.Count > 0) {
                    var newIndex = this.CurrentItem;
                    
                    if (direction == 1 && (this.CurrentItem + 3 < this.Count - 1)) {
                        if (this.Count == 5) {
							newIndex += (this.CurrentItem + 8 < this.Count - 1 ? 3 : this.Count - 3 - this.CurrentItem);
						} else {
							newIndex += (this.CurrentItem + 8 < this.Count - 1 ? 4 : this.Count - 4 - this.CurrentItem);
						}
                    }
                    else if (direction < 1 && this.CurrentItem - 1 >= 0) {
                        if (this.Count == 5) {
							newIndex -= (this.CurrentItem - 3 >= 0 ? 3 : this.CurrentItem);
						} else {
							newIndex -= (this.CurrentItem - 4 >= 0 ? 4 : this.CurrentItem);
						}                        
                    }

                    if (newIndex != this.CurrentItem) {
                        var items = newIndex - this.CurrentItem;//direction != 1 ? -1 : 1;

                        this.MoveList(items);
                        this.CurrentItem = newIndex;

                        var currScrollPos = parseInt(this.ScrollBar.getStyle('left'));
                        var endScrollPos = this.CurrentItem * (parseInt(this.ScrollContainer.getStyle('width')) / (this.Count - 4));

                        if (endScrollPos < 0) {
                            endScrollPos = 0;
                        }
                        
                        fxSlide = new Fx.Style(this.ScrollBar, 'left', {
                            duration: 200, 
                            transition: Fx.Transitions.Quart.easeInOut
                        });

                        fxSlide.start(currScrollPos, endScrollPos);
                    }
                    else if (direction == 1 && (parseInt(this.List.getStyle('left')) > this.ListLeftMin))
                    {
                        this.MoveList(1);
                    }
                    
                    return false;
                }
                else {
                    return true;
                }
            },
            
        MoveList: function(items) {
                var startPos = parseInt(this.List.getStyle('left'));
                var endPos = startPos - (this.ListItemWidth * items);
                
                var fxSlide = new Fx.Style(this.List, 'left', {
                        duration: 500, 
                        transition: Fx.Transitions.Quart.easeInOut,
                        onStart: function() {this.Working = true;},
                        onComplete: function() {this.Working = false;}
                    });
                
                if (endPos < this.ListLeftMin) {
                    endPos = this.ListLeftMin;
                }

                if (Math.abs(endPos) < this.ListPadWidth) {
                    endPos = 0;
                }

                fxSlide.start(startPos, endPos);
            }
    });
//]]>