/*
 * Popup & ImageChange Scripts  
 * powered by jQuery (http://www.jquery.com)
 * written by Ryuichi Tokugami (http://miningbrownie.co.jp)
 * 
 * depends Dialog,ui
 *
 */

(function() {
	
	jQuery.fn.popup_product = function(config) {
		config = jQuery.extend( {
			xOffset : 5,
			yOffset : 15
		}, config);
		var parent = this;
		// ターゲットがクリックされたら
		jQuery.each(this, function(index) {
			$(this).click(function(e) {
				// 大枠を作る。
				if ($('#over')) {
					$('#over').remove();
				}
				var strJson = $(this).children("span.json").html();
				var json = eval("("+strJson+")");
				
				var divOver = document.createElement("div");
				divOver.id = "over";
				//上の方
				var divTitle = document.createElement("div");
				{
					divTitle.className="over-title";
					var dl_title = document.createElement("dl");
					{
						//ブランド
						var dt_dl_title = document.createElement("dt");
						{
							var a_dt_dl_title = document.createElement("a");
							{
								a_dt_dl_title.href = "/brand/?page="+json.brand.brand_id;
								a_dt_dl_title.innerHTML = json.brand.brand_name;
								$(dt_dl_title).append($(a_dt_dl_title));
							}
							$(dl_title).append($(dt_dl_title));
						}
						//商品名
						var dd_dl_title = document.createElement("dd");
						{
							var a_dd_dl_title = document.createElement("a");
							{
								a_dd_dl_title.href = "/products/detail.php?product_id="+json.product_id;
								a_dd_dl_title.innerHTML = json.name;
								$(dd_dl_title).append($(a_dd_dl_title));
							}
							$(dl_title).append($(dd_dl_title));
						}
						$(divTitle).append($(dl_title));
					}
					//品番
					var p_title = document.createElement("p");
					{
						p_title.className = "part-number";
						p_title.innerHTML = "品番:"+json.product_id;
						$(divTitle).append($(p_title));
					}
					// 閉じるボタン
					var span_title = document.createElement("span");
					{
						span_title.id = "closetooltip";
						var img = document.createElement("img");
						{
							img.src = '/user_data/packages/default/img/products/close.png';
							img.alt = "X";
							$(span_title).append($(img));
						}
						$(span_title).click(function(e){
							$(divOver).css("display","none");
							$(divOver).remove();
						});
						$(divTitle).append($(span_title));	
					}
					$(divOver).append($(divTitle));
				}
				var imageblock = document.createElement("div");
				{
					imageblock.className = "over-image-block";
					
					var cont01_imageblock = document.createElement("div");
					{
						cont01_imageblock.className = "cont01";
						var p_cont01_imageblock = document.createElement("p");
						{
							var img_p_cont01_imageblock = document.createElement("img");
							{
								img_p_cont01_imageblock.id = "tooltip_picture";
								img_p_cont01_imageblock.name = "tooltip_picture";
								img_p_cont01_imageblock.alt = "Image preview";
								img_p_cont01_imageblock.width = 200;
								img_p_cont01_imageblock.height = 200;
								if(json.images){
									img_p_cont01_imageblock.src = json.images[0].replace("thumb/","");
								}else{
									img_p_cont01_imageblock.src = "noimage.png";
								}
								$(p_cont01_imageblock).append($(img_p_cont01_imageblock));
							}
							$(cont01_imageblock).append($(p_cont01_imageblock));
						}
						$(imageblock).append($(cont01_imageblock));
					}
					var cont02_imageblock = document.createElement("div");
					{
						cont02_imageblock.className = "cont02";
						for(i = 0;i < 3;i++){
							if(json.images[i]){
								var p_cont02_imageblock = document.createElement("p");
								{
									var img_p_cont02_imageblock = document.createElement("img");
									{
										img_p_cont02_imageblock.height = 50;
										img_p_cont02_imageblock.width = 50;
										img_p_cont02_imageblock.alt = "";
										img_p_cont02_imageblock.src = json.images[i];
										var largeImage = json.images[i];
										largeImage = largeImage.replace("thumb/","");
										$(img_p_cont02_imageblock).changeTooltipImage({image:largeImage,target:"tooltip_picture"});
										$(p_cont02_imageblock).append($(img_p_cont02_imageblock));
									}
									
								}
								$(cont02_imageblock).append($(p_cont02_imageblock));
							}
						}
						$(imageblock).append($(cont02_imageblock));
					}
					$(divOver).append($(imageblock));
				}
				
				//seg-block05
				var divSegblock = document.createElement("div");
				{
					divSegblock.className = "seg-block05";
					var sbCont_divSegblock = document.createElement("div");
					{
						sbCont_divSegblock.className="sb-cont";
						var dl_sbCont_divSegblock = document.createElement("dl");
						{
							dl_sbCont_divSegblock.className="d-list01 space-btm01";
							var dt_dl_sbCont_divSegblock = document.createElement("dt");
							{
								dt_dl_sbCont_divSegblock.innerHTML = "レンタル料の目安";
								$(dl_sbCont_divSegblock).append($(dt_dl_sbCont_divSegblock));
							}
							var dd_dl_sbCont_divSegblock = document.createElement("dd");
							{
								dd_dl_sbCont_divSegblock.className = "space-btm01";
								var ul_dd_dl_sbCont_divSegblock = document.createElement("ul");
								{
									ul_dd_dl_sbCont_divSegblock.className = "u-list01 space-top02 space-btm01";
									for(i = 0;i < json.prices.length ;i++){
										var li_ul_dd_dl_sbCont_divSegblock = document.createElement("li");
										{
											li_ul_dd_dl_sbCont_divSegblock.innerHTML = json.prices[i].day+"日"+json.prices[i].subtotal+"円(1日当たり"+json.prices[i].view_price+"円";
											if(json.prices[i].discount_per){
												li_ul_dd_dl_sbCont_divSegblock.innerHTML += "、"+json.prices[i].discount_per+"%OFF";
											}
											li_ul_dd_dl_sbCont_divSegblock.innerHTML += ")";
											$(ul_dd_dl_sbCont_divSegblock).append($(li_ul_dd_dl_sbCont_divSegblock));
										}
									}
									$(dd_dl_sbCont_divSegblock).append($(ul_dd_dl_sbCont_divSegblock));
								}
								$(dl_sbCont_divSegblock).append($(dd_dl_sbCont_divSegblock));
							}
							$(sbCont_divSegblock).append($(dl_sbCont_divSegblock));
						}
						$(divSegblock).append($(sbCont_divSegblock));
					}
					$(divOver).append($(divSegblock));
				}
				//詳細へのリンク
				var pOverbtnDetail = document.createElement("div");
				{
					pOverbtnDetail.className = "over-btn-detail";
					var a_pOverbtnDetail = document.createElement("a");
					{
						a_pOverbtnDetail.href = "/products/detail.php?product_id="+json.product_id;
						var img_a_pOverbtnDetail = document.createElement("img");
						{
							img_a_pOverbtnDetail.id = "detaillink";
							img_a_pOverbtnDetail.height = 20;
							img_a_pOverbtnDetail.width = 79;
							img_a_pOverbtnDetail.name="detailid";
							img_a_pOverbtnDetail.alt="詳細ページ";
							img_a_pOverbtnDetail.src = "/common/images/btn_view-detail_o.gif";
							$(a_pOverbtnDetail).append($(img_a_pOverbtnDetail));
						}
						$(pOverbtnDetail).append($(a_pOverbtnDetail));
					}
					$(divOver).append($(pOverbtnDetail));
				}
				$("#two_maincolumn").append($(divOver));
				
/*
#over{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	height:405px;
	width:380px;
}
*/
				
				$(divOver).css("display","block")
					.css("position","absolute") //CSSついたら消す
//					.css("background","#333")  //CSSついたら消す
//					.css("color","#fff") //CSSついたら消す
//					.css("height","405px") //CSSついたら消す
//					.css("width","380px") //CSSついたら消す
//					.css("border","1px solid #ccc") //CSSついたら消す
//					.css("padding","5px") //CSSついたら消す
					.css("top",(e.pageY - config.yOffset) +"px" )
					.css("left",e.pageX + config.xOffset + "px")
					.fadeIn("fast");
			});
		});
	};
	
	
	jQuery.fn.changeTooltipImage = function(config){
		jQuery.each(this,function(index){
			$(this).mouseover(function(e){
				$('#'+config.target).attr('src',config.image);
			});
		});
	};
	
	
})(jQuery);

// starting the script on page load
$(document).ready(function() {
	$("span.over").popup_product();
});