/* Poi.js */ function _Poi() { //poi하나 생성 var Poi = Class.create({ //parent는 PoiMan, container는 gPoiLayer[gid] initialize: function(parent, container, parentLayer, gid, pid, iconPath, text, coord, positiontype, imgw, imgh, hinttitle, hintbody, showtextSlevel, showtextElevel) { //initialize: function(parent, parentLayer) { this.parent = parent; this.parentLayer = parentLayer; this.baseLayer = WSpec.getBaseLayer(0, 'POI_' + gid + "-" + pid); //new Element('DIV'); //여기에 poi전체들 붙어야해 //this.baseLayer.style.border = '1px solid red'; this.baseLayer.hide(); //this.container.appendChild(this.PoiLay); //부모에 자식 poi를 붙이는것(함수로 할지도) /* this.container = container; this.gid = gid; this.pid = pid; this.iconPath = iconPath; this.coord = new WCoord(); this.coord = coord; this.positiontype = parseInt(positiontype); this.imgw = imgw; this.imgh = imgh; this.hinttitle = hinttitle; this.hintbody = hintbody; this.showtextSlevel = showtextSlevel; this.showtextElevel = showtextElevel; this.imgLayer = this.makeImage(); //this.setImageSrc(this.iconPath); */ //this.imgLayer = this.makeImage(); this.imgLayer = this.makeImageLayer(); //this.setValue(container, gid, pid, iconPath, text, coord, positiontype, imgw, imgh,hinttitle, hintbody,showtextSlevel, showtextElevel); this.baseLayer.appendChild(this.imgLayer); //text생성 if (text.length > 0) { this.text = this.makeTextLayer(text); this.baseLayer.appendChild(this.text); this.setText(text); this.hideTextLayer(); } this.setInnerEvent(); this.setValue(container, gid, pid, iconPath, text, coord, positiontype, imgw, imgh, hinttitle, hintbody, showtextSlevel, showtextElevel); //this.container.appendChild(this.baseLayer); //alert('this.container.childNodes.length = ' + this.container.childNodes.length); }, setValue: function(container, gid, pid, iconPath, text, coord, positiontype, imgw, imgh, hinttitle, hintbody, showtextSlevel, showtextElevel) { //Poi(this, this.gPoiLayer[gid], this.PoiLayer, gid, pid, icon, text, coord, positiontype, imgw, imgh, hinttitle, hintbody,showtextSlevel, showtextElevel); //alert(container1) this.container = container; this.gid = gid; this.pid = pid; this.iconPath = iconPath; this.coord = new WCoord(); this.coord = coord; this.positiontype = parseInt(positiontype); this.imgw = imgw; this.imgh = imgh; this.hinttitle = hinttitle; this.hintbody = hintbody; this.showtextSlevel = showtextSlevel; this.showtextElevel = showtextElevel; this.setPosLayer(); //layer위치정리 (요거 쫌다 함수들좀 정리하자..!!) this.setPosTextLayer(text); //textlayer위치 정리 //this.imgLayer = this.makeImage(); this.setImageSrc(this.iconPath); this.setText(text); //this.baseLayer.appendChild(this.imgLayer); if (this.container != null) { this.container.appendChild(this.baseLayer); } }, setInnerEvent: function() { //this.baseLayer.observe('mouseover', this.mouseover.bindAsEventListener(this)); //this.baseLayer.observe('mousemove', this.mouse.bindAsEventListener(this)); //this.baseLayer.observe('mouseout', this.mouseout.bindAsEventListener(this)); // this.baseLayer.observe('mouseover', this.mouseover.bindAsEventListener(this)); // this.baseLayer.observe('mousemove', this.mousemove.bindAsEventListener(this)); // this.baseLayer.observe('mouseout', this.mouseout.bindAsEventListener(this)); // this.baseLayer.observe('click', this.click.bindAsEventListener(this)); this.imgLayer.observe('mouseover', this.mouseover.bindAsEventListener(this)); this.imgLayer.observe('mousemove', this.mousemove.bindAsEventListener(this)); this.imgLayer.observe('mouseout', this.mouseout.bindAsEventListener(this)); this.imgLayer.observe('click', this.click.bindAsEventListener(this)); }, mouseover: function(event) { EventMan.trigger(this, 'poimouseover', { "gid": this.gid, "pid": this.pid, "layer": this.imgLayer }); //this.parent.hintboxShow(this.gid, this.pid); }, mousemove: function(event) { //Event.stop(event); var point = WSpec.getOffsetPoint(event, this.parentLayer); //this.baseLayer EventMan.trigger(this, 'poimousemove', { "gid": this.gid, "pid": this.pid, "point": point }); //this.parent.resetPosHintBox(this.gid, this.pid, point); }, mouseout: function(event) { EventMan.trigger(this, 'poimouseout', { "gid": this.gid, "pid": this.pid, "layer": this.imgLayer }); //this.parent.hintboxHide(this.gid, this.pid); }, click: function(event) { Event.stop(event); EventMan.trigger(this, 'poiclick', { "gid": this.gid, "pid": this.pid }); }, makeImageLayer: function() { var imgLayer = new Element('div'); //var image = new Element('img'); //'img'를 'div'로 변경 this.image = new Element('img'); this.image.id = 'POI_img'; this.image.style.position = 'absolute'; //image.style.width=this.imgw; //image.style.height=this.imgh; /* var w = this.imgw; var h = this.imgh; var x=0; var y=0; switch(this.positiontype) { case 0: x = 0; y =0; break; case 1: x = -(w/2); y =0; break; case 2: x = -w; y =0; break; case 3: x = 0; y =-(h/2); break; case 4: x = -(w/2); y =-(h/2); break; case 5: x = -w; y =-(h/2); break; case 6: x = 0; y =-h; break; case 7: x = -(w/2); y =-h; break; case 8: x = -w; y =-h; break; } image.style.left= 0; image.style.top = 0; imgLayer.style.position = 'absolute'; imgLayer.id = 'imgLayer'; imgLayer.style.left = x; imgLayer.style.top = y; imgLayer.style.width=this.imgw; imgLayer.style.height=this.imgh; */ this.topLayer = new Element('div'); this.topLayer.id = 'topLayer'; this.topLayer.style.position = 'absolute'; this.topLayer.style.left = 0; this.topLayer.style.top = 0; this.topLayer.style.zIndex = 100; /* topLayer.style.width = image.style.width; topLayer.style.height = image.style.height; */ imgLayer.image = this.image; imgLayer.appendChild(this.image); imgLayer.appendChild(this.topLayer); return imgLayer; }, setPosLayer: function() { /* var imgLayer = new Element('div'); var image = new Element('img'); //'img'를 'div'로 변경 image.id = 'POI_img'; image.style.position = 'absolute'; //image.style.border = '1px solid black'; */ this.image.style.width = this.imgw; //image 위치 this.image.style.height = this.imgh; var w = this.imgw; var h = this.imgh; var x = 0; var y = 0; switch (this.positiontype) { case 0: x = 0; y = 0; break; case 1: x = -(w / 2); y = 0; break; case 2: x = -w; y = 0; break; case 3: x = 0; y = -(h / 2); break; case 4: x = -(w / 2); y = -(h / 2); break; case 5: x = -w; y = -(h / 2); break; case 6: x = 0; y = -h; break; case 7: x = -(w / 2); y = -h; break; case 8: x = -w; y = -h; break; } this.image.style.left = 0; this.image.style.top = 0; // 요기 부터 (imgLayer의 width, height를 값이 결정됐을때 넣어줘야 함. (처음에는 그냥 레이어만 생성되어 있는 상태로 만들어야 함.) this.imgLayer.style.position = 'absolute'; //imgLayer의 위치 //this.imgLayer.id = 'imgLayer'; this.imgLayer.style.left = x; this.imgLayer.style.top = y; this.imgLayer.style.width = this.imgw; this.imgLayer.style.height = this.imgh; /* var topLayer = new Element('div'); topLayer.id = 'topLayer'; topLayer.style.position = 'absolute'; topLayer.style.left = 0; topLayer.style.top = 0; topLayer.style.zIndex = 100; */ this.topLayer.style.width = this.image.style.width; //topLayer의 위치 this.topLayer.style.height = this.image.style.height; /* imgLayer.image = image; imgLayer.appendChild(image); imgLayer.appendChild(topLayer); return imgLayer; */ }, setPosTextLayer: function(text) { var textsize = text.length * 2 * WSpec.textw; this.text.style.width = textsize; //textLayer의 위치 var w = textsize; var h = this.imgh; var g = 3; var x = 0; var y = 0; switch (this.positiontype) { case 0: x = -(w / 2) + (this.imgw / 2); y = h + g; break; case 1: x = -(w / 2); y = h + g; break; case 2: x = -(w / 2) - (this.imgw / 2); y = h + g; break; case 3: x = -(w / 2) + (this.imgw / 2); y = h / 2 + g; break; case 4: x = -(w / 2); y = h / 2 + g; break; case 5: x = -(w / 2) - (this.imgw / 2); y = h / 2 + g; break; case 6: x = -(w / 2) + (this.imgw / 2); y = g; break; case 7: x = -(w / 2); y = g; break; case 8: x = -(w / 2) - (this.imgw / 2); y = g; break; } this.text.style.left = x; this.text.style.top = y; }, /* makeImage: function() { var image = new Element('div'); //'img'를 'div'로 변경 image.id = 'POI_img'; image.style.position = 'absolute'; //image.style.border = '1px solid black'; image.style.width=this.imgw; image.style.height=this.imgh; this.baseLayer.appendChild(image); var w = this.imgw; var h = this.imgh; var x=0; var y=0; switch(this.positiontype) { case 0: x = 0; y =0; break; case 1: x = -(w/2); y =0; break; case 2: x = -w; y =0; break; case 3: x = 0; y =-(h/2); break; case 4: x = -(w/2); y =-(h/2); break; case 5: x = -w; y =-(h/2); break; case 6: x = 0; y =-h; break; case 7: x = -(w/2); y =-h; break; case 8: x = -w; y =-h; break; } image.style.left= x; image.style.top = y; return image; },*/ setImageSrc: function(src) { //이미지(아이콘) 경로 지정 this.imgLayer.image.src = src; //this.image.style.background = 'url('+src+')'; }, makeTextLayer: function(text) { var textsize = text.length * 2 * WSpec.textw; var layer = new Element('div'); layer.id = 'POI_txt'; layer.style.position = "relative"; //layer.style.border = "3px solid black"; /* layer.style.width = textsize; var w = textsize; var h = this.imgh; var g = 3; var x=0; var y=0; switch(this.positiontype) { case 0: x = -(w/2) + (this.imgw/2); y = h + g; break; case 1: x = -(w/2); y = h + g; break; case 2: x = -(w/2) - (this.imgw/2); y = h + g; break; case 3: x = -(w/2) + (this.imgw/2); y = h/2 + g; break; case 4: x = -(w/2); y = h/2 + g; break; case 5: x = -(w/2) - (this.imgw/2); y = h/2 + g; break; case 6: x = -(w/2) + (this.imgw/2); y = g; break; case 7: x = -(w/2); y = g; break; case 8: x = -(w/2) - (this.imgw/2); y = g; break; } layer.style.left = x; layer.style.top = y; */ return layer; }, showTextLayer: function() { this.text.show(); }, hideTextLayer: function() { this.text.hide(); }, setText: function(text) { this.text.innerHTML = '
' + text + '
'; }, setPos: function(level) { // POI 자신의 위치 지정 var point = WSpec.coordToPixel(this.coord, level); //alert("poi :: " + level +"," + point.x +"," + point.y ); this.baseLayer.style.left = point.x; //this.baseLayer.style.top = WSpec.stripPx(this.container.style.height)-point.y; //this.baseLayer.style.top = WSpec.stripPx(this.parentLayer.style.height)-point.y; this.baseLayer.style.top = -point.y; }, getPos: function() { //poi의 위치 (positiontype 고려한 최종위치) var point = new WPoint(); point.x = WSpec.stripPx(this.baseLayer.style.left); // + WSpec.stripPx(this.image.style.left); point.y = WSpec.stripPx(this.baseLayer.style.top); // + WSpec.stripPx(this.image.style.top); return point; }, remove: function() { if (this.baseLayer.descendantOf(this.container)) { /* alert("poi 지워짐"); alert(this.container.childNodes.length + "," + this.baseLayer.childNodes.length); this.imgLayer.stopObserving('mouseover', this.mouseover.bindAsEventListener(this)); this.imgLayer.stopObserving('mousemove', this.mousemove.bindAsEventListener(this)); this.imgLayer.stopObserving('mouseout', this.mouseout.bindAsEventListener(this)); this.imgLayer.stopObserving('click', this.click.bindAsEventListener(this)); this.baseLayer.removeChild(this.imgLayer);*/ this.container.removeChild(this.baseLayer); /* alert(this.container.childNodes.length + "," + this.baseLayer.childNodes.length); this.imgLayer = null; this.imgLayer = this.makeImageLayer(); this.baseLayer.appendChild(this.imgLayer); this.imgLayer.observe('mouseover', this.mouseover.bindAsEventListener(this)); this.imgLayer.observe('mousemove', this.mousemove.bindAsEventListener(this)); this.imgLayer.observe('mouseout', this.mouseout.bindAsEventListener(this)); this.imgLayer.observe('click', this.click.bindAsEventListener(this)); */ } else { //alert('removeChild된 gid, pid입니다.'); } }, resetData: function() { //이거 안해주면 클릭 두번 받음.. 뭐야 이거...--; }, show: function() { this.baseLayer.show(); }, hide: function() { this.baseLayer.hide(); } }); window.Poi = Poi; }; _Poi();