/**
 * 商品一覧
 */
var itemModel = {
    // 商品一覧
    list:[],

    init: function(data) {
	this.list = data;
	return false;
    },

    // すべての商品を返す
    getAll: function() {
	return this.list;
    },

    // IDで指定したオブジェクトを返す
    findById: function(id) {
	return $.grep(this.list, function(val) {
	    return id == val.id;
	})[0];
    }
};

/**
 * 選択されている商品
 *
 */
var selectedItemModel = {
    // 選択された商品
    item: {},

    // 選択された商品に関するエラー
    errors: [],
    
    html:{},

    selectcolor_names: { '1':'ピンク系', 
			 '2':'パープル系', 
			 '3':'オレンジ系', 
			 '4':'アプリコット系',
			 '5':'黄色系',
			 '6':'クリーム系',
			 '7':'白系',
			 '8':'赤系',
			 '9':'茶色系',
			 '10':'その他'
		       },

    // テンプレート
    tpl: {
	form: '<form name="form1" id="form1" method="post" action="/store/" style="display:none"></form>',
	photo: '<p class="photo"></p>',
	img:   '<img src=""/>',
	rightblock: '<div class="rightblock"></div>',
	title: '<h3></h3>',
	price: '<p class="price"></p>',
	oneselectblock: '<p class="select"></p>',
	select: '<select class="data"></select>',
	option: '<option value=""></option>',
	features: '<ul class="features clearfix"></ul>',
	subtitle: '<li></li>',
	feature:  '<li class="btnlink"></li>',
	featurename: '<span class="text"></span>',
	quantity: '<p id="quantity">個数</p>',
	quantityinput: '<input class="data" type="text" name="" value="1"/>',
	detailbutton: '<p class="btnblock"></p>',
	detailbuttonlink: '<a href="" class="btn ui-state-default ui-corner-all">詳しくみる</a>',
	detailicon: '<span class="ui-icon ui-icon-document"></span>',
	addcartbutton: '<p id="order" class="btnblock"><a href="javascript:void(0);" class="btn ui-state-important ui-corner-all"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span>カゴに入れる</a></p>',
	attention: '<p class="attention"></p>',
	selectcolor_memo: '<p class="memo">何も選択しない場合は<em>「おまかせ」</em>になります。</p>',
	selectcolors: '<table id="selectcolors"><tr><td><input type="checkbox" name="selectcolor[]" value="1"/></td><td><p class="btnlink"><span class="icon icon-color-39"></span>ピンク系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="2"/></td><td><p class="btnlink"><span class="icon icon-color-38"></span>パープル系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="3"/></td><td><p class="btnlink"><span class="icon icon-color-37"></span>オレンジ系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="4"/></td><td><p class="btnlink"><span class="icon icon-color-36"></span>アプリコット系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="5"/></td><td><p class="btnlink"><span class="icon icon-color-35"></span>黄色系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="6"/></td><td><p class="btnlink"><span class="icon icon-color-34"></span>クリーム系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="7"/></td><td><p class="btnlink"><span class="icon icon-color-33"></span>白系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="8"/></td><td><p class="btnlink"><span class="icon icon-color-32"></span>赤系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="9"/></td><td><p class="btnlink"><span class="icon icon-color-31"></span>茶色系</p></td></tr><tr><td><input type="checkbox" name="selectcolor[]" value="10"/></td><td><p class="btnlink"><span class="icon icon-color-30"></span>その他</p></td></tr></table>'
    },

    // 選択された商品を更新する
    update: function(item) { this.item = item; },

    // keyで指定したErrオブジェクトを返す
    findErrByKey: function(key) {
	if(this.errors.length == 0) return '';
	var result = $.grep(this.errors, function(val) { 
	    return key == val.key; })[0];
	if(result == undefined) result ='';
	return result;
    },
	
    buildHtml: function(){
	// 画像
	var photo = $(this.tpl.photo).append($(this.tpl.img).attr('src',this.item.thumbnail));
	// rightblock
	var title = $(this.tpl.title).text(this.item.name);
	var price = $(this.tpl.price).text('￥' + this.item.price);
	var rightblock = $(this.tpl.rightblock).append(title).append(price);
	// features
	var features = $(this.tpl.features);
	$.each(this.item.features, function(idx, obj){
	    if(obj.key == 'main'){
		features.append($(selectedItemModel.tpl.subtitle).text(obj.name));
	    } else {
		var feature = $(selectedItemModel.tpl.feature);
		features.append(feature.append('<span class="icon icon-'+ obj.key +'-' + obj.id + '"></span>').append(obj.name));
	    }
	});
	// ここまでをまとめる
	var form = $(this.tpl.form).append(photo).append(rightblock).append(features);
	if(this.item.features[0].id == 2){
	    var memo = 'お好きな色を<em>全色</em>から選んでください';
	    switch(this.item.id){
	    case '3': memo = 'お好きな色を<em>3色</em>から選んでください。'; break;
	    case '4': memo = 'お好きな色を<em>5色</em>から選んでください。'; break;
	    default:break;
	    }
	    form.append($('<p class="memo">'+ memo + '</p>'))
	        .append($(this.tpl.selectcolor_memo))
	        .append($(this.tpl.selectcolors));
	}
	// selectblock
	if(this.item.class_name1) form = this.addSelectHtml(form);
	// 数量
	form = this.addQuantityHtml(form);
	// btn
	var detailbuttonlink = $(this.tpl.detailbuttonlink).attr('href', './products/detail/'+ this.item.id +'/').append($(this.tpl.detailicon));
	var detailbutton = $(this.tpl.detailbutton).append(detailbuttonlink);
	var addcartbutton = $(this.tpl.addcartbutton).click(function(event){ 
	    onclickOrderLink(event);
	});
	this.html = form.append(detailbutton).append(addcartbutton);
    },
		
    addSelectHtml: function(form) {
	// 初期設定
	var class1 = 'classcategory_id' + this.item.id + '_1';
	var class2 = 'classcategory_id' + this.item.id + '_2';
	if(this.errors != null){
	    var err_class1 = this.findErrByKey(class1) != '' ? this.findErrByKey(class1).msg : '' ;
	    var err_class2 = this.findErrByKey(class2) != '' ? this.findErrByKey(class2).msg : '' ;
	}
	// selecter1 作成
	var onchange_str = 'lnSetSelect(\'' + class1 +'\',\''+ class2 + '\',\'' + this.item.id + '\', \'\');';
	// attrメソッドではonchange属性が削除されるので
	var select1 = $('<select class="data" name="' +  class1 + '" onchange="' + onchange_str +'" ></select>');
	if(err_class1) select1.addClass('err');
	select1.append($(this.tpl.option).text('選択してください'));
	$.each(this.item.class_arr1, function(key, value){
	    select1.append($(selectedItemModel.tpl.option).val(key).text(value));
	});
	// select1 block作成
	var select1block = $(this.tpl.oneselectblock).text(this.item.class_name1).append(select1);
	form.append(select1block);
	if(err_class1) form.append($(this.tpl.attention).html(err_class1));
	
	// select2 block
	if(this.item.class_name2){
	    var select2 = $(this.tpl.select).attr('name', class2);
	    if(err_class2) select2.addClass('err');
	    select2.append($(this.tpl.option).text('選択してください'));
	    var select2block = $(this.tpl.oneselectblock).text(this.item.class_name2).append(select2);
	    form.append(select2block);
	    if(err_class2) form.append($(this.tpl.attention).html(err_class2));
	}
	return form;
    },

    addQuantityHtml: function(form) {
	var quantityinput = $(this.tpl.quantityinput).attr('name','quantity' + this.item.id);
	if(this.errors != null){
	    var err = this.findErrByKey('quantity' + this.item.id);
	    if(err){
		quantityinput.addClass('err');
		var errmsg = $(this.tpl.attention).html(err.msg);
	    }
	}
	var quantity = $(this.tpl.quantity).append(quantityinput);
	form.append(quantity);
	if(errmsg) form.append(errmsg);
	return form;
    },

    checkSelectColors: function(selectcolor_ids) {
	if( this.item.id == 3 && selectcolor_ids.length > 3){
	    return '３色以内で選んでください。';
	}
	if( this.item.id == 4 && selectcolor_ids.length > 5){
	    return '5色以内で選んでください。';
	}
	return false;
    }

};

