var Workboard = {};
Workboard.AllCategory = "all";
Workboard.Works = [
  { client: "Mutually Human Software", 
    title: "Inspire CRM",
    url: "inspirehq.com", 
    image_url: "/images/work/inspire.png",
    categories: ["Strategy & Design", "Front End Development", "Ruby on Rails"]
  },
  { client: "Mayo Clinic", 
    title: "Mayo Clinic Embody Health",
    url: "mayoclinic.com", 
    image_url: "/images/work/embodyhealth.png",
    categories: ["Strategy & Design", "Front End Development"]
  },
  { client: "Imikimi",
    title: "Imikimi.com",
    url: "imikimi.com",
    image_url: "/images/work/imikimi.png",
    categories: ["Strategy & Design", "Front-End Development", "Ruby on Rails"]
  },
  { client: "State of Nebraska",
    title: "Quest 2 Project",
    url: "nde.gov",
    image_url: "/images/work/nde.png",
    categories: ["Strategy & Design", "Front-End Development", "Ruby on Rails"]
  },  
  { client: "Metromix",
    title: "Mischieve Hornitos Microsite",
    url: "mischievesocal.com",
    image_url: "/images/work/mischievesocal.png",
    categories: ["Front-End Development", "Ruby on Rails"]
  },  
  { client: "Plastic Surgery Associates",
    title: "CRM/Rewards/Misys Tiger Integration",
    url: "psa-gr.com",
    image_url: "/images/work/psa.png",
    categories: ["Strategy & Design", "Ruby on Rails"]
  },  
  { client: "Geezeo",
    title: "Admin & Mobile Application",
    url: "geezeo.com",
    image_url: "/images/work/geezeo.png",
    categories: ["Strategy & Design", "Ruby on Rails", "Mobile"]
  },  
  { client: "Joe Cartoon",
    title: "JoeCartoon.com",
    url: "joecartoon.com",
    image_url: "/images/work/joecartoon.png",
    categories: ["Front-End Development", "Ruby on Rails"]
  },  
  { client: "Cyber PR", 
    title: "Ariel Publicity",
    url: "arielpublicity.com/", 
    image_url: "/images/work/cyberpr.png",
    categories: ["Strategy & Design", "Front End Development", "Ruby on Rails"]
  },
  { client: "Greenriver", 
    title: "Global Challenge Award",
    url: "greenriver.org", 
    image_url: "/images/work/gca.png",
    categories: ["Strategy & Design", "Ruby on Rails"]
  },
  { client: "GOCN",
    title: "the Gospel and Our Culture Network",
    url: "gocn.org",
    image_url: "/images/work/gocn.png",
    categories: ["User Experience", "Drupal"]
  },
  { client: "Grand Rapids GiveCamp",
    title: "Grand Rapids GiveCamp",
    url: "grgivecamp.org",
    image_url: "/images/work/grgivecamp.png",
    categories: ["User Experience", "Graphic Design", "Drupal", "Volunteer"]
  },
  { client: "Devine Group",
    title: "Wingnut",
    url: "wingnut.com",
    image_url: "/images/work/wingnut.png",
    categories: ["Strategy & Design", "Front-End Development", "Ruby on Rails"]
  },  
  { client: "Mindloom",
    title: "WinnowTag Feed Reader",
    url: "winnowtag.org",
    image_url: "/images/work/winnow.png",
    categories: ["Strategy & Design", "Front-End Development", "Ruby on Rails"]
  },
  { client: "Western Theological Seminary",
    title: "Westernsem.edu",
    url: "westernsem.edu",
    image_url: "/images/work/wts.png",
    categories: ["Strategy & Design", "Drupal"]
  }
];

Workboard.Categories = Workboard.Works.collect(function(e){ return e.categories; }).flatten().uniq();
Workboard.Clients = Workboard.Works.collect(function(e){ return e.client; }).flatten().uniq().sort();

