function loadXML(){

new Ajax.Request('/guide/xml/area_' + area_id + '.xml', {
method:"get",
onSuccess:function(httpObj){
xmlData = httpObj.responseXML;
area = xmlData.getElementsByTagName('area')[0]; 
setimg();

},

onFailure:function(httpObj){
$("output").innerHTML = "エラーで読み込めませんでした";
}
});
}


function bocCreate(){

new Insertion.Top('map-area','<div id="box"><div id="btop"></div><div class="clearfixs" id="bcontent"></div><div id="bbtm"></div></div>');
Element.hide($('box')); 
//ボックスリスナーセット
Event.observe($('box'),'mouseover',overb,false);
Event.observe($('box'),'mouseout',outb,false);

}

function setimg() {
prpT=new Array();
prpX=new Array();
prpY=new Array();
prpTPT=new Array();
prpTPX=new Array();
prpTPY=new Array();

var mapImg=area.getElementsByTagName('mapimg')[0].firstChild.nodeValue;
var bgStr='url('+mapImg+') left top no-repeat'
Element.setStyle('map-area' ,{'background':bgStr}); 

var btn='<a href="/guide/" id="back-btn"><img src="/guide/map_parts/back_btn.gif" /></a>';
new Insertion.Bottom('map-area',btn);
Element.setStyle($('back-btn'),{'left':'555px','top':'375px','position':'absolute','zindex':'998'}); 

northNode=area.getElementsByTagName('to')[0].getElementsByTagName('north')[0].firstChild;
eastNode=area.getElementsByTagName('to')[0].getElementsByTagName('east')[0].firstChild;
southNode=area.getElementsByTagName('to')[0].getElementsByTagName('south')[0].firstChild;
westNode=area.getElementsByTagName('to')[0].getElementsByTagName('west')[0].firstChild;

if(northNode!=null){
northURL=area.getElementsByTagName('to')[0].getElementsByTagName('north')[0].getElementsByTagName('url')[0].firstChild.nodeValue;
northImage=area.getElementsByTagName('to')[0].getElementsByTagName('north')[0].getElementsByTagName('image')[0].firstChild.nodeValue;
//北座標
var nourthT='<a href="'+northURL+'" id="north"><img src="/guide/'+northImage+'"/></a>';
new Insertion.Bottom('map-area',nourthT);
Element.setStyle($('north'),{'left':'353px','top':'0px','position':'absolute'}); 
}
if(eastNode!=null){
eastURL=area.getElementsByTagName('to')[0].getElementsByTagName('east')[0].getElementsByTagName('url')[0].firstChild.nodeValue;
eastImage=area.getElementsByTagName('to')[0].getElementsByTagName('east')[0].getElementsByTagName('image')[0].firstChild.nodeValue;
//東座標
var eastT='<a href="'+eastURL+'" id="east"><img src="/guide/'+eastImage+'"/></a>'
new Insertion.Bottom('map-area',eastT);
Element.setStyle($('east'),{'left':'745px','top':'170px','position':'absolute'}); 
}
if(southNode!=null){
southURL=area.getElementsByTagName('to')[0].getElementsByTagName('south')[0].getElementsByTagName('url')[0].firstChild.nodeValue;
southImage=area.getElementsByTagName('to')[0].getElementsByTagName('south')[0].getElementsByTagName('image')[0].firstChild.nodeValue;
//南座標
var southT='<a href="'+southURL+'" id="south"><img src="/guide/'+southImage+'"/></a>'
new Insertion.Bottom('map-area',southT);
Element.setStyle($('south'),{'left':'353px','top':'365px','position':'absolute'}); 
}
if(westNode!=null){
westURL=area.getElementsByTagName('to')[0].getElementsByTagName('west')[0].getElementsByTagName('url')[0].firstChild.nodeValue;
westImage=area.getElementsByTagName('to')[0].getElementsByTagName('west')[0].getElementsByTagName('image')[0].firstChild.nodeValue;
//西座標
var westT='<a href="'+westURL+'" id="west"><img src="/guide/'+westImage+'"/></a>'
new Insertion.Bottom('map-area',westT);
Element.setStyle($('west'),{'left':'8px','top':'170px','position':'absolute'}); }

var item = $('map-area');
normalCNum=area.getElementsByTagName('normal')[0].getElementsByTagName('circle').length;
tex=new Array(normalCNum);
for (var i = 0; i < normalCNum; i ++){
var normalC=area.getElementsByTagName('normal')[0].getElementsByTagName('circle')[i];
var x =normalC.getElementsByTagName('x')[0].firstChild.nodeValue;
var y =normalC.getElementsByTagName('y')[0].firstChild.nodeValue;
var cat =normalC.getElementsByTagName('cat')[0].firstChild.nodeValue;
var spots =normalC.getElementsByTagName('spots')[0];
var spot =normalC.getElementsByTagName('spot');
var imgS='<img src="/guide/map_parts/'+cat+'.png" class="alpha" height="22" width="22" id="cr'+i+'"/>';
new Insertion.Top('map-area', imgS);
var xP=x+'px';
var yP=y+'px';
var idName='cr'+i;
var cr=$(idName);
Element.setStyle(cr,{'left':xP,'top':yP,'position':'absolute','zIndex':i}); 

var spotN=normalC.getElementsByTagName('spot').length;
tex[i]="";


for (var j = 0; j < spotN; j ++){
var title=spot[j].getElementsByTagName('title')[0].firstChild.nodeValue;

var url=spot[j].getElementsByTagName('url')[0].firstChild.nodeValue;
tex[i]+='<p><a href="'+url+'">'+title+'</a></p>';
}

/*各々ボールプロパティ格納用配列*/

prpT[i]=tex[i];
prpX[i]=Number(x);
prpY[i]=Number(y);

//ノーマルボールリスナーセット
Event.observe(cr,'mouseover',over,false);
Event.observe(cr,'mouseout',out,false);
}



//タウンポイント生成開始
var tpCNum=area.getElementsByTagName('tp')[0].getElementsByTagName('circle').length;



for (var k = 0; k < tpCNum; k ++){
var tpC=area.getElementsByTagName('tp')[0].getElementsByTagName('circle')[k];
var x =tpC.getElementsByTagName('x')[0].firstChild.nodeValue;
var y =tpC.getElementsByTagName('y')[0].firstChild.nodeValue;
var title =tpC.getElementsByTagName('title')[0].firstChild.nodeValue;
var url =tpC.getElementsByTagName('url')[0].firstChild.nodeValue;
var read =tpC.getElementsByTagName('read')[0].firstChild.nodeValue;
var image =tpC.getElementsByTagName('image')[0].firstChild.nodeValue;
var tptag='<div class="leftc"><img src="/guide/'+image+'" class="imgs"  /></div><div class="rightc"><img src="/guide/map_parts/tp_h.gif" / ><p><a href="'+url+'" class="tpa">'+title+'</a></p><p>'+read+'</p></div>';
var tpImg='<img src="/guide/map_parts/tp.png" height="22" width="22" id="tp'+k+'" class="alpha" />';
new Insertion.Top('map-area',tpImg);
//グローバルな配列にx・y・tptagを代入
prpTPT[k]=tptag;
prpTPX[k]=Number(x);
prpTPY[k]=Number(y);
var tpxP=x+'px';
var tpyP=y+'px';
var idName='tp'+k;
var tp=$(idName);
Element.setStyle(tp,{'left':tpxP,'top':tpyP,'position':'absolute','zIndex':i+k}); 
Event.observe(tp,'mouseover',overTp,false);
Event.observe(tp,'mouseout',out,false);
}



}

