Event.observe(window , 'load', design_load);
function design_load(){
	Event.observe('stone_list', 'mouseover', stone_list_mouseover);
	var stn_design_code = $('stn_design_code').value;
	if(stn_design_code != ''){
		make_checked_stone(stn_design_code);
	}else{
		stone_size_init();
		make_main_area();
	}
  make_stone_fortune_button();
	make_stone_category_select('stone_c_select', category_color);
	make_stone_category_select('stone_b_select', category_birth);

	ZeroClipboard.setMoviePath(BASE_SITE_URL+BASE_USER_PATH+BASE_ORDER_PATH+"js/ZeroClipboard.swf");
	clip = new ZeroClipboard.Client();
  clip.addEventListener( 'complete', function(client, text) { 
     alert( "デザインURLをクリップボードにコピーしました" ); 
  } );
  clip.addEventListener( 'mouseDown', function(client) {  
     enc_stn_code = $('stn_design_code').value;
     clip.setText( BASE_SITE_URL+BASE_USER_PATH+"order_brace.php?id=" + enc_stn_code );
  } ); 
	clip.glue("copy_design_url_btn");

}

// サイズラジオボタン
function stone_size_change(check_stn_size, target_idx){
	ret = stone_size_change_kakunin(check_stn_size, target_idx);
	if(ret != true){
		return;
	}
	$('stone_cm').value = check_stn_size;

	if(check_stn_size == 6){
		$('line_len').value  = base_select_size_6;
	} else {
		$('line_len').value  = base_select_size_8;
	}

	stn_design_init();
	clear_fortune_button();
	$('fortune_all').src=stone_img_folder+"fortune_all_a.gif";
}

function stn_design_init(){
	checked_stone_clear();
	make_select_stone_area();
	make_fortune_stone_percentage();
//	set_stn_design_code();
	$('stn_design_code').value = "";
	$('stone_code').value = "";

	// 石＆サイズ変更
  stone_size_init();

	// デザインエリア描画
	make_main_area();
}

// デザイン初期化確認
function stone_size_change_kakunin(check_stn_size, target_idx){
  ret = false;
  stn_size_val = $('stone_cm').value;

	if(stn_size_val!=check_stn_size){
		ret = confirm("デザインが初期化されます。宜しいですか？");
		if (ret != true){
			if(stn_size_val == 6){
				document.getElementById('rd6').checked = true;
			}else{
				document.getElementById('rd8').checked = true;
			}
		}
	}

	return ret;
}

function stone_check_init(){
	stn_size_val = $('stone_cm').value;
	$('now_stn_size').innerHTML = stn_size_val+'ミリサイズで作成中';

	if(stn_size_val == 6){
		document.getElementById('rd6').checked = true;
	}else{
		document.getElementById('rd8').checked = true;
	}
}

// 石リスト表示変更
function make_stone_area(btn_id){
	var stn_size = $('stone_cm').value;

	if(btn_id == undefined){
		btn_id = "";
	}

	var a = new Ajax.Updater(
      "stone_list",
			BASE_SITE_URL+BASE_USER_PATH+BASE_ORDER_PATH+"getstonelist.php",
      {
          "method":"get",
          "parameters":"ctg="+btn_id+"&ss="+stn_size
      }
  );
}

// 石選択カテゴリプルダウン初期化
function make_stone_category_select(select_box_name, arry_category){
	select_box_clear(select_box_name);

	var selectbox = $(select_box_name);
  var op = new Array();

	for(var i=0; i<arry_category.length; i++){
		op[i] = document.createElement('option');
		op[i].value = arry_category[i].value;
		op[i].text  = arry_category[i].name;
		try{
			selectbox.add(op[i],null)
		}
		catch(ex){
			selectbox.add(op[i],-1)
		}
	}
}
function stone_category_init(category_name){
	$(category_name).options[0].selected = true;
}

