var mediaSlider = Class.create(Carousel, {
  increment: 87,
  indexed:   1,
  prevInd:   0,
  moving:    false,
  fixed:     3,
  item:      0,
  flip:      false,
  initialize: function($super,elem,links,opts) {
    $super(elem,links,opts);
    this.modulus = this.total % this.fixed;
  },
  slide: function(evt,link) {
    Event.stop(evt);
    if (this.moving) return;
    this.moving = true;
    var dir = link.href.split('#');
    dir = (dir[dir.length-1] == 'up') ? 1 : -1;
    this.indexed -= dir;
    if (this.indexed == this.scrolls || this.flip && this.modulus != 0) {
    this.flip = (this.flip) ? false : true;
    var inc = this.increment * this.modulus * dir;
    } else {
    var inc = this.increment * this.fixed * dir;
    }

    new Effect.MoveBy(this.item, inc, 0, {duration:1.0, afterFinish:function() {this.moving = false;}.bind(this)});    
    this.setArrows(this.indexed);

  }
});

var inlineSlide = Class.create();

inlineSlide.prototype = {
increment: 87,
indexed:   1,
prevInd:   0,
moving:    false,
fixed:     3,
item:      0,
flip:      false,
initialize: function(elem) {
this.item = $(elem);
this.total = this.item.immediateDescendants().length;
this.scrolls = Math.ceil(this.total / this.fixed);
this.modulus = this.total % this.fixed;
this.item.style.height = (this.increment * this.total) + 'px';
$$('a.move').each(function(link) {
link.observe('click',this.slide.bindAsEventListener(this,link));
}.bind(this));
this.setArrows(this.indexed);
},
setArrows: function(index) {
var links = $$('a.move');
links[0].style.visibility = (index == 1) ? 'hidden' : 'visible';
links[1].style.visibility = (index == this.scrolls) ? 'hidden' : 'visible';
},
slide: function(evt,link) {
if (this.moving) return;
this.moving = true;
var dir = link.href.split('#');
dir = (dir[dir.length-1] == 'up') ? 1 : -1;
this.indexed -= dir;
if (this.indexed == this.scrolls || this.flip && this.modulus != 0) {
this.flip = (this.flip) ? false : true;
var inc = this.increment * this.modulus * dir;
} else {
var inc = this.increment * this.fixed * dir;
}

new Effect.MoveBy(this.item, inc, 0, {duration:1.0, afterFinish:function() {this.moving = false;}.bind(this)});    
this.setArrows(this.indexed);
Event.stop(evt);
}
};



var Accordion = Class.create();
Accordion.prototype = {
drawers:    [],
opened:     0,
total:      -1,
foldHeight: 111,
initialize: function(elem) {
// find our elements
this.total += $$('#' + elem + ' .fold').length;
$$('#' + elem + ' .fold').each(function(e, index) {
this.drawers[index] = e;
this.drawers[index].opened = false;
this.drawers[index].fold = e.down('div');
this.attachSlider(this.drawers[index].fold);
}.bind(this));
$$('h2.indicator').each(function(e,index) {
e.observe('click',this.toggle.bindAsEventListener(this, index));
}.bind(this));

this.drawers[this.opened].style.backgroundImage = 'url(http://static.oprah.com/images/global/fpplayer_slider_hightlight_active_top_299x35.gif)';
this.drawers[this.opened].opened = true;
this.drawers[this.total].style.backgroundImage = 'url(http://static.oprah.com/images/global/fpplayer_slider_hightlight_bottom_299x35.gif)';
//this.drawers[this.total].fold.style.backgroundImage = 'url(http://static.oprah.com/images/global/fpplayer_slider_bottom_299x60.png)';
//new Effect.Opacity(this.drawers[this.opened].down('span'),{duration:0.5,from:1.0, to:0.0});
this.drawers[this.opened].down('img').src = "http://static.oprah.com/images/global/fpplayer_arrow_down_9x6.png";
new Effect.Morph(this.drawers[this.opened].fold,{style:'height:'+this.foldHeight+'px;',duration:.5});
},
toggle: function(evt,elementIndx) {
Event.stop(evt);
// make sure the drawer is not open already
if (this.drawers[elementIndx].opened) return;

// take care of the indicators and state track open state
//new Effect.Opacity(this.drawers[this.opened].down('span'),{duration:0.5,from:0.0, to:1.0});
this.drawers[this.opened].down('img').src = "http://static.oprah.com/images/global/fpplayer_arrow_right_5x10.png";
//new Effect.Opacity(this.drawers[elementIndx].down('span'),{duration:0.5,from:1.0, to:0.0});
this.drawers[elementIndx].down('img').src = "http://static.oprah.com/images/global/fpplayer_arrow_down_9x6.png";      

this.drawers[this.opened].opened = false;
this.drawers[elementIndx].opened = true;

// set appropriate background for new fold
if (elementIndx == 0) {
var activeState = 'fpplayer_slider_hightlight_active_top_299x35.gif';
} else if (elementIndx == this.total) {
var activeState = 'fpplayer_slider_hightlight_active_middle_299x35.gif';
$('temp_box').style.display = "block";
// show hide the bottom toggle
} else {
var activeState = 'fpplayer_slider_hightlight_active_middle_299x35.gif';
}

// reset background for previous fold
if (this.opened == 0) {
var resetState = 'fpplayer_slider_hightlight_top_299x35.gif';
} else if (this.opened == this.total) {
var resetState = 'fpplayer_slider_hightlight_bottom_299x35.gif';
$('temp_box').hide();
// hide the bottom toggle
} else {
var resetState = 'fpplayer_slider_hightlight_middle_299x35.gif';
}

this.drawers[elementIndx].style.backgroundImage = 'url(http://static.oprah.com/images/global/' + activeState + ')';
this.drawers[this.opened].style.backgroundImage = 'url(http://static.oprah.com/images/global/' + resetState + ')';

new Effect.Parallel([
new Effect.Morph(this.drawers[elementIndx].fold,{sync:true,style:'height:'+this.foldHeight+'px;'}),
new Effect.Morph(this.drawers[this.opened].fold,{sync:true,style:'height:0px;'})
],{
duration:0.5,
fps:40
});
this.opened = elementIndx;
},
attachSlider: function(elem) {
// attach slider controls
var scrollable = elem.down('ul').immediateDescendants().length;
var handle     = elem.down('.scroller_handle');
var track      = elem.down('.scroller_track');
if (scrollable < 4 && scrollable != 0) {
// if list is too small, gray it out
track.style.visibility  = "hidden";
handle.style.visibility = "hidden";
} else {
// else attach slider
elem.slider = new Control.Slider(handle,track , {
axis: 'vertical',
onSlide: this.setScrollBox.bindAsEventListener(this, elem),
onChange: this.setScrollBox.bindAsEventListener(this, elem)
});
// mozilla
//Event.observe(elem, 'DOMMouseScroll', this.wheel.bindAsEventListener(this, elem));
// IE/Opera
//Event.observe(elem, 'mousewheel', this.wheel.bindAsEventListener(this, elem));
}
},
setScrollBox: function(slideValue, elem) {
//console.log(elem);
//console.log(this.drawers[0].slider);
//console.log(slideValue);
//console.log(elem);
//if (isNaN(value)) value = 0;
var hval = (this.foldHeight - (elem.down('ul').getHeight() + 10)) * slideValue;
var value = (isNaN(hval)) ? 0 : hval;
elem.down('ul').style.top = value + 'px';
},
wheel: function(event, elem) {
if (!elem.delta) elem.delta = 0;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta) {
elem.delta += delta;
this.setScrollBox(elem.delta, elem);
}
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
};