var sliders = new Array();
var Slider = function($slider) {
  this.timer = 500;
  this.numChildren = 0;
  this.children = new Array();
  this.currIndexPosition = 0;
  this.marginLeft = 0;
  this.obj = $slider;
  this.slider = $slider.find("ul.slider-content");
  this.increment = $slider.find("div.slider-window").width();
  this.viewAblewChildren = 1;
  this.init = function() {
    var that = this;
    this.numChildren = this.slider.find("li").length;
    this.slider.width(parseInt(this.increment*this.numChildren, 10));
    this.slider.find("li").each(function(i, el){
      that.children[i] = $(el);
      var $legend = $("<p class='legend'>"+$(el).find("img").attr('title')+"</p>");
      $(el).append($legend);
    });

    // create controls
    var $go_left = $("<a href='javascript://' class='go-left'><img src='images/arrow_previous.png'></a>");
    var $go_right = $("<a href='javascript://' class='go-right'><img src='images/arrow_next.png'></a>");
    this.obj.prepend($go_left);
    this.obj.prepend($go_right);

    $go_left.click(function() {
      that.goLeft();
      console.log('goleft');
    });
    $go_right.click(function() {
      that.goRight();
      console.log('goright');
    });
    // make binds
  };
  this.goLeft = function() {
    if (this.currIndexPosition <= 0) {
      return false;
    }
    this.marginLeft += this.increment;
    this.slider.stop(true).animate({
      'margin-left': this.marginLeft
    },
    this.timer, 'easeOutQuart');
    this.currIndexPosition -= this.viewAblewChildren;
    return true;
  };
  this.goRight = function() {
    if (this.currIndexPosition >= (this.numChildren - this.viewAblewChildren)) {
      return false;
    }
    this.currIndexPosition += this.viewAblewChildren;
    this.marginLeft -= this.increment;
    this.slider.stop(true).animate({
      'margin-left': this.marginLeft
    },
    this.timer, 'easeOutQuart');
    return true;
  };
  this.init();
};
$(document).ready(function(){
  //startup sliders
  $(".slider").each(function(i, el){
    sliders[i] = new Slider($(el));
  });
  
  // bind open/close blocks
  $("div.artist h2").click(function(){
    $artist = $(this).parents("div.artist");
    if ($artist.hasClass("open")) {
      // $artist.find("div.about").slideUp(500, function(){
      //   $artist.removeClass("open");
      // });
      $artist.find("div.block").slideUp(500, function(){
        $artist.find("div.header ul").fadeOut(500, function(){
          $artist.find("div.block").removeClass("open");
          $artist.removeClass("open");
        });
        $artist.find("div.header ul li").removeClass("active");          
      });
    } else {
      $artist.find("div.about").addClass("open");
      $artist.find("div.about").slideDown(500, function(){
        $artist.find("div.header ul li.about").addClass("active");          
        $artist.find("div.header ul").fadeIn(500, function(){
          $artist.addClass("open");
        });
      });
    }
  });


  $("div.artist div.header ul li").click(function(){
    $li = $(this);
    $ul = $li.parent();
    $artist = $ul.parents('div.artist');
    // remove active from menu links
    $ul.find("li").removeClass("active");
    // add active on clicked ink
    $li.addClass("active");
    // close open blocks
    $artist.find(".block").slideUp(500, function(){
      $(this).removeClass("open");
    });
    // open clicked block
    if ($li.hasClass('about')) {
      $artist.find(".block.about").slideDown(500, function(){
        $(this).addClass("open");
      });
    } else if ($li.hasClass('biography')) {
      $artist.find(".block.biography").slideDown(500, function(){
        $(this).addClass("open");
      });
    } else if ($li.hasClass('works')) {
      $artist.find(".block.works").slideDown(500, function(){
        $(this).addClass("open");
      });
    } else if ($li.hasClass('testimonial')) {
      $artist.find(".block.testimonial").slideDown(500, function(){
        $(this).addClass("open");
      });
    }
  });
  
  $("#gt h2").click();
});