// 石選択カテゴリプルダウン変更時
function stone_category_select(category_name){
	clear_fortune_button();

	for(i=0;i<category_select_name.length;i++){
		if(category_name != category_select_name[i]){
			stone_category_init(category_select_name[i]);
		}
	}

	f_value = $(category_name).options[$(category_name).selectedIndex].value;
	make_stone_area(f_value);
}

// 石運勢ボタン初期化
function make_stone_fortune_button(){
	out_str = "";
	for(var i=0; i<category_fortune.length; i++){
//		$(category_fortune[i].img).src=category_fortune[i].img+".gif";
      out_str = out_str + '<img name="'+category_fortune[i].img+'" id="'+category_fortune[i].img+'" src="'+stone_img_folder+category_fortune[i].img+'.gif" onclick="category_button_click('+category_fortune[i].value+', this)">';
	}
	$('fortune_button').innerHTML = $('fortune_button').innerHTML + out_str;
}

// 石運勢ボタン初期状態
function clear_fortune_button(){
	$('fortune_all').src=stone_img_folder+"fortune_all.gif";
	for(var i=0; i<category_fortune.length; i++){
		$(category_fortune[i].img).src=stone_img_folder+category_fortune[i].img+".gif";
	}

}

// 石運勢ボタンクリック時
function category_button_click(btn_id, elm){
	for(i=0;i<category_select_name.length;i++){
		stone_category_init(category_select_name[i]);
	}

	clear_fortune_button();

	elm.src=elm.src.replace(".gif", "_a.gif")
//		elm.disabled = true;
	make_stone_area(btn_id);
}


//ブレスサイズ（石個数）変更
function line_len_change(){
	line_len = $('size_ch').options[$('size_ch').selectedIndex].value;
	$('line_len').value = line_len;

	make_main_area();
	make_select_stone_area();
	make_fortune_stone_percentage();
	set_stn_design_code();

}

//石クリック時
function set_stone(id, name, price, ftn_code) {
	var line_len = $('line_len').value;
  var s_img_px = $('s_img_px').value;

	for(var i=0;i<line_len;i++) {
		if ($('chk_stn_' + i).checked) {
			$('img_stn_' + i).setAttribute('src', stone_img_folder+id+ '.gif');
			$('img_stn_' + i).setAttribute('width', s_img_px);
			$('img_stn_' + i).setAttribute('height', s_img_px);

			checked_stone[i]['id']    = id;
			checked_stone[i]['name']  = name;
			checked_stone[i]['price'] = price;
			checked_stone[i]['ftn_code'] = ftn_code;
			$('chk_stn_' + i).checked = false;
		}
	}

	// 金額算出
	make_select_stone_area();
	make_fortune_stone_percentage();
	set_stn_design_code();
}

// 全てを選択
function select_all() {
	line_len = $('line_len').value;
	for (var i=0;i<line_len;i++) {
		$('chk_stn_' + i).checked = true;
	}
}
// 全ての選択を外す
function remove_all() {
	line_len = $('line_len').value;
	for (var i=0;i<line_len;i++) {
		$('chk_stn_' + i).checked = false;
	}
}
// 選択した石を外す
function delete_cheked() {
	line_len = $('line_len').value;
	for (var i=0;i<line_len;i++) {
		if ($('chk_stn_' + i).checked) {
			$('img_stn_' + i).setAttribute('src', stone_img_folder+'point.gif');
			checked_stone[i]['id']    = '';
			checked_stone[i]['name']  = '';
			checked_stone[i]['price'] = '';
			checked_stone[i]['ftn_code'] = '';

			$('chk_stn_' + i).checked = false;
		}
	}
	// 金額算出
	make_select_stone_area();
	make_fortune_stone_percentage();
	set_stn_design_code();
}

