StarzPicks = Class.create({
    initialize: function(element) {
        this.element  = $(element);
        this.scroller = this.element.down('div.scroller');
        this.pages    = this.scroller.select('ul');
        this.locked   = false;
        this.chiclets = [];
        
        if (this.pages.length > 0) {
            this.pageWidth = this.pages[0].offsetWidth;
            this.scroller.setStyle({width: (this.pageWidth*this.pages.length)+'px'});
            
            //create chiclets
            var chicletContainer = this.element.down('div.chiclets');
            if(this.pages.length > 1)
            {
                for (var i=0; i<this.pages.length; i++) {
                    var chiclet = new Element('a', {href: "#", title: 'Page '+(i+1)});
                        chiclet.observe('click', this.onChicletClick.bindAsEventListener(this));
                    if (i==0) chiclet.addClassName('active');
                    chicletContainer.appendChild(chiclet);
                    this.chiclets.push(chiclet);
                }
            }
        }
    },
    onChicletClick: function(event) {
        event.stop();
        if (!this.locked) {
            var chiclet = event.element();
            var page    = this.chiclets.indexOf(chiclet);
            
            this.chiclets.invoke('removeClassName', 'active');
            chiclet.addClassName('active');
            this.gotoPage(page);
        }
    },
    gotoPage: function(page) {
        var current = this.scroller.offsetLeft;
        var end = -this.pageWidth * page;
        
        this.lock();
        var effect = new Fx.Style(this.scroller, 'left', {duration: 600, onComplete: this.unlock.bind(this)});
            effect.custom(current, end);
    },
    lock: function() {
        this.locked = true;
    },
    unlock: function() {
        this.locked = false;
    }
});
StarzPicks.init = function() {
    StarzPicks.instance = new StarzPicks('StarzPicks');
}
Event.observe(window, 'load', StarzPicks.init);

NewInExtras = Class.create({
    initialize: function(element) {
    	if (typeof element=="undefined") return;
    	
        this.element  = element;
        this.data = element.select('ul')[0];
        this.data.remove();
        this.items = this.data.select('li');
        
        this.imageLink = new Element('a');
        this.image = new Element('img');
        this.chiclets = new Element('div', {'class':'chiclets'});
        this.description = new Element('div', {'class':'description'});
        
        this.element.appendChild(this.imageLink);
        this.imageLink.appendChild(this.image);
        this.element.appendChild(this.chiclets);
        this.element.appendChild(this.description);
        
        this.createChiclets();
        this.setItem(0);        
    },
    createChiclets: function() {
        if(this.items.length > 1)
        {
            for (var i=0; i<this.items.length; i++) {
                var chiclet = new Element('a', {href: "#", title: 'Item '+(i+1)});
                    chiclet.observe('click', this.onChicletClick.bindAsEventListener(this));
                if (i==0) chiclet.addClassName('active');
                this.chiclets.appendChild(chiclet);
            }
        }
    },
    onChicletClick: function(event) {
        event.stop();
        if (!this.locked) {
            var chiclet = event.element();
            var item    = this.chiclets.select('a').indexOf(chiclet);
            
            this.chiclets.select('a').invoke('removeClassName', 'active');
            chiclet.addClassName('active');
            this.setItem(item);
        }
    },
    setItem: function(index) {
        var item = this.items[index];
        var imageLink = item.select('a')[1];
        var image = item.select('img')[0];
        var headline = item.select('h4')[0];
        var subhead = item.select('h5')[0];
        var description = item.select('p')[0];
        
        
        this.image.src = image.src;
        this.imageLink.href = imageLink.readAttribute('href');
        this.description.innerHTML = '';
        var output = '';
        if (subhead) {
            output += '<h5>'+subhead.innerHTML+'</h5>';
        }
        if (headline) {
            output += '<h4>'+headline.innerHTML+'</h4>';
        }
        if (description) {
            output += '<p>'+description.innerHTML+'</p>';
        }
        this.description.innerHTML = output;
    }
});
NewInExtras.init = function() {
    NewInExtras.instance = new NewInExtras($$('div.NewInExtras')[0]);
}
Event.observe(window, 'load', NewInExtras.init);