/**
 * @author dao
 */
window.addEvent('domready', function(){
  initTabs();
  initWorkSlides();
  initClientSlides();
});


function initWorkSlides(){
  var slideHolder  = $('workSlides').getElement('.slides');
  var workSlides = new noobSlide({
    box: slideHolder,
    items: slideHolder.getElements('div'),
		handles: slideHolder.getElements('div'),
    size: 400,
    interval: 3000,
    fxOptions: {
      duration: 1000,
      transition: Fx.Transitions.Quad.easeInOut,
      wait: false
    },
		autoPlay: false,
		startItem: 0,
    addButtons: {
      previous: $('workSlides').getElement('.previous'),
      next: $('workSlides').getElement('.next')
    },
		onWalk: function() {
		}
  });
}

function initClientSlides(){
  var panel = $('clientsPanel');
  var box = $('clientSlideBox');
  var slides = box.getElements('div');
  var previous = panel.getElement('.previous');
  var next = panel.getElement('.next');
  var clientSlide = new noobSlide({
    box: box,
    items: slides,
    size: 400,
    interval: 3000,
    fxOptions: {
      duration: 1000,
      transition: Fx.Transitions.Quad.easeInOut,
      wait: false
    },
    addButtons: {
      previous: previous,
      next: next
    }
  });
  return clientSlide;
}

function initTabs(){

  var tabs = $$('ul.tabs li');
  if (tabs.length) {
  
    var ts = new TabSwapper({
      selectedClass: 'on',
      deselectedClass: 'off',
      tabs: $$('ul.tabs li'),
      clickers: $$('ul.tabs li a'),
      sections: $$('div.panelSet div.panel'),
      initPanel: null, // don't activate a panel on init
      cookieName: null, // no cookies
      smooth: true,
      smoothSize: true
    });
    
    var normalTabs = ts.tabs.filter(function(tab, index){
      return tab.className.indexOf('bigone') == -1;
    });
    
    var bigTabs = ts.tabs.filter(function(tab, index){
      return tab.className.indexOf('bigone') > -1;
    });
    
    ts.tabs.each(function(tab, index){
      var color = $A(colors).filter(function(value, index){
        return tab.className.indexOf(value.name) != -1;
      })[0];
      
      tab.store('color', color);
      
      var size = bigTabs.contains(tab) ? 'big' : 'normal';
      tab.store('size', size);
      
      var box = new Element('span', {
        'class': size + '-block-icon'
      });
      tab.grab(box).store('box', box).grab(new Element('span', {
        'class': size + '-mark'
      }), 'top');
      
      tab.addEvents({
        mouseout: function(){
          box.morph('.shrink-' + size);
        },
        mouseover: function(){
          box.morph('.extend-' + color.name + '-' + size);
        },
				click: function() {
					$('workSlides').hide();
				}
      });
    });
    
    ts.addEvents({
      onBackground: function(index, section, tab){
        var size = tab.retrieve('size');
        tab.retrieve('box').morph('.shrink-' + size);
      },
      onActive: function(index, section, tab){
        initFonts();
        var color = tab.retrieve('color');
        var size = tab.retrieve('size');
        var items = section.getElement('ul.items');
        
        tab.retrieve('box').morph('.extend-' + color.name + '-' + size);
        
        if (items) {
          // set top of item list for subpage to top of page link
          items.addClass('mark' + color.name.capitalize());
          items.setStyle('top', $('blocks').offsetTop + tab.offsetTop);
        }
      },
      onActiveAfterFX: function(index, section, tab){
      }
    });
  }
}