// 選択した石を外す
function delete_all() {
	line_len = $('line_len').value;
	for (var i=0;i<line_len;i++) {
		$('img_stn_' + i).setAttribute('src', stone_img_folder+'point.gif');
	}
	checked_stone_clear();

	// 金額算出
	make_select_stone_area();
	make_fortune_stone_percentage();
	set_stn_design_code();
}

// 選択した石画像クリック時動作
function img_stn_click(stn_idx) {
	if($('chk_stn_' + stn_idx).checked) {
		$('chk_stn_' + stn_idx).checked = false;
	}else{
		$('chk_stn_' + stn_idx).checked = true;
	}
}

// 石情報表示
function view_stone_info(id, name, message) {
	$('stone_data').innerHTML = message;
	$('stone_info').style.display = 'block';
}

// 石情報非表示
function close_stone_info() {
	$('stone_info').style.display = 'none';
}

// 石情報表示時のマウス位置取得
function stone_list_mouseover(e) {
	x = Event.pointerX(e);
	y = Event.pointerY(e);

//  stone_info.style.left     = (x -100) + 'px';
	$('stone_info').style.top      = (y + 30) + 'px';
}

// 運勢比率
function make_fortune_stone_percentage() {
	var percentage_flag = false;

	line_len = $('line_len').value;
	stn_size = $('stone_cm').value;

	for (var i=0;i<category_fortune.length;i++) {
		category_fortune[i].f_cnt = 0;
	}

  var sel_stn_cnt = 0;
	for (var i=0;i<line_len;i++) {
		if(checked_stone.length > i){
			if(checked_stone[i]['ftn_code'] != '' && checked_stone[i]['id'] != ''){
				arry_ftn_code = checked_stone[i]['ftn_code'].split(",");
				for(var j=0; j<arry_ftn_code.length; j++){
					for(var k=0; k<category_fortune.length; k++){
						if(arry_ftn_code[j] == category_fortune[k].value){
							category_fortune[k].f_cnt = category_fortune[k].f_cnt + (1 / arry_ftn_code.length);
							percentage_flag = true;
						}
					}
				}
			  sel_stn_cnt++;
			}
		}
	}

	if(percentage_flag){
		var out_str = '<table border="0" cellpadding="0" cellspacing="1">' + "\n";
		for (var i=0;i<category_fortune.length;i++) {
			if(category_fortune[i].f_cnt > 0){
				out_str = out_str + '<tr><td class="back">' + category_fortune[i].name + '</td><td>' + ((category_fortune[i].f_cnt/sel_stn_cnt)*100).toFixed(1) + '%</td></tr>' + "\n";
			}
		}
		out_str = out_str + '</table>' + "\n";
		$('fortune_percentage').innerHTML   = out_str;
	} else {
		$('fortune_percentage').innerHTML   = "";
	}

}

// 選択された石の価格、合計金額等
function make_select_stone_area() {
	var total_price = 0;
	var total_flag = false;
	line_len = $('line_len').value;

	var out_str = '<table border="0" cellpadding="0" cellspacing="1">' + "\n";
	for (stIdx=0;stIdx<line_len;stIdx++) {
		if(checked_stone.length > stIdx ){
			if (checked_stone[stIdx]['id'] && checked_stone[stIdx]['id'] != '') {
				out_str = out_str + '<tr><td class="back">' + (stIdx+1) + '</td><td><img src="' + stone_img_folder+checked_stone[stIdx]['id']+'.gif" width="12px" align="absmiddle">' + checked_stone[stIdx]['name'] + '</td><td>' + addComma(checked_stone[stIdx]['price']) + '円</td></tr>' + "\n";
				total_price = total_price + parseInt(checked_stone[stIdx]['price']);
			}
		}
	}

	out_str = out_str + '</table>' + "\n";

	if(total_price > 0){
		$('stone_total').innerHTML   = out_str;

	  total_price_str = '<hr>合計　'+addComma(total_price+'')+'円';
		$('stone_gttotal').innerHTML = total_price_str;
		$('stone_price').value = total_price;
	} else {
		$('stone_total').innerHTML   = "";
		$('stone_gttotal').innerHTML = "";
		$('stone_price').value = "";
	}
}