/**
 * 検索された商品
 *
 */
var searchItemModel = {
  // デフォルトの検索条件
  default_condition_ids: [0,17,23,26,27,28,29],
  // 検索された商品一覧
  list: [],
  // 条件から検索
  search: function(condition_ids) {
    condition_ids = this.getformatCondition(condition_ids)
    this.list = $.grep(itemModel.getAll(), function(item){
      if(condition_ids.length == 0) return true;
      for(i=0; i < condition_ids.length; i++){
	flg=true;
	if($.inArray(condition_ids[i], item.category_ids) < 0){
	  flg=false; 
	  break;
	}
      }
      return flg;
    });
    this.updateViews();
  },
  // 不要な条件を取り除く
  getformatCondition: function(condition_ids) {
    var conditions = this.default_condition_ids;//grepの中でthisは使えないので
    return $.grep(condition_ids, function(id){
    	return ($.inArray(parseInt(id), conditions) < 0 );
      });
  },
  // 選択された条件をリセットする
  resetSearchConditions: function(){
    view.resetSearchConditions();
  },
  // ビューの更新
  updateViews: function(){
    view.updateSearchItemList();
    view.updateItemCount();
  }
};

/**
 * カート
 *
 */
var cartModel = {
    // カート内の商品一覧
    list: [],

    // html
    html_cartblock: {},
    html_count: {},
    html_sum:{},

    tpl : {
	cartblock: '<table id="cartblock"></table>',
	thead: '<thead><tr><th>商品名</th><th>個数</th><th>小計</th></tr></thead>',
	tbody: '<tbody></tbody>',
	tr:    '<tr></tr>',
	name:  '<td class="name"></td>',
	quantity: '<td class="quantity"></td>',
	unitprice: '<td class="unitprice"></td>',
	count: '<p id="count"></p>',
	sum: '<p id="sum"></p>'
    },
		
    // カート内の商品一覧を作る
    createCartList: function(response_list) {
	this.list = $.map(response_list, function(obj, idx){
	    var cartitem = {};
	    var item =itemModel.findById(obj.id[0]);
	    cartitem.name = item.name;
	    cartitem.price = item.price;
	    cartitem.quantity = obj.quantity;
	    return cartitem;
	});
    },
		
    buildHtml: function(){
	var tbody = $(this.tpl.tbody);
	var itemcount = 0;
	var sum = 0;
	$.each(this.list, function(){
	    var price = parseInt(this.quantity) * parseInt(this.price);
	    var name  = $(cartModel.tpl.name).text(this.name);
	    var quantity  = $(cartModel.tpl.quantity).text(this.quantity);
	    var unitprice = $(cartModel.tpl.unitprice).text(cartModel.numberFormat(price));
	    var row = $(cartModel.tpl.tr).append(name).append(quantity).append(unitprice);
	    tbody.append(row);
	    itemcount += parseInt(this.quantity);
	    sum += price;
	}),
	this.html_cartblock = $(this.tpl.cartblock).append($(this.tpl.thead)).append(tbody);
	this.html_count = $(this.tpl.count).append('商品数：' + itemcount + '点');
	this.html_sum   = $(this.tpl.sum).append('合計：' + this.numberFormat(sum) + '円');
    },
    
    //金額 3桁カンマ区切り
    numberFormat: function(str){
	var num = new String(str).replace(/,/g, "");
	while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
	return num;
    }

};