//ノーマルロールオーバー処理
function over(event){


var eID = Event.element(event);
var txx=eID.id.slice(2,eID.id.length);
//var txx=eID.id.charAt(eID.id.length-1);
var thisN=Number(txx);

Element.setStyle($('box'),{'position':'absolute','zIndex':'999','width':'143px'}); 
Element.setStyle($('bcontent'),{'borderLeft':'1px solid #AFA9A8','borderRight':'1px solid #AFA9A8'}); 

$('bcontent').innerHTML=prpT[thisN];

var thisX=prpX[thisN];
var thisY=prpY[thisN];

$('btop').innerHTML='<img src="/guide/map_parts/box_top_def.gif" height="8" width="143" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/box_btm_def.gif" height="8" width="143" />';

if(thisX<=388&thisY<=197){
var xP=thisX-4+'px';
var yP=thisY+11+'px';
Element.setStyle($('box') ,{'left':xP, 'top':yP,'zindex':'999'}); 
$('btop').innerHTML='<img src="/guide/map_parts/box_top_lt.gif" height="8" width="143" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/box_btm_def.gif" height="8" width="143" />';
}
if(thisX>=388&thisY<=197){
wh=Element.getDimensions($('box'));
var xP=thisX-wh.width+25+'px';
var yP=thisY+11+'px';
Element.setStyle($('box') ,{'left':xP, 'top':yP,'zindex':'999'}); 
$('btop').innerHTML='<img src="/guide/map_parts/box_top_rt.gif" height="8" width="143" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/box_btm_def.gif" height="8" width="143" />';
}
if(thisX<=388&thisY>=197){
wh=Element.getDimensions($('box'));
var xP=thisX-4+'px';
var yP=thisY-wh.height+11+'px';
Element.setStyle($('box') ,{'left':xP, 'top':yP,'zindex':'999'}); 
$('btop').innerHTML='<img src="/guide/map_parts/box_top_def.gif" height="8" width="143" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/box_btm_lb.gif" height="8" width="143" />';
}

if(thisX>=388&thisY>=197){
wh=Element.getDimensions($('box'));
var xP=thisX-wh.width+25+'px';
var yP=thisY-wh.height+11+'px';
Element.setStyle($('box') ,{'left':xP, 'top':yP,'zindex':'999'}); 
$('btop').innerHTML='<img src="/guide/map_parts/box_top_def.gif" height="8" width="143" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/box_btm_rb.gif" height="8" width="143" />';
}
Element.show($('box')); 
}


