bh.slideshow = function() {
  var that = {},
      item_list = [],
      my = {},
      timeout = 9000,
      index = 1,

  init = function(data) {
    my.container = $('#' + data.container);

    my.container.css({position:"relative"});

    $(data.items).each(function() {
        item_list.push(slideshow_item(this));
    });

    my.container.everyTime(timeout, function() {
      next_item();
    });

    my.nav = navigation();

  },

  slideshow_item = function(item) {
    var html = $('<img />', { src: item.image });

    if(item.video_url) {
      html = $('<a></a>', { href: item.video_url, 'class': 'video' }).append(html);
    } else if(item.url) {
      html = $('<a></a>', { href: item.url }).append(html);
    }

    html.css({position:"absolute", top:0, left:0});

    return html;
  },

  next_item = function(i) {
    if(i >= 0) index = i;

    var item = item_list[index],
        container = my.container.find('div.item');

    container.append(item);

    item.hide().fadeIn('slow', function() {
      var old_items = container.find('>a,>img')
                                  .filter(':not(:last-child)');
      old_items.remove();
    });

    my.nav.activate(index);

    index = function() { return index >= item_list.length - 1 ? 0 : index + 1; }();
  },

  navigation = function() {
    var sup = that,
        that = {},

    play_button = function(paper, index) {
      var button = paper.set(),
          btn_attr = {"stroke-width":0, fill:"#bebebe"},
          state = 'playing',
          dark = "#bebebe",
          light = "#fff",
          left = (index * 20) + 30,
          that = {};

      button.push(
        paper.circle(left, 10, 7).attr({stroke:"#bebebe", fill:"none"}),
        paper.path("M" + left + ",10m-1.5,-3l0,6zm3.25,0l0,6z").attr({stroke:dark, "stroke-width":2}),
        paper.path("M" + left + ",10m-1.5,-4l0,8l4,-4z").attr(btn_attr).hide(),
        paper.circle(left, 10, 7).attr({fill:"#000", opacity:0})
      );

      paper.path("M" + left + ",2m-15,0l0,16").attr({stroke:"#bebebe"});

      $(button[0].node).css({cursor:"pointer"});
      $(button[1].node).css({cursor:"pointer"});
      $(button[2].node).css({cursor:"pointer"});
      $(button[3].node).css({cursor:"pointer"});

      button.hover(function(event) {
        button[0].attr({stroke:light});
        button[1].attr({stroke:light});
        button[2].attr({fill:light});
      }, function(event) {
        button[0].attr({stroke:dark});
        button[1].attr({stroke:dark});
        button[2].attr({fill:dark});
      });

      button.click(function() {
        if(state === 'playing') {
          change_state('stopped');
        }
        else {
          change_state('playing');
        }
      });

      var change_state = function(new_state) {
        if(new_state === 'playing') {
          next_item();
          my.container.everyTime(timeout, function() {
            next_item();
          });
          state = 'playing';
          button[1].show();
          button[2].hide();
        }
        else {
          my.container.stopTime();
          state = 'stopped';
          button[1].hide();
          button[2].show();
        }
      };

      that.change_state = change_state;

      return that;
    },

    circle = function() {

      return {
        active: false,

        activate: function() {
          var icon_path = "";
          var that = this;

          this.active = false;
          this.element.animate({fill:"#666666"}, 500);

        },

        deactivate: function() {
          this.active = true;
          this.element.animate({fill:"#bebebe"}, 500);
          if(this.state_icon) this.state_icon.remove();
        },

        create: function(paper, index) {
          this.paper = paper;
          this.center = {x:(index * 20) + 20, y:10};
          this.element = paper.circle(this.center.x, this.center.y, 7).attr({fill:"#ccc", "stroke-width":0});
          $(this.element.node).css({cursor:"pointer"});

          return this;
        }
      };

    },

    activate = function(index) {
      $(nav_list).each(function() {
        this.deactivate();
      });

      if(nav_list[index]) nav_list[index].activate();
    };


    var nav = $('<div class="navigation"></div>').appendTo(my.container).hide().fadeIn('fast'),
        play = '',
        nav_list = [];

    var p = Raphael(nav[0], (40 * item_list.length) + 50, 20);

    $(item_list).each(function(i) {
      nav_list.push(new circle());
      nav_list[i].create(p, i);
      nav_list[i].element.click(function() {
        play.change_state('stopped');
        next_item(i);
      });
    });

    if(nav_list.length > 0) play = play_button(p, nav_list.length);

    nav_list[0].activate(0);

    that.activate = activate;

    return that;

  };


  that.init = init;

  return that;
}();