// 選択された石のコードのパラメータ設定
function set_stn_design_code() {
	stone_code = get_stn_code();
	$('stn_design_code').value = stone_code;
	$('stone_code').value = stone_code;
}

// 選択された石のコード取得
function get_stn_code() {
	stn_code_type1 = encode_stn_code_type1();
	stn_code_type2 = encode_stn_code_type2();

	if(stn_code_type1.length > stn_code_type2.length){
		return stn_code_type2;
	}else{
		return stn_code_type1;
	}
}

function checked_stone_clear(){
	for (var i=0;i<checked_stone.length;i++) {
		if(checked_stone[i] == null){
			checked_stone[i] = { 'id':'', 'name':'', 'price':'', 'ftn_code':'' };
		}else{
			checked_stone[i]['id']    = '';
			checked_stone[i]['name']  = '';
			checked_stone[i]['price'] = '';
			checked_stone[i]['ftn_code'] = '';
		}
	}
}

function addBookmark_stn_code(){
	enc_stn_code = $('stn_design_code').value;
  addBookmark("オーダーメイドブレス", BASE_SITE_URL+BASE_USER_PATH+"order_brace.php?id=" + enc_stn_code);
}

function twitter_stn_code(){
	enc_stn_code = $('stn_design_code').value;
	$('stn_design_url').value = BASE_SITE_URL+BASE_USER_PATH+"order_brace.php?id=" + enc_stn_code;
  tweet();
}

function view_qr_stn_code(){
	line_len = $('line_len').value;
	for(i=0;i<line_len;i++){
		if(checked_stone[i]['id'] == '' || checked_stone[i]['id'] == 0){
			alert('石を全て配置してください。');
			return;
		}
	}

	enc_stn_code = $('stn_design_code').value;
	win01(BASE_SITE_URL+BASE_USER_PATH+BASE_ORDER_PATH+'order_brace_qr.php?id='+enc_stn_code+'&image=main_large_image','detail_image','550', '600');
}

function decode_stn_code_check(){
	enc_stn_code = $('stn_design_code').value;
	if(enc_stn_code == ''){
		stn_design_init();
	}

	make_checked_stone(enc_stn_code);

//	set_stn_design_code();
	$('stone_code').value = enc_stn_code;
}

// 設定済みデザインを読み込む
function make_checked_stone(enc_stn_code) {
	var a= new Ajax.Request(
			BASE_SITE_URL+BASE_USER_PATH+BASE_ORDER_PATH+"makestonedesign.php",
			{
					"method":"post",
					"parameters":"id="+enc_stn_code,
					onSuccess: function(request) {   
					},
					onComplete: function(request) {
						var res = request.responseText;

						//Jsonセット
						eval(res);

            $('stone_cm').value = pStone_cm;
            $('line_len').value = pLine_len;
						try{
							document.getElementById('ass'+pAssent).checked = true;
						}catch(e){
						}

						stone_size_init();
						make_main_area();

						make_select_stone_area();
						make_fortune_stone_percentage();
//						set_stn_design_code();
					},
					onFailure: function(request) {
//					    alert('読み込みに失敗しました');
						stn_design_init();
					},
					onException: function (request) {
//					    alert('読み込み中にエラーが発生しました');
//					    $('stone_design').innerHTML = request.responseText;
						stn_design_init();
					}
			}
	);
  return a._complete;
}

function cart_in(){
	line_len = $('line_len').value;
	for(i=0;i<line_len;i++){
		if(checked_stone[i]['id'] == '' || checked_stone[i]['id'] == 0){
			alert('石を全て配置してください。');
			return;
		}
	}

  $('product_id').value = order_brace_product_id;
	var form = $('form1');
	form.submit();

	return false;
}