$(document).ready(function() {
	// 色違い読み込み
	var params = {
		type : 'GET',
		cache : false,
		timeout : 30000,
		url : '/commodity/' + $('#commodityCode').val() + '/colors'
	};
    otherColorDisplay('#different_color_list', params, "#different_color_list_template");
});

var otherColorDisplay = function(targetId, data, templateId) {
    $.ajax(data).then(function(data, sts) {
        Handlebars.registerHelper('trimString', function(string) {
            return new Handlebars.SafeString(string.substring(0,2))
        });
        data.base_url = $('#baseUrl').val();
        data.image_url = $('#imageUrl').val();
        data.catalog_param = $('#catalogParam').val();
        if ($(templateId).length) {
            // template in script tag
            var source = $(templateId).html();
            var template = Handlebars.compile(source);
        } else {
            var template = Handlebars.templates[templateId];
        }
        var html = template(data);
        $(targetId).empty();
        $(targetId).html(html);
       
    });
};