bh.carousel = function() {
  var that = {},

  init = function(data, params) {
    if(data.items.length > 1) new carousel(data, params);
  },

  carousel = function(data, params) {
    var my = {},
        timeout = 8000,
        state = "playing";

    if(params) {
      if(params.timeout) timeout = params.timeout;
      if(params.state) state = params.state;
    }

    my.container = $('#' + data.container).css({overflow:"hidden"});

    var item_list = [],
        index = 1,
        items = data.items,

    carousel_item = function(item) {
      var html = $("<div class='item'></div>"),
          slug = '/' + item.slug;
      
      $("<div class='image'></div>").append($("<a></a>", { href: slug }).append(item.image)).append(item.resource_link).appendTo(html);
      $("<h3></h3>").append($("<a></a>", { href: slug, text: item.page_header })).appendTo(html);
      if(item.region) $("<span class='region'>Region: </span>").append($("<a></a>", {text: item.region.page_header, href: slug})).appendTo(html);
      if (item.hide_date != true) $("<span></span>", {"class": "date", text: "Date: " + item.created_at}).appendTo(html);
      $("<p></p>", { text: Encoder.htmlDecode(item.short_description) }).appendTo(html);
      $(item.view_more).appendTo(html);

      return html;
    },

    add_carousel_item = function(item) {
      var width = my.container.width(),
          height = my.container.height();

      var old_item = my.container.find('>div.item');
      if(old_item.length > 1) {
        old_item.remove();
        height = 0;
      }

      $(item).appendTo(my.container);
      $(item).css({left: width, bottom: height, opacity: 0});

      old_item.animate({left: -1 * width, opacity: 0}, 1000);
      $(item).animate({left: 0, opacity: 1}, 1000, function() {
        $(this).css({bottom: 0});
        this.style.removeAttribute && this.style.removeAttribute("filter");
        old_item.remove();
      });
    },

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

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

          button.push(
            paper.circle(left, 10, 7).attr({stroke:"#bebebe", fill:"#fff"}),
            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).toBack()
          );

          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.hover(function(event) {
            button.attr({fill:light});
            button[0].attr({fill:dark});
            button[1].attr({stroke:light});
          }, function(event) {
            button.attr({fill:dark});
            button[0].attr({fill:light});
            button[1].attr({stroke:dark});
          });

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

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

          if(state !== 'playing') change_state('stopped');

          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 * 17) + 10, 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();
      },
      nav_list = [];

      var nav = $('<div class="carousel_navigation"></div>').css({position:"absolute", left:5, bottom:5, "z-index":5, background:"#fff"}).appendTo(my.container);

      var p = Raphael(nav[0], (17 * item_list.length) + 35, 20),
          play = '';

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

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

      that.activate = activate;

      return that;
    },

    advance_carousel = function(i) {
      if(i >= 0) index = i;
      add_carousel_item(item_list[index]);
      nav.activate(index);
      index = function() { return index >= item_list.length - 1 ? 0 : index + 1; }();
    };



    $(items).each(function(index, item) { item_list.push(carousel_item(item)); });
    var nav = new navigation();

    nav.activate(0);

    if(state === 'playing') {
      my.container.everyTime(timeout, function() {
        advance_carousel();
      });
    }

  };

  that.init = init;

  return that;
}();