$('#slide_gallery').hide();

var settings = {
  'timeout': '15s',
  'speed': 500,
  'imgWidth': 600,
  'imgHeight': 450
};

var showIndex = 0;
var fadeIndex = showIndex - 1;

Slide = $.klass({

  initialize: function() {
    this.element.append('\n<div id="gallery"></div>\n');
    this.gallery = $('#gallery', this.element)
      .addClass(settings.containerClass)
      .before($('h1', this.element))
      .before('<table id="slide_navy"><tr></tr></table>')
      .append($('img', this.element));
    this.navigation = $('#slide_navy', this.element)
      .css('width', settings.imgWidth);

    this.img = $('img', this.gallery)
      .css('border', 0)
      .css('padding', 0)
      .wrap('<li></li>');

    $('p', this.element).remove();

    this.img.each(function(){
      $(this).attr('width', settings.imgWidth);
      var title = $(this).attr('title');
//      $(this).after('<p>' + title + '</p>');
    });

    this.elements = $('li', this.gallery)
      .appendTo(this.gallery)
      .css('list-style', 'none')
      .css('width', settings.imgWidth)
      .hide();

    $('tr', this.navigation)
      .append('<td class="prev"><a href="#" id="slide_prev"></a></td>')
      .append('<td class="slideshow"><a href="#" id="slideshow_start"></a><a href="#" id="slideshow_stop"></a></td>')
      .append('<td class="next"><a href="#" id="slide_next"></a></td>');

    this.gallery.change( $.bind(this.change, this) );

    this.slide_prev = $('#slide_prev').click( $.bind(this.click_prev, this) );
    this.slideshow_start = $('#slideshow_start').click( $.bind(this.click_start, this) );
    this.slideshow_stop = $('#slideshow_stop').click( $.bind(this.click_stop, this) ).hide();
    this.slide_next = $('#slide_next').click( $.bind(this.click_next, this) );

    $('#content style, #content .element').remove();

    $(this.elements[showIndex]).fadeIn(settings.speed);
  },

  click_start: function() {
    this.slideshow_start.hide();
    this.slideshow_stop.show();
    this.elements.hide();
    this.next();
    this.gallery.everyTime(settings.timeout, $.bind(this.next, this));
    return false;
  },

  click_stop: function() {
    this.slideshow_stop.hide();
    this.slideshow_start.show();
    this.gallery.stopTime();
    return false;
  },

  click_prev: function() {
    this.click_stop();
    this.prev();
    return false;
  },

  click_next: function() {
    this.click_stop();
    this.next();
    return false;
  },

  prev: function() {
    showIndex--;
    var elements = this.elements;
    if (showIndex < 0) {
      showIndex = elements.length - 1;
    }
    fadeIndex = showIndex + 1;
    if (showIndex == elements.length - 1) {
      fadeIndex = 0;
    }
    this.change();
    return false;
  },

  next: function() {
    showIndex++;
    var elements = this.elements;
    if (showIndex > elements.length - 1) {
      showIndex = 0;
    }
    fadeIndex = showIndex - 1;
    if (showIndex <= 0) {
      fadeIndex = elements.length - 1;
    }
    this.change();
  },

  change: function() {
    var elements = this.elements;
    $(elements[fadeIndex]).fadeOut(settings.speed, function() {
      $(elements[showIndex]).fadeIn(settings.speed);
    });
  }
});

$(document).ready(function(){

  $('#slide_gallery').attach(Slide);

});