/*******************************************************************************
 * Model
 */

OMVC.ShoeModel = function () {
  var that = this;

  /*
   * Observable subjects
   */
  this.modelInitialized     = OMVC.makeObservableSubject();
  this.productLoaded        = OMVC.makeObservableSubject();

  /*
   * Properties
   */
  var uid;                        // Product uid
  var details = {};               // Product properties
  var relatedProducts = [];       // Related products 

  /*
   * Methods
   */
  // Any initial stuff
  this.initialize = function(id) {
    uid = id;
    that.getDetails();
    that.modelInitialized.notifyObservers();
  };

  // Get details
  this.getDetails = function() {
    jQuery.ajax({
      url: mwwoolfAjaxUrl,
      data: {action: 'getProduct', uid: uid},
      dataType: 'json',
      success: function(result) {
        details = result.details;
        relatedProducts = result.related;
        that.productLoaded.notifyObservers();
      }
    });
  };

  // Getter
  this.get = function(varName) {
    return eval(varName);
  }

};

/*******************************************************************************
 * View
 */
OMVC.ShoeView = function (model, rootObject) {
  var that = this;
  /*
   * HTML oblects
   */

  // Main container
  that.container = jQuery('<div/>')
    .addClass('clear')
    .attr('id', 'page-product-detail-content');

  // Fields
  that.category = jQuery('<span/>');
  that.categoryLink = jQuery('<a/>')
        .addClass('link-arrow-right')
        .html(that.category)
        .attr('href', '/');
  that.articleNumberBreadcrumbs = jQuery('<span/>');
  that.articleNumber = jQuery('<div/>')
  that.articleNameBreadcrumbs = jQuery('<div/>')
    .addClass('right-align')
  jQuery('<div/>')
    .append(jQuery('<a/>')
        .addClass('link-arrow-right')
        .html(_('products'))
        .attr('href', '/')
        .bind('click', function() {
              document.location.hash = '#';
              return false;
            }))
    .append(that.categoryLink)
    .append(that.articleNameBreadcrumbs)
    .append(that.articleNumberBreadcrumbs)
    .addClass('breadcrumbs')
    .appendTo(that.container);

  that.imageContainer = jQuery('<div/>').addClass('image');
  that.image = jQuery('<img/>')
      .width('320px')
      .appendTo(that.imageContainer);
  that.imageCheckboxes = jQuery('<div/>')
    .addClass('checkboxes')
    .appendTo(that.imageContainer);
  that.content = jQuery('<div/>').addClass('content');
  that.title = jQuery('<h1/>').appendTo(that.content);
  that.description = jQuery('<div/>')
    .addClass('description')
    .appendTo(that.content);
  that.priceContainer = jQuery('<p/>')
    .addClass('price')
    .html(_('price'))
    .appendTo(that.content);
  that.price = jQuery('<span/>')
    .addClass('price-value')
    .appendTo(that.priceContainer);
  jQuery('<div/>').addClass('underline').appendTo(that.content);
  that.sizes = jQuery('<div/>')
    .addClass('filter')
    .appendTo(that.content);
  jQuery('<p/>')
    .addClass('title')
    .html(_('available_sizes'))
    .appendTo(that.sizes);
  // Filter fields renderer
  that.renderCheckbox = function(type, id, text) {
    return jQuery('<div/>')
        .append(jQuery('<input/>')
            .attr({
                type: 'checkbox',
                id: type + id,
                rel: type,
                disabled: true
              }))
        .append(jQuery('<label/>')
            .attr('for', type + id)
            .html(text));
  }
  for(var i=20; i<47; i++) {
    jQuery('<div/>')
        .addClass('filter-item')
        .append(that.renderCheckbox('size', i, i))
        .appendTo(that.sizes);
  }
  jQuery('<div/>').addClass('underline').appendTo(that.content);
  that.gender = jQuery('<div/>').addClass('left');
  jQuery('<p/>')
    .addClass('title')
    .html(_('gender'))
    .appendTo(that.gender);
  jQuery('<div/>')
      .addClass('filter-item')
      .append(that.renderCheckbox('gender', 'f', _('women')))
      .appendTo(that.gender);
  jQuery('<div/>')
      .addClass('filter-item')
      .append(that.renderCheckbox('gender', 'm', _('men')))
      .appendTo(that.gender);
  jQuery('<div/>')
      .addClass('filter-item')
      .append(that.renderCheckbox('gender', 'k', _('kids')))
      .appendTo(that.gender);
  that.status = jQuery('<div/>').addClass('right');
  jQuery('<p/>')
    .addClass('title')
    .html(_('status'))
    .appendTo(that.status);
  jQuery('<div/>')
      .addClass('filter-item')
      .append(that.renderCheckbox('status', 'l', 'Lager'))
      .appendTo(that.status);
  jQuery('<div/>')
      .addClass('filter-item')
      .append(that.renderCheckbox('status', 's', 'Standard'))
      .appendTo(that.status);
  jQuery('<div/>')
    .addClass('filter')
    .append(that.gender)
    .append(that.status)
    .appendTo(that.content);
  jQuery('<div/>').addClass('underline').appendTo(that.content);
  that.seasons = jQuery('<div/>')
    .addClass('filter')
    .appendTo(that.content);
  jQuery('<p/>')
    .addClass('title')
    .html(_('collection'))
    .appendTo(that.seasons);
  jQuery('<div/>').addClass('underline').appendTo(that.content);
  that.facebook = jQuery('<div/>')
    .addClass('facebook')
    .appendTo(that.content);

  that.related = jQuery('<div/>').addClass('other-products clear');
  that.relatedTitle = jQuery('<p/>')
    .addClass('title')
    .appendTo(that.related);
  that.linkToCategory = jQuery('<a/>')
        .attr('href', '/')
        .html(_('see_all_products'));
  jQuery('<div/>')
    .addClass('right-align')
    .append(that.linkToCategory)
    .appendTo(that.related);
  that.productsContainer = jQuery('<div/>')
    .addClass('product-container')
    .appendTo(that.related);

  // Draw product
  that.renderProduct = function(product) {
    return jQuery('<div/>')
        .addClass('product')
        .append(jQuery('<div/>')
            .addClass('image')
            .append(jQuery('<a/>')
                .attr('href', '/')
                .bind('click', function() {
                  document.location.hash = '#p' + product.uid;
                  return false;
                })
                .append(jQuery('<img/>')
                .attr('src', product.pictures[0])
                //.width('108px'))))
                .height('61px'))))
        .append(jQuery('<div/>')
            .addClass('underline'))
        .append(jQuery('<p/>')
            .html(product.article_number))
        .append(jQuery('<p/>')
            .html(product.title));
  };


  jQuery('<div/>')
    .addClass('product-view')
    .append(that.imageContainer)
    .append(that.content)
    .appendTo(that.container);
  that.related
    .appendTo(that.container);

  jQuery(rootObject).append(that.container);


  /*
   * Listening methods
   */
  // Product rendering
  model.productLoaded.addObserver(function () {
    var details = model.get('details');
    var relatedProducts = model.get('relatedProducts');
    that.category.html(details.category);
    that.relatedTitle.html(_('more_products_from_this_category') + ' ' + details.category);
    that.linkToCategory.bind('click', function() {
      document.location.hash = '#c' + details.category_id;
      return false;
    });
    that.categoryLink.bind('click', function() {
      document.location.hash = '#c' + details.category_id;
      return false;
    });
    that.articleNumber.html(_('article_nr') + ': ' + details.article_number);
    that.articleNumberBreadcrumbs.html(details.title);
    that.articleNameBreadcrumbs.html(details.article_number);
    that.title.html(details.title);
    that.description.html(details.description);
    if(details.price) {
      that.price.html(details.price + '\u20ac');
    } else {
      that.priceContainer.hide();
    }
    jQuery.each(details.sizes, function() {
      jQuery('#size'+this).attr('checked', true);
    })
    jQuery('input[rel="size"]:not(:checked)').parents('.filter-item').hide();
    jQuery.each(details.status, function() {
      jQuery('#status'+this).attr('checked', true);
    })
    jQuery.each(details.gender, function() {
      jQuery('#gender'+this).attr('checked', true);
    })
    jQuery('<div/>')
          .addClass('filter-item')
          .append(that.renderCheckbox('season', 0, details.season))
          .appendTo(that.seasons);
    jQuery('#season0').attr('checked', true);
    var product;
    var counter = 0;
    jQuery.each(relatedProducts, function() {
      product = that.renderProduct(this);
      if(counter == 4) {
        product.addClass('last');
      }
      that.productsContainer.append(product);
      counter++;
    })
    jQuery.each(details.pictures, function(index) {
      var src = this;
      if(index == 0) {
        that.image.attr('src', src);
      }
      that.imageCheckboxes
        .append(jQuery('<div/>')
            .addClass('checkbox')
            .append(jQuery('<input/>')
                .attr({
                  name: 'image',
                  type: 'radio',
                  id:    'img' + index,
                  checked: (index == 0)
                })
                .bind('click', function() {
                  that.image.attr('src', src);
                }))
            .append(jQuery('<label/>')
                .html('&nbsp;')
                .attr({
                  'for': 'img' + index
                })
                .bind('click', function() {
                  that.image.attr('src', src);
                })))
    })
    that.container.find('input').customInput();
    that.facebook.html('<div id="fb-root"></div><fb:like href="' + details.fb_like + '" send="true" width="450" show_faces="false" font=""></fb:like>');
    FB.XFBML.parse(jQuery(that.facebook).get(0));

  });


};

/*******************************************************************************
 * Controller
 */
OMVC.ShoeController = function (model, view, id) {
  model.initialize(id);
};