/*
 * KoldCast Featured Scroller Class
 * @author Sean Hsieh (envsn.com)
 *
 */

// This scroller requires a parent object, itemWidth, previous button, next button, and slider 
// with the number of elements it will be preparing 
var Scroller = Class.create({
    
    holder: null,
    itemWidth: null,
    prevBtn: null,
    nextBtn: null,
    slider: null,
    sliderObj: null,
    sliderMarks: null,
    position: 1,
    queue: Effect.Queues.get('scroller'),
    bookmarks: null,
   
    initialize: function(holder, itemWidth, prevBtn, nextBtn, slider, tracker, sliderMarks, bookmarks, exchange) {
        this.holder = $(holder);
        this.itemWidth = itemWidth;
        this.prevBtn = $(prevBtn);
        this.nextBtn = $(nextBtn);
        this.slider = $(slider);
        this.tracker = tracker;
        this.sliderMarks = sliderMarks;
        this.position = 1;                                           // assuming that the slider will begin at item 1
        this.bookmarks = $(bookmarks).childElements();
        this.exchange = $(exchange);
       
        this.prevBtn.observe('click', this.scrollPrevious.bindAsEventListener(this));
        this.nextBtn.observe('click', this.scrollNext.bindAsEventListener(this));
        
        // associating the hover areas to work also as prev/next buttons

        $('leftGradient').observe('click', this.scrollPrevious.bindAsEventListener(this));
        $('rightGradient').observe('click', this.scrollNext.bindAsEventListener(this));
        
        // creating the facade of the left & right edges as continuation of the strip
        ;
        $$('li.edge')[1].setStyle({background: 'transparent '+this.holder.childElements()[1].childElements()[0].childElements()[0].getStyle('background-image')+' top left no-repeat'}).addClassName('radius8');
        $$('li.edge')[0].setStyle({background: 'transparent '+this.holder.childElements()[6].childElements()[0].childElements()[0].getStyle('background-image')+' top right no-repeat'}).addClassName('radius8');
        
        var cleanup = this.holder.childElements();
        for (i=2;i<=sliderMarks;i++) {
            cleanup[i].childElements()[2].hide();
            cleanup[i].childElements()[3].hide();
            cleanup[i].childElements()[5].hide();
        }

        this.exchange.innerHTML = cleanup[1].childElements()[4].innerHTML;
        
        this.sliderObj = new Control.Slider(tracker, slider, {
            axis: 'horizontal',
            increment: 1,
            alignX: 0,
            range: $R(1, 6),
            values: $R(1, 6),
            sliderValue: 1,
            minimum: 1,
            maximum: sliderMarks
        });

        for (i=0;i < this.bookmarks.size(); i++) {
            this.bookmarks[i].observe('click', this.setMark.bindAsEventListener(this,i+1));
        }
    },
   
    repeatMarks: function() {
        return 'marks: ' + this.sliderMarks + ' position: ' + this.position;
    },
   
    scrollPrevious: function(e) {
        e.stop();
        if (this.position > 1) {
            this.sliderObj.setValue(this.position-1);
        }
        else {
            // this will only happen when we're at the edge
            this.sliderObj.setValue(6);
        }
    },
   
    scrollNext: function(e) {
        e.stop();
        if (this.position < this.sliderMarks) {
            this.sliderObj.setValue(this.position+1);
        }
        else {
            this.sliderObj.setValue(1);
        }
        return true;
    },

    scrollTo: function(obj, number) {
        var delta = (number - obj.position) / -1;
        new Effect.Move(obj.holder, {
            x: delta * obj.itemWidth,
            y: 0,
            queue: {
                position: 'end',
                scope: 'scroller'
            }
        });
        this.hideInfo(obj.position);
        obj.position = number;
        this.showInfo(obj.position);
    },
    
    setMark: function(e,number) {
        e.stop();
        //console.log("number: " + number + ' old position: ' + this.position);
        this.sliderObj.setValue(number);
    },
    
    showInfo: function(mark) {
        var li = this.holder.childElements()[mark];
        var title = li.childElements()[2];
        var subtitle = li.childElements()[3];
        var description = li.childElements()[4].innerHTML;
        var anchor = li.childElements()[5];
        title.show();
        subtitle.show();
        anchor.show();

        this.exchange.innerHTML = description;
    },
    
    hideInfo: function(mark) {
        var li = this.holder.childElements()[mark];
        var title = li.childElements()[2];
        var subtitle = li.childElements()[3];
        var anchor = li.childElements()[5];
        title.hide();
        subtitle.hide();
        anchor.hide();
    },
   
    slideTo: function(bookmark) {
        //
    }
});

var interval = null;  // will store drop down timer on a global scope

var dropDownCount = function() {
    interval = setTimeout('toggleCategories()', 1500);
}

var dropDownSave = function() {
    clearTimeout(interval);
}

var testFunction = function() {
    alert('boom');
}

function toggleCategories() {
    if ($('categoryList').hasClassName('hide')) {
        $('categoryList').removeClassName('hide');
        $('dropDown').addClassName('active');

        // let's initiate the timer right away in case they never hover into the drop down
        dropDownCount();

        $('categoryList').observe('mouseout', dropDownCount);
        $('categoryList').observe('mouseover', dropDownSave);
    }
    else {
        $('categoryList').addClassName('hide');
        $('dropDown').removeClassName('active');
        
        $('categoryList').stopObserving('mouseout', dropDownCount);
        $('categoryList').stopObserving('mouseover', dropDownSave);
        dropDownSave();
    }
}