/**
* @namespace 2MC
*/

if (!window.TOOMANYCOLOURS) {
  var TOOMANYCOLOURS = { };
}

/**
* @namespace TOOMANYCOLOURS.Checkout
*/

TOOMANYCOLOURS.ColourCard = (function () { 
  var _options;
  var _defaultOptions = {};
  var _$overlay;
  
  var _init = function(options) {
    if ($('.colour-link').length===0) {return;};
    _options = $.extend(_defaultOptions, options || {});
    _addObserver();
    _insertDomStructure();
  };
  
  var _insertDomStructure = function(){
    _$overlay = $(
      '<div id="colour-overlay"></div>'+
      '<div id="colour-wrapper">'+
      '  <div id="colour-img"></div>'+
      '  <div id="colour-description">'+
      '    <a href="javascript:;>close</a>"'+
      '    <h3 id="colour-description-header"></h3>'+
      '    <p id="colour-description-body"></p>'+
      '    <p id="colour-code-html"></p>'+
      '    <p id="colour-code-rgb"></p>'+
      '  </div>'+
      '</div>'
    )

    $('body').append(_$overlay)
    _reset()
  };
  
  var _reset = function(){
    _$overlay.hide();
    _$overlay.find('#colour-description-header, #colour-description-body').empty();
  };
  
  var _fillColurCard = function($this){
    var parent = $this.parent('li');
    
    var colourName = parent.find('h4').html();
    var colourDescription = parent.find('div.description').html();
    var colourCode = parent.attr('id').split('-')[1];
    
    $('#colour-description-header').html(colourName);
    $('#colour-description-body').html(colourDescription);
    $('#colour-code-rgb').html('<a href="#"> X Schließen</a>');
    
    $('#colour-img').css({ backgroundColor: '#'+colourCode});
  }
  
  var _hide = function(){
    _reset();
    _$overlay.hide();
    $('body').removeClass('overflow-hidden')
  }
  
  var _show = function($this){
    _fillColurCard($this);
    _$overlay.show();
    $('body').addClass('overflow-hidden')
  }
  
  var _addObserver = function(){
    var $colours = $('.colour-link');
    $colours.click(function(event){
      var $this = $(this);
      _show($this);
      event.preventDefault();
    })
    
    $('#colour-wrapper').live('click', function(){
      _hide();
    })
    
  };
  
  /*
   * Constructor
   * @params options Object.
   */
  return {   
    init: function (options) { _init(options); }
  };
})();