//タウンポイントロールオーバー処理
function overTp(event){


var eID = Event.element(event);
var txx=eID.id.slice(2,eID.id.length);
var thisN=Number(txx);

Element.setStyle($('box'),{'position':'absolute','zIndex':'999','width':'200px'}); 
Element.setStyle($('bcontent'),{'borderLeft':'1px solid #f17c7c','borderRight':'1px solid #f17c7c'}); 

$('bcontent').innerHTML=prpTPT[thisN];

var thisX=prpTPX[thisN];
var thisY=prpTPY[thisN];

$('btop').innerHTML='<img src="/guide/map_parts/tpbox_top_def.gif" height="5" width="200" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/tpbox_btm_def.gif" height="5" width="200" />';

if(thisX<=388&thisY<=197){
var xP=thisX-4+'px';
var yP=thisY+11+'px';
Element.setStyle($('box') ,{'left':xP, 'top':yP,'zindex':'999'}); 
$('btop').innerHTML='<img src="/guide/map_parts/tpbox_top_lt.gif" height="5" width="200" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/tpbox_btm_def.gif" height="5" width="200" />';
}
if(thisX>=388&thisY<=197){
wh=Element.getDimensions($('box'));
var xP=thisX-wh.width+25+'px';
var yP=thisY+11+'px';
Element.setStyle($('box') ,{'left':xP, 'top':yP,'zindex':'999'}); 
$('btop').innerHTML='<img src="/guide/map_parts/tpbox_top_rt.gif" height="5" width="200" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/tpbox_btm_def.gif" height="5" width="200" />';
}
if(thisX<=388&thisY>=197){
wh=Element.getDimensions($('box'));
var xP=thisX-4+'px';
var yP=thisY-wh.height+11+'px';
Element.setStyle($('box') ,{'left':xP, 'top':yP,'zindex':'999'}); 
$('btop').innerHTML='<img src="/guide/map_parts/tpbox_top_def.gif" height="5" width="200" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/tpbox_btm_lb.gif" height="5" width="200" />';
}

if(thisX>=388&thisY>=197){
wh=Element.getDimensions($('box'));
var xP=thisX-wh.width+25+'px';
var yP=thisY-wh.height+11+'px';
Element.setStyle($('box') ,{'left':xP, 'top':yP,'zindex':'999'}); 
$('btop').innerHTML='<img src="/guide/map_parts/tpbox_top_def.gif" height="5" width="200" />';
$('bbtm').innerHTML='<img src="/guide/map_parts/tpbox_btm_rb.gif" height="5" width="200" />';
}
Element.show($('box')); 

}

function out(){

Element.hide($('box')); 
}

function overb(){

Element.show($('box')); 
}

function outb(){

Element.hide($('box')); 
}

Event.observe(window,'load',loadXML);
Event.observe(window,'load',bocCreate);