Workboard.Behavior = Behavior.create({
  initialize: function(){
    this.workboard = this.element;
    this.categories = this.workboard.down(".categories");
    this.clients = this.workboard.down(".clients");

    this._populateWorksByCategory(Workboard.Works);
    this._populateClients(Workboard.Clients);
    
    this.all_category = this.workboard.down(".categories .category[data-name='" + Workboard.AllCategory + "']");
    this.last_selected = this.workboard.down(".menu .item.active");
    this.current_category = this.all_category;
    this.works = this.workboard.select(".work");
    
    this._initializeMenuiItems();
    this._initializeClients();
    
    this.categories.show();
    this.current_category.show();
  },
  
  filterWorkToCategory: function(element){
    if(this.last_selected)
      this.last_selected.removeClassName("active");
    element.addClassName("active");
    this.last_selected = element;

    var category_name = element.getAttribute("data-category");
    var selected_category = this.workboard.down(".category[data-name='" + category_name + "']");
    var last_category = this.current_category;
    
    if(last_category.getAttribute("data-name") == category_name)
      return;

    this.in_transition = true
    last_category.fade({
      duration: 0.25, from: 1, to: 0, 
      afterFinish: function(){
        selected_category.appear({
          duration: 0.25, from: 0, to: 1,
          afterFinish: function(){ 
            this.current_category = selected_category;
            this.in_transition = false ; }.bind(this)
         });
      }.bind(this)
    });
  },

  _populateWorksByCategory: function(works){
    var works_by_category = this._groupWorksByCategory(works);

    // create category containers
    var category_template = new Template(this.categories.down(".category[data-template=true]").remove().innerHTML);
    var category_containers = {};
    var category_element;

    // create an all category
    this.categories.insert(category_template.evaluate({category: Workboard.AllCategory}));
    category_containers[Workboard.AllCategory] = this.categories.down(".category:last-child");
    
    // build up a hash of { category => category_container }
    Workboard.Categories.each(function(category){
      this.categories.insert(category_template.evaluate({category: category}));
      category_containers[category] = this.categories.down(".category:last-child");
    }.bind(this));

    // treat clients as their own category
    Workboard.Clients.each(function(client){
      this.categories.insert(category_template.evaluate({category: client}));
      category_containers[client] = this.categories.down(".category:last-child");
    }.bind(this));
    
    // populate category containers
    var category, container, work_template;
    var work_template = new Template(this.categories.down(".work[data-template=true]").remove().innerHTML);
    $H(category_containers).each(function(pair){
      category = pair.key,
      container = pair.value;

      works_by_category[category].each(function(wrapper){
        var work = wrapper.work;
        work['link'] = '<a href="' + 'http://' + work.url + '">' + work.title + '</a>';
        work['img'] = '<img src="' + work.image_url + '" />';
        
        container.insert(work_template.evaluate(work));
      });
    });
  },

  _populateClients: function(clients){
    var template = new Template(this.workboard.down(".clients .client[data-template=true]").remove().innerHTML);
    clients.each(function(client){
      this.clients.insert(template.evaluate({client: client}));
    }.bind(this));
  },

  _groupWorksByCategory: function(works){
    var by_category = {};
    works.each(function(work){
      if(!by_category[Workboard.AllCategory]) by_category[Workboard.AllCategory] = []
      by_category[Workboard.AllCategory].push({work: work, type: "category"});
      
      work.categories.each(function(category){ 
        if(!by_category[category]) by_category[category] = []; 
        by_category[category].push({work: work, type: "category"});
      });
      
      // add work to client-specific category
      if(!by_category[work.client]) by_category[work.client] = [];
      by_category[work.client].push({work: work, type: "client"});
    });
    return by_category;
  },
  
  _initializeMenuiItems: function(){
    this.workboard.select(".menu .item").each(function(el){
      el.observe("click", function(){
        if(this.in_transition) return;
        this.filterWorkToCategory(el);
      }.bind(this));
    }.bind(this));
  },
  
  _initializeClients: function(){
    this.workboard.down(".view_clients").observe("click", function(){
      if(this.in_transition) return;
      this.in_transition = true;
      Effect.toggle(this.clients, "blind", { duration: 0.5,
        afterFinish: function(){ this.in_transition = false; }.bind(this)
      });
    }.bind(this));
    
    this.workboard.select(".clients .client a").each(function(el){
      el.observe("click", function(){
        if(this.in_transition) return;
        this.filterWorkToCategory(el);
      }.bind(this));
    }.bind(this));
  }
  
});

Event.addBehavior({
  '.workboard': Workboard.Behavior
});