$(function() {
	$("#pointer").draggable({ 
		containment: '#slider',
		cursor: 'move',
		drag: function(e, ui) {
			if(	document.getElementById("wyw").style.display != 'none'){
				document.getElementById("wyw").innerHTML = '';
				document.getElementById("wyw").style.display = 'none';
			}
			var pointer =  Math.round(Math.abs(ui.position.top)) / 200;
			var w = document.getElementById("user-items").clientWidth;
			var element = document.getElementById("item-list");
			var elm = element.style.margin.match(/^-?[0-9]+/);
			var m = SlideGetMarginTop(w);
			PauseSlideShow(Playing, 'play', 'pause');

			if(pointer*100 < 96){	

				SetOpacity("item-list", 10);
				margin_top = -1 * pointer * m ;
				element.style.top =  margin_top + "px";

			}else{
				SelectSlideType("user-items", "item-list");
			}
		}
	});

});
function GetRecentHistory(){
	var xmlHttpReq = createHttpRequest(); 
	var url = "./ajax/ranking.php?type=right&id=list";
	ajax(xmlHttpReq, "GET", url, "", "list");
}
window.onload = function ()
{
	var xmlHttpReq = this.createHttpRequest(); 
	var url = "./ajax/ranking.php?type=right&id=list";
	ajax(xmlHttpReq, "GET", url, "", "list");
};

function GetDescription(id){
	document.getElementById("description-1").style.display = "none";
	document.getElementById("description-2").style.display = "none";
	document.getElementById("description-3").style.display = "none";
	document.getElementById("description-4").style.display = "none";
	document.getElementById("description-5").style.display = "none";
	document.getElementById(id).style.display = "block";
}
function GetCategoryMenu(){

	document.getElementById('get-category').style.cssText = 'color:#fff;background:url(http://img.proory.com/image/lower.bg.hover.gif);';
	var src = '<ul onmouseout="GetCategoryMenuOut()"><li>アクセサリー</li><li>バッグ</li><li>小物</li><li>衣類</li><li>置物</li><li>雑貨</li><li>家具</li><li>グラス・食器類</li><li>本・漫画・雑誌</li><li>おもちゃ</li></ul>';
	
	document.getElementById('category-menu').innerHTML = src;
	document.getElementById('category-menu').style.display = "block";
	
}

function GetCategoryMenuOut(){
	document.getElementById('category-menu').style.display='none';
	document.getElementById('get-category').style.cssText = 'color:#404040;background:url(http://img.proory.com/image/lower.bg.center.gif);';
}

function GetOtherItems(num, id, loader_id){
	document.getElementById(id).style.display = 'none';
	document.getElementById(loader_id).style.display = 'block';
	document.getElementById(loader_id).style.display = 'none';
	document.getElementById(id).style.display = 'block';
}
/* */
function SubscribeMailMagazine(){
	var email = document.getElementById('subscribe-magazine').value;
	alert(email);

}

/* About slide show*/
function SetOpacity(id, value){
	document.getElementById(id).style.filter = 'alpha(opacity=' + (value * 10) + ')';
    document.getElementById(id).style.MozOpacity = value / 10;
    document.getElementById(id).style.opacity = value / 10;
}

function SelectSlideType(id, list_id){
		
		var element = document.getElementById("wyw");
		element.innerHTML = '<p id="repeat" onclick="Playing = ReStartSlideShow(\'play\', \'pause\');">リピート</p>';
		element.style.cssText = "text-align:center;width:" + document.getElementById(id).clientWidth + "px;";
		SetOpacity(list_id, 3);
		document.getElementById("pause").style.display = 'block';
		document.getElementById("play").style.display = 'none';	
		document.getElementById("wyw").style.display = 'block';


}
function SlideGetMarginTop(w){
	var m = 0;
	if(	w < 535 ){
		m = 1450;
	}else{
		m = 1050;
	}
	
	return m;
}

function SlideItems(id, list_id, pointer_id, direction){
	var w = document.getElementById(id).clientWidth;
	var h = document.getElementById(id).clientHeight;
	var element = document.getElementById(list_id);
	var pointer = document.getElementById(pointer_id);
	var elm = element.style.margin.match(/^-?[0-9]+/);
	var m = SlideGetMarginTop(w);
	
	switch(direction){
		case "up": m = m * 1; break;
		case "down": m = m * -1;break;
	}
	if(Number(pointer.style.top.match(/^[0-9\.]+/)) >= 96){

		clearInterval(timer);
		SelectSlideType(id, list_id);

	}else{
		if(elm > m){
			if(pointer.style.top.length == 0){
				pointer.style.top = 0 + "%";
			}else{
				pos = Number(pointer.style.top.match(/^[0-9\.]+/));
				margin_top = (pos/100) * m;
				element.style.top =  margin_top + "px";
				pointer.style.top = pos + 0.1 + "%";
			}

		}else{

			clearInterval(timer);
			return false;

		}
		
	}
}

function StartSlideShow(id_play, id_pause){ 
	var microsec = 50;
	SetOpacity("item-list", 10);
	timer = setInterval('SlideItems("user-items", "item-list", "pointer", "down")', microsec);
	document.getElementById(id_play).style.display = 'none';
	document.getElementById(id_pause).style.display = 'block';
	return timer;
}
function ReStartSlideShow(id_play, id_pause){ 
	var pointer = document.getElementById("pointer");
	var element = document.getElementById("item-list");
	pointer.style.top = element.style.top  = 0 + "%";
	document.getElementById("wyw").innerHTML = '';
	document.getElementById("wyw").style.display = 'none';	
	timer =  StartSlideShow(id_play, id_pause);
	return timer;
}


function PauseSlideShow(timer, id_play, id_pause){
	clearInterval(timer);
	document.getElementById(id_pause).style.display = 'none';
	document.getElementById(id_play).style.display = 'block';
}

function GetSlideByClick(event, slider_id, pointer_id){
	
	if(!event){ event= window.event; }
	var hx, hy;
	var pointer = document.getElementById(pointer_id);
	var Y = document.getElementById(slider_id).offsetHeight;
	
	// for IE
	if (document.all) {
	        hx = event.offsetX;
	        hy = event.offsetY;
	} else {
	        hx = event.layerX;
	        hy = event.layerY;
	}


	CPos = Number(pointer.style.top.match(/^[0-9]+/));

	MPos = (hy / Y) * 100;
	ml = l = 0.5;
	var w = document.getElementById("user-items").clientWidth;
	var element = document.getElementById("item-list");
	var elm = element.style.margin.match(/^-?[0-9]+/);

	document.getElementById("wyw").style.display = 'none';	
	document.getElementById("wyw").innerHTML = '';
	
	var m = SlideGetMarginTop(w);
	
	// go down
	if(CPos < MPos){

		while((CPos + ml) < MPos){
			pointer.style.top = (CPos + ml) + "%";
			ml += l;
		}
		margin_top = -1 * m  * (CPos + ml - l) / 100 ;

	// go up
	}else{
		while((CPos - ml) > MPos){
			pointer.style.top = (CPos - ml) + "%";
			document.getElementById("item-list").style.top = 1 * ml + "%";
			ml += l;
		}
		margin_top = -1 *  m * (CPos - ml) / 100 ;
	}
	
	element.style.top =  margin_top + "px";

	if(
		Math.abs(margin_top / m * 100) >= 96
	){ 
		SelectSlideType("user-items", "item-list"); 
	
	}else if(
		Math.abs(margin_top / m * 100) < 96 &&
		CPos >= 96
	){
		SetOpacity("item-list", 10);
		document.getElementById('pause').style.display = "none";
		document.getElementById('play').style.display = "block";
	}

}


