/***
 * Dodi Raditya
 *
 * Description: Generic userinterface enhancements
 * Author: Dodi Raditya
 * Date: 2011-07-18
 *
 *
 * TOC
 * ##CAROUSEL
 * ##PROJECTSPEER
 * ##LIBRARY
 * ##APPLICATION
 */




/***
 * ##CAROUSEL
 */
var Carousel = {
  el: null,
  itemsArr: [],
  currentInt: 0,
  timerObj: null,
  timerPauseObj: null,
  

  init: function(el) {
    var self = this;
    this.el = el;
    if(!this.el) {
      return false;
    }
    this.itemsArr = this.el.querySelectorAll('.carousel-item');
    this.setupMasks();
    this.setupMousebehaviour();
    D(this.itemsArr[this.currentInt]).addClass('current');
    this.start();
  },


  setupMasks: function() {
    for(var i=0, len=this.itemsArr.length; i<len; i++) {
      var maskEl = document.createElement('img');
      maskEl.setAttribute('src','media/uploads/project_mask.png');
      maskEl.setAttribute('alt','');
      maskEl.setAttribute('class','mask');
      this.itemsArr[i].appendChild(maskEl);
    }
  },


  setupMousebehaviour: function() {
    var self = this;
    this.el.addEventListener('mouseover', function(e) {
      self.stop();
    }, false);
    this.el.addEventListener('mouseout', function(e) {
      self.start();
    }, false);
    
    for(var i=0, len=this.itemsArr.length; i<len; i++) {
      this.itemsArr[i].addEventListener('click', function(e) {
        var itemAnchor = this.querySelector('a');
        if(itemAnchor) {
          window.location.href = itemAnchor;
        }
        return false;
      }, false);
    }
  },


  start: function() {
    this.timerObj = setInterval("Carousel.showNext()",14000);
  },


  stop: function() {
    clearTimeout(this.timerObj);
    clearTimeout(this.timerPauseObj);
  },


  showNext: function() {
    D(this.itemsArr[this.currentInt]).removeClass('current');
    this.currentInt++;
    if(!this.itemsArr[this.currentInt]) {
      this.currentInt = 0;
    }
    this.timerPauseObj = setTimeout("Carousel.showCurrent()",2000);
  },


  showCurrent: function() {
    D(this.itemsArr[this.currentInt]).addClass('current');    
    clearTimeout(this.timerPauseObj);
  },
};
/* Carousel - end */




/***
 * ##PROJECTSPEER
 */
function ProjectsPeer() {}
ProjectsPeer.prototype = {
  projectsArr: [],


  init: function() {
    var self = this;
    var workItems = document.querySelectorAll('section.work li');
    for(var i=0, len=workItems.length; i<len; i++) {
      var p = new Project(workItems[i]);
      self.projectsArr.push(p);      
    }
  }
};
function Project(el) {
  if(!el) {
    return false;
  }
  
  this.el = el;
  this.init();
}
Project.prototype = {
  el: null,
  visuallinkEl: null,


  init: function() {
    var self = this;
    this.visuallinkEl = this.el.querySelector('a.visual');
    this.visuallinkEl.addEventListener('mouseover', function(e) {
      D(self.el).addClass('project-hover');
    }, false);
    this.visuallinkEl.addEventListener('mouseout', function(e) {
      D(self.el).removeClass('project-hover');
    }, false);
  }
};
/* Projectspeer - end */




/***
 * ##LIBRARY
 * A micro framework specifically for this project,
 * jQuery is too big for only the small stuff I need
 */
function D(el) {
  this.el = el;

  this.addClass = function(classStr) {
    if(!this.el) { return this; }
    this.el.className += ' ' + classStr;
    return this;
  };

  this.removeClass = function(classStr) {
    if(!this.el) { return this; }
    var cNames = this.el.className.split(' ');
    var a = [];
    for(var i=0, len=cNames.length; i<len; i++) {
      if(cNames[i] !== classStr) {
        a.push(cNames[i]);
      }
    }
    this.el.className = a.join(' ');
    console.log();
    return this;
  };

  return this;
}
/* Carousel - end */




/***
 * ##APPLICATION
 * Application start - public void main
 */
function Application() {}
Application.prototype = {
  init: function() {
    this.setupExternalLinks();
    this.projects = new ProjectsPeer();
    this.projects.init();
    Carousel.init(document.querySelector('div.carousel'));
  },


  setupExternalLinks: function() {
    var externalLinks = document.querySelectorAll("a[rel='external']");
    for(var i=0, len=externalLinks.length; i<len; i++) {
      externalLinks[i].setAttribute('target','_blank');
    }
  }
};
/* Application - end */



var app = new Application();
window.addEventListener('DOMContentLoaded', function() {
  app.init();
}, false);