var featureFadeDelay = 8000;
var featureRotateTimeout = null;

function rotateFeatures(nextIndex) {
    clearTimeout(featureRotateTimeout);
    var list_items = $$('#features .feature');
    var nav_items = $$('#features .feature-nav-item');
    
    if (list_items.length != nav_items.length) return false;
    if (list_items.length < 1 || nav_items.length < 1) return false;
    
    if (list_items.length == 1) {
        list_items[0].setAttribute('style', '');
        nav_items[0].className = 'feature-nav-item selected';
    } else {
        nextFeature(nextIndex);
        featureRotateTimeout = setTimeout(function () { rotateFeatures(); }, featureFadeDelay);
    }
}

function nextFeature(nextIndex) {
    var list_items = $$('#features .feature');
    var nav_items = $$('#features .feature-nav-item');
    
    var currentIndex = null;
    
    // first, determine currentIndex and nextIndex
    for (var i = 0; i < list_items.length; i++) {
        if (list_items[i].className == 'feature selected') {
            currentIndex = i;
        }
    }
    if (typeof(nextIndex) == 'undefined' || nextIndex == null) {
        nextIndex = currentIndex + 1;
        if (nextIndex > (list_items.length-1)) nextIndex = 0;
    }
    
    // stop now if there's nothing to do
    if (currentIndex == nextIndex) return false;
    
    // hide all elements that aren't current, and reset classes
    for (var i = 0; i < list_items.length; i++) {
        if (i != currentIndex) {
            Element.hide(list_items[i]);
        }
        
        list_items[i].className = 'feature';
        nav_items[i].className = 'feature-nav-item';
    }
    
    // do the transition in css first
    list_items[nextIndex].className = 'feature selected';
    nav_items[nextIndex].className = 'feature-nav-item selected';
    
    // then with js effects
    Effect.Appear(list_items[nextIndex], { duration: 0.4 });
    setTimeout(function () { $(list_items[nextIndex]).style.opacity = 1.0; }, 450);
    
    if (currentIndex != null) Effect.Fade(list_items[currentIndex], { duration: 0.4 });
}

function prevFeature(feature_id) {
    var list_items = $$('#features .feature');
    var nav_items = $$('#features .feature-nav-item');
    
    var currentIndex = null;
    
    if (typeof(feature_id) == 'undefined') {
        nextIndex = feature_id
    } else {
        var nextIndex = 0;
        
        // map feature ID to nextIndex
        for (var i = 0; i < list_items.length; i++) {
            temp = list_items[i].getAttribute('id').split('_');
            id = temp[temp.length - 1];
            if (id == feature_id) {
                nextIndex = i;
                break;
            }
        }
    }
    
    // hide all selected
    for (var i = 0; i < list_items.length; i++) {
        if (list_items[i].className == 'feature selected') {
            if (!currentIndex) currentIndex = i;
            if (typeof(nextIndex) == 'undefined' || i != nextIndex) {
                Effect.Fade(list_items[i], { duration: 0.3 });
            }
        }
        
        list_items[i].className = 'feature';
        nav_items[i].className = 'feature-nav-item';
    }
    
    if (currentIndex == null) {
        currentIndex = list_items.length - 1;
    }
    if (typeof(nextIndex) == 'undefined') {
        nextIndex = currentIndex + 1;
        if (nextIndex > (list_items.length-1)) nextIndex = 0;
    }
    
    list_items[nextIndex].className = 'feature selected';
    nav_items[nextIndex].className = 'feature-nav-item selected';
    
    Effect.Appear(list_items[nextIndex], { duration: 0.4 });
    setTimeout(function () { $(list_items[nextIndex]).style.opacity = 1.0; }, 450);
    if (currentIndex != null) Effect.Fade(list_items[currentIndex], { duration: 0.4 });
}


function changeGalleryImage(galleryName, index) {
    var target = galleryName + '_image_' + index;
    var caption = galleryName + '_caption_' + index;
    if (!$(target)) return false;

    var queue = Effect.Queues.get('global');
    queue.each(function(e) { e.cancel() });
    
    for (var i = 0; i < gallerySize[galleryName]; i++) {
        el = $(galleryName + '_image_' + i);
        if (el.id != target && el.style.display != 'none') Effect.Fade(el, { duration: 0.6 });

        el = $(galleryName + '_thumb_' + i);
        if (el) {
            if (i == index) {
                $(el).addClassName('selected');
            } else {
                $(el).removeClassName('selected');
            }
        }
    }
    
    Effect.Appear(target, { duration: 0.6 });
    
    if($(caption).innerHTML != '') {
        $(galleryName + '_caption').style.display = 'block';
        $(galleryName + '_caption').innerHTML = $(caption).innerHTML;
    } else {
        $(galleryName + '_caption').style.display = 'none';
    }
    
    prevIndex = index == 0 ? gallerySize[galleryName] - 1 : index-1;
    nextIndex = index == gallerySize[galleryName] - 1 ? 0 : index+1;
    //$(galleryName + '_prev_button').onclick = function () { changeGalleryImage(galleryName, prevIndex) };
    //$(galleryName + '_next_button').onclick = function () { changeGalleryImage(galleryName, nextIndex) };
}


Effect.Scroll = Class.create();
Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    var options = Object.extend({
      x:    0,
      y:    0,
      mode: 'absolute'
    } , arguments[1] || {}  );
    this.start(options);
  },
  setup: function() {
    if (this.options.continuous && !this.element._ext ) {
      this.element.cleanWhitespace();
      this.element._ext=true;
      this.element.appendChild(this.element.firstChild);
    }

    this.originalLeft=this.element.scrollLeft;
    this.originalTop=this.element.scrollTop;

    if(this.options.mode == 'absolute') {
      this.options.x -= this.originalLeft;
      this.options.y -= this.originalTop;
    } else {

    }
  },
  update: function(position) {   
    this.element.scrollLeft = this.options.x * position + this.originalLeft;
    this.element.scrollTop  = this.options.y * position + this.originalTop;
  }
});