function About(word){
	
	var desc = "";
	switch(word){
		case "ad":
			desc = '<h3>広告掲載について</h3><p>prooryでは広告主様を募集しています。現在、募集している外部リンク広告枠は以下の通りです。<ul style="padding-left:5%;"><li>Topページへの広告</li><li>404(ページが見つかりません)ページへの広告</li></ul></p><p>料金コースは以下のようになっています。<ul style="padding-left:5%;"><li>表示回数型：￥1 × 表示回数</li><li>固定価格型：￥2000 × 掲載日数</li></ul>上記の広告枠と料金コースを組み合わせることで、<strong style="color:red;">￥0から費用対効果を見込める広告</strong>を掲載することができます。なお、プレミアムアカウントをお持ちの方は無料広告枠をお使い頂けます。<br />また、「こんなタイプの広告はできないの?」といったお問い合わせにも柔軟に対応していきます。</p><p>お問合わせは以下のリンクよりお願い致します。<ul style="padding-left:5%;"><li><a href="http://proory.com/inquiry/?title=Topページへの表示回数型広告について">Topページへの表示回数型広告について</a></li><li><a href="http://proory.com/inquiry/?title=Topページへの固定価格型広告について">Topページへの固定価格型広告について</a></li><li><a href="http://proory.com/inquiry/?title=404ページへの表示回数型広告について">404ページへの表示回数型広告について</a></li><li><a href="http://proory.com/inquiry/?title=404ページへの固定価格型広告について">404ページへの固定価格型広告について</a></li><li><a href="http://proory.com/inquiry/?title=他の広告枠について">他の広告枠について</a></li></ul></p><p align="center"><span class="clickable" onclick="document.getElementById(\'msg-dialog\').style.display = \'none\';">閉じる</span></p>';
		break;
		case "howtobuy":
			desc = '<h3>購入するには</h3><p>prooryには購入用アカウントと出品用アカウントの2種類のアカウントがあります。<br /><span style="color:red">双方とも無料で開設でき、出品商品を購入することができます。</span>違いは商品の出品に関する機能(商品の追加・変更・削除や販売履歴の閲覧)のある・なしです。</p><p style="text-align:right;margin:10px auto;">出品用アカウントをお持ちの場合は<a href="./login/">こちらからログイン</a>して下さい。<br />*&nbsp;出品用アカウントは<a href="https://proory.com/registration/">こちらから登録</a>できます。</p><p style="margin-bottom:10px;">購入用アカウントを開設する場合は<strong style="color:red;">以下のフォームにPC用のメールアドレスを入力してください。</strong></p><p>入力を完了すると仮登録メールが送信されます。仮登録メールに記載のURLから登録情報(ユーザー名、パスワード)を設定すると登録が完了します。</p><p class="form"><strong>Eメール:</strong><input type="text" name="email" class="buyer-email"  onfocus="InputFocusAtMsgDialog(\'email\', \'buyer-email-focus\');" onblur="InputFocusAtMsgDialog(\'email\', \'buyer-email\');" /><input type="button" value="&nbsp;登&nbsp;&nbsp;録&nbsp;" onclick="CreateBuyerAccount();" class="submit-button" /></p><p style="clear:left;">ご入力頂いたメールアドレスは他の利用者には一切公開されません。</p><p align="center"><span class="clickable" onclick="document.getElementById(\'msg-dialog\').style.display = \'none\';">閉じる</span></p>';
		break;
		
		case "tags":
			desc = '<h3>タグクラウドから検索</h3><p>タグはその商品を表すキーワードのことです。例えば、陶器のカップには、「カップ」、「コーヒー」、「ティータイム」等といったタグが考えられます。<br />ただ、手作りやハンドメイド品にはそれ以外のキーワードも考えられます。例えば、その陶器のカップを陶芸家の「○○さん」が作っている場合、「○○さん」も適切なタグとなります。同時にそれは最も適切なカテゴリーの一つと言えます。<br />タグが設定されている場合、「○○さん」で検索すると、その陶器のカップを見つけることができます。<br />タグクラウドからはお使いのブラウザのページ内の検索機能を使用すると探しているタグを簡単に見つけることができます。<br /><a href="http://proory.com/?tags">タグクラウドから検索する</a></p><p align="center"><span class="clickable" onclick="document.getElementById(\'msg-dialog\').style.display = \'none\';">閉じる</span></p>';

		break;
		
	}
	
	document.getElementById("msg-dialog").innerHTML = desc;
	document.getElementById("msg-dialog").className = 'about'; 
	document.getElementById("msg-dialog").style.background = '#fff'; 
	document.getElementById("msg-dialog").style.display = 'block'; 

}

function InputFocusAtMsgDialog(iname, cname){
	var MsgDialog = document.getElementById("msg-dialog");
	var input = MsgDialog.getElementsByTagName("input");
	input[iname].className = cname;
}

function CreateBuyerAccount(){
	var MsgDialog = document.getElementById("msg-dialog");
	var input = MsgDialog.getElementsByTagName("input");
	var xmlHttpReq = createHttpRequest(); 
	var url = "./ajax/registration.buyer.php?email=" + encodeURI(input[0].value.replace(/\s/, '')) + "&ref=" + encodeURI(document.URL);
	var curl = location.href;
	if(curl.match(/^https:/)){
		var imgurl = 'https://proory.com';
	}else{
		var imgurl = 'http://img.proory.net';
	}
	MsgDialog.innerHTML = '<p align="center">少々お待ち下さい<br /><img src="http://img.proory.net/image/ajax-loader-black-bar.gif" alt="少々お待ち下さい" /><br /><span class="clickable" onclick="document.getElementById(\'msg-dialog\').style.display = \'none\';">閉じる</span></p>';
	ajax(xmlHttpReq, "GET", url, "", "msg-dialog");
}
function JumpCategory(uri)
{
	if(uri != "")  window.location.href = uri; 
}