var sid = 0;
var status = 0;
var lastRel = 0;

var px = 0;
var py = 0;

var setup = 0;

$(function(){
	
	px = $('#station').offset().left;
	py = $('#station').offset().top;
	
	$('#popup a').click(function(){
		var tar = $(this).attr('rel');
		goStation(tar)
	});

	$('#station p a').click(function(){
		var rel = $(this).attr('rel');
		if(status == 0 || lastRel != rel){
			status++;
			setPopup($(this)[0],rel);
			lastRel = rel;
		}
	});
	
	$('#station p a').mouseover(function(){
		var rel = $(this).attr('rel');
		if(status == 0 || lastRel != rel){
			status++;
			setPopup($(this)[0],rel);
			lastRel = rel;
		}
	});
	
	$('#station').append('<div id="hideArea">&nbsp;</div>');
	$('#hideArea').click(function(){status=0;Ext.get('popup').fadeOut({ duration : 0.2 });});
	$('#hideArea').mouseover(function(){status=0;Ext.get('popup').fadeOut({ duration : 0.2 });});
});

var setPopup = function(obj,id){
	if(setup == 0){
		var pClass = "";
		var bw = $(obj).width();
		var bh = $(obj).height();
		
		var sWidth = $('#station').width();
		var sHeight = $('#station').height();
		
		var pw = $("#popup").width();
		var ph = $("#popup").height();
		
		sid = id;
		
		//クリック地点の座標を取得
		var x = $(obj).offset().left-px;
		var y = $(obj).offset().top-py;
		
		//ふきだし位置の判別とポップアップ座標の調整
		var pX = 0;
		var pY = 0;
		
		if(x < sWidth/2){
			pClass = "Left";
			pX = bw/2;
		}else{
			pClass = "Right";
			pX = -bh+(ph/2);
		}
		
		if(y < sHeight/2){
			pClass = pClass + "Top";
			pY = bh/2;
		}else{
			pClass = pClass + "Bottom";
			pY = -ph+(bh/2);
		}
		
		if(pClass.indexOf('Right') != -1){pX -= 20;}
		
		//ポップアップ
		Ext.get("popup").setX(Ext.get(obj).getX()+pX);
		Ext.get("popup").setY(Ext.get(obj).getY()+pY);
		Ext.get('popup').dom.className = pClass;
		Ext.get('popup').fadeIn({ duration : 0.01 });
	}
}

var goStation = function(tar){
	var view = "";
	for(i = 0; i < document.stationForm.viewStyle.length; i ++){
		if(document.stationForm.viewStyle[i].checked){
			view = document.stationForm.viewStyle[i].value;
		}
	}
	var href = "";
	if(tar != "map"){
		href = "/rent/" + tar + "/" + sid + "/" + view + ".html"; 
	}else{
		href = "/rent/0/" + sid + "/DS_ON_MAP.html";
	}
	document.location = href;
}

var setupmode = function(){
	if(setup == 0){
		setup++;
		$('#station p').draggable();
		$('#station dl').draggable();
		$('.setup a').html("finish!");
	}else{
		setup = 0;
		
		var css = "";
		
		$('#station p').each(function(){
			var x = $(this).offset().left-px;
			var y = $(this).offset().top-py;
			css += '.ibtn' + $(this).index() + ' {';
			css += 'left:' + x + 'px;'
			css += 'top:' + y + 'px;}\n'
		});
		
		$('#station dl').each(function(){
			var x = $(this).offset().left-px;
			var y = $(this).offset().top-py;
			css += 'div#station dl {position:absolute;z-index:2;';
			css += 'left:' + x + 'px;'
			css += 'top:' + y + 'px;}\n'
		});
		
		$('.result').val(css);
		$('.setup a').html("setup mode");
	}
}