/* ImageBox.js v 1.8
* author : yeongun@ncsoft.net
* last update: 2009.2.25
* (c) 2008 ncsoft UIDevelopment Team */
var sturl='http://static.fr.aiononline.com/aion/common/popview/';
var $i={hnd:'#imagebox_area #imagebox_handle ',tmb:'#imagebox_area .utils_thumb ',dot:'#imagebox_area .utils_dot ',rel:'#imagebox_area .imagebox_rel ',gb:'#imagebox_ghost_box .preview_bg ',bf:'_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''};
var IBCss='';
var ImageBoxHtml='';
document.write(IBCss);
document.write(ImageBoxHtml);
try {if (navigator.userAgent.toUpperCase().indexOf('MSIE')>=0) doument.execCommand("BackgroundImageCache", false, true);} catch(ignored) {}
Object.extend(Event, {
wheel:function (event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) delta = -event.detail/3;
return Math.round(delta);
}
});
var IBUTLS={
close:function() {
$('imagebox_area').setStyle({top:'-10000px'});
$('imagebox').update('');
$A($('imagebox_prev','imagebox_next','imagebox_tip','imagebox_ghost_box','imagebox_prev','imagebox_next')).each(Element.hide);
if ($('imagebox_modal')) $('imagebox_modal').hide();
Event.stopObserving(document,'keyup');
$('imagebox_status','imagebox','imagebox_prev','imagebox_next','imagebox_natural','imagebox_window').each(function(o) {Event.stopObserving(o);});
IBUTLS.viewAvailable=false;
},
mouseWheelControl:function(e) {
Event.stop(e);
var diff=IBUTLS.crtImg.getHeight()-$('imagebox').getHeight();
var top=parseInt(IBUTLS.crtImg.getStyle('top'));
var move=parseInt(top+(Event.wheel(e)*($('imagebox').getHeight()/2)));
move=(move<=0&&move>=-diff) ? move:(move>0) ? 0:(move<=-diff) ? -diff:false;
if (move===false) return;
IBUTLS.crtImg.setStyle({top: move + 'px'});
IBUTLS.imageToGhost([0,move]);
},
ghostToggle:function() {
var ghost=$('imagebox_ghost_box');
var changedStyle,boxtog;
if (ghost.visible()) changedStyle={width:'26px',height:'26px'};
else changedStyle={width:'140px',height:'155px'};
IBUTLS.effects[0]=new Effect.Morph(ghost,{duration:0.4,style:changedStyle,beforeStart:function() {
IBUTLS.ghost.hidden=false;
$('imagebox_ghost_tog').hide();
$('imagebox_ghost_box').setStyle({display:'block'});
},afterFinish:function() {
if (ghost.getWidth()<=26) {
$('imagebox_ghost_box').hide();
$('imagebox_ghost_tog').setStyle({display:'block'});
IBUTLS.ghost.hidden=true;
}
}});
},
imageToGhost:function(delta) {
var ghostBoxSetup=IBUTLS.ghost.setup;
var ghostSetup = [Math.ceil(-(delta[0]/IBUTLS.ghost.mag)+ghostBoxSetup.left),Math.ceil(-(delta[1]/IBUTLS.ghost.mag)+ghostBoxSetup.top)];
$('imagebox_ghost').setStyle({top:ghostSetup[1]+'px',left:ghostSetup[0]+'px'});
IBUTLS.ghostInside(ghostSetup);
},
ghostInside:function(delta) {
$('imagebox_ghost').select('img')[0].setStyle({top:(-(delta[1]-IBUTLS.ghost.setup.top))+'px',left:(-(delta[0]-IBUTLS.ghost.setup.left))+'px'});
},
setMSz:function(size) {return (size<1) ? 1 : parseInt(size);},
wdSz:function() {return [document.viewport.getWidth(),document.viewport.getHeight()];},
wdMx:function() {return [document.viewport.getWidth()-200,document.viewport.getHeight()-120];},
mSz:[490,315],frSz:[16,44],crtSz:[0,0],crtImg:0,
toggleTip:function() {
if ($('imagebox_tip').getStyle('display')!='none') $('imagebox_tip').hide();
else $('imagebox_tip').setStyle({display:'block'});
},
imgOver:function(o) {o.src=o.src.replace('.gif','_on.gif');},
imgOut:function(o) {o.src=o.src.replace('_on.gif','.gif');},
isIE6:(navigator.userAgent.indexOf('MSIE 6')>=0),
isIE7:(navigator.userAgent.indexOf('MSIE 7')>=0),
ghost:{mag:0,size:[124,124],setup:{},hidden:false},
window:0,effects:[],viewAvailable:false,magFlag:false,isDrag:false
};
var IMAGEBOX=Class.create({
initialize:function(field,option) {
if (!$('imagebox_area')) {
}
popView=function() {};
$('imagebox_ghost_close').observe('click',IBUTLS.ghostToggle);
$('imagebox_tutorial','imagebox_tip').each(function(o){Event.observe(o,'click',IBUTLS.toggleTip);});
$('lowest_layer').setOpacity(0.2);
$('second_layer').setOpacity(0.8);
$('third_layer').setOpacity(0.6);
var _field=(Object.isString(field)) ? $(field) : field;
if (!_field) return;
var _option={
selector:'img',
viewControl:true,
defaultView:'natural',
maxSize:'win',
displayText:false,
thumb:false,
modal:false,
modules:[],
topPos:35
};
var _deliv=this;
var _isInData=Object.isElement(_field);
this.field=_field;
this.current=0;
this.option=Object.extend(_option,option||{});
this.originMax=(option&&Object.isArray(option.maxSize)) ? option.maxSize : 'win';
this.option.selector=(navigator.userAgent.toLowerCase().indexOf('msie 8')!=-1) ? 'img' : this.option.selector;
if (this.option.modal&&!$('imagebox_modal')) {
Insertion.After($('imagebox_area'),'');
var modal=$('imagebox_modal');
var modalHeight=(IBUTLS.wdSz()[1] > $$('body')[0].getHeight()) ? IBUTLS.wdSz()[1]:$$('body')[0].getHeight();
modal.setStyle({
backgroundColor:this.option.modal[0],
opacity:this.option.modal[1],
top:0,left:0,position:'absolute',display:'none',height:modalHeight+'px'
});
if (IBUTLS.isIE6) modal.setStyle({width:IBUTLS.wdSz()[0]+'px'});
Event.observe(modal,'click',IBUTLS.close);
}
if (IBUTLS.window===0) IBUTLS.window=new Draggable('imagebox_area',{handle:'imagebox_handle',starteffect:false,endeffect:false});
this.datas=(_isInData) ? _field.getElementsBySelector(this.option.selector):_field.getElementsByTagName(this.option.selector);
//if (this.datas.length==0) return;
this.plural=(this.datas.length>1) ? this.datas.length : 0;
if (this.option.defaultView==='natural') this.option.maxSize='win';
if (IBUTLS.isIE6&&!IBUTLS.isIE7) $('imagebox_handle').select('div.rd_left')[0].setStyle({left:'-7px'});
if (this.option.viewControl===false) $A($('imagebox_natural','imagebox_window')).each(Element.hide);
if (_isInData) Event.observe(this.field,'click',function(e) {_deliv.open(e);});
Event.observe(document,'mousemove',function(e) {_deliv.prevnext(e);});
Event.observe($('imagebox_natural_sp'),'click',function(e) {_deliv.changeView(e);});
Event.observe($('imagebox_area'),'mousedown',function(e) {
if (!Event.element(e).descendantOf($('imagebox'))) IBUTLS.isDrag=true;
});
Event.observe($('imagebox_area'),'mouseup',function(e) {
$('imagebox_ready').update('refresh');
if (Event.element(e).descendantOf($('imagebox'))&&!IBUTLS.isDrag) IBUTLS.close();
else IBUTLS.isDrag=false;
});
},
prevnext:function(e) {
var element=Event.element(e);
var point=[Event.pointerX(e),Event.pointerY(e)];
var area=[];
var status;
if (Object.isElement(element)) {
if (element.descendantOf('imagebox_rel')&&this.plural!=0) {
var relPos=$('imagebox_area').positionedOffset();
area[0]=point[0]-relPos[0];
area[1]=point[1]-relPos[1];
if (area[1]>=IBUTLS.crtSz[1]/2&&area[1]<=(IBUTLS.crtSz[1]/2)+120) {
if (area[0]>=0&&area[0]<=60||area[0]>=IBUTLS.crtSz[0]-60&&area[0]<=IBUTLS.crtSz[0]) {
if (this.current===0) $('imagebox_prev').hide();
else $('imagebox_prev').setStyle({display: 'block'});
if (this.current===this.datas.length-1) $('imagebox_next').hide();
else $('imagebox_next').setStyle({display:'block'});
status=true;
}
}
var ghostStatus=(this.option.defaultView=='natural'&&area[0]>IBUTLS.crtSz[0]-20&&area[0]IBUTLS.crtSz[1]-20&&area[1]maxSize[0]||opts.oSz.height>maxSize[1];
mag=(opts.oSz.width/maxSize[0] > opts.oSz.height/maxSize[1]) ? opts.oSz.width/maxSize[0] : opts.oSz.height/maxSize[1];
opts.dSz.width=magFlag ? parseInt(opts.oSz.width/mag) : opts.oSz.width;
opts.dSz.height=magFlag ? parseInt(opts.oSz.height/mag) : opts.oSz.height;
cpImg.setStyle({width: opts.dSz.width + 'px',height: opts.dSz.height + 'px'});
IBUTLS.magFlag=(magFlag) ? true : false;
}
else {
opts.dSz.width=parseInt((opts.oSz.width>maxSize[0]) ? maxSize[0] : opts.oSz.width);
opts.dSz.height=parseInt((opts.oSz.height>maxSize[1]) ? maxSize[1] : opts.oSz.height);
}
opts.dSz.width=(opts.dSz.widthmaxSize[0]||opts.oSz.height>maxSize[1]) {
IBUTLS.ghost.mag = (opts.oSz.width / IBUTLS.ghost.size[0] > opts.oSz.height / IBUTLS.ghost.size[1]) ? opts.oSz.width / IBUTLS.ghost.size[0] : opts.oSz.height / IBUTLS.ghost.size[1];
if ($('imagebox_ghost')) $('imagebox_ghost').remove();
var GSz={width:IBUTLS.setMSz((opts.oSz.width/IBUTLS.ghost.mag)),height:IBUTLS.setMSz(opts.oSz.height/IBUTLS.ghost.mag)};
var GHt=[opts.dSz.width>opts.oSz.width ? opts.oSz.width : opts.dSz.width,opts.dSz.height>opts.oSz.height ? opts.oSz.height : opts.dSz.height];
var GHSz={width:IBUTLS.setMSz(GHt[0]/IBUTLS.ghost.mag-4),height:IBUTLS.setMSz(GHt[1]/IBUTLS.ghost.mag-4)};
var GH=new Element('div',{id:'imagebox_ghost',className:'imagebox_ghost'});
var GBset={top:parseInt((IBUTLS.ghost.size[1]/2)-(GSz.height/2)+22),left:parseInt((IBUTLS.ghost.size[0]/2)-(GSz.width/2)+8)};
GBset.image='+')
';
IBUTLS.ghost.setup=GBset;
Insertion.After($('imagebox_ghost_wrap'),GH);
$('imagebox_ghost_wrap').update(GBset.image).setStyle({width:GSz.width+'px',top:GBset.top+'px',left:GBset.left+'px'});
$('imagebox_ghost').update(GBset.image).setStyle({width:GHSz.width+'px',height:GHSz.height+'px',top:GBset.top+'px',left:GBset.left+'px'});
$('imagebox_ghost').insert('
');
$('third_layer').setStyle({width:GSz.width+'px',height:GSz.height+'px',top:GBset.top+'px',left:GBset.left+'px'});
new Draggable(GH,{starteffect:false,endeffect:false,zindex:1009,
onDrag:function(obj) {
var delta=obj.currentDelta();
var xmove=opts.oSz.width-opts.dSz.width;
var ymove=opts.oSz.height-opts.dSz.height;
IBUTLS.ghostInside(delta);
var setup={top:Math.ceil(-(delta[1]*IBUTLS.ghost.mag)+(GBset.top*IBUTLS.ghost.mag)),left:Math.ceil(-(delta[0]*IBUTLS.ghost.mag)+(GBset.left*IBUTLS.ghost.mag))};
setup.top=(setup.top<-ymove)?-ymove:setup.top;
setup.left=(setup.left<-xmove)?-xmove:setup.left;
setup.top=(setup.top>0)?0:setup.top;
setup.left=(setup.left>0)?0:setup.left;
cpImg.setStyle({top:setup.top+'px',left:setup.left+'px'});
},
snap:function(x, y, draggable) {
var xmove=GSz.width-(GHSz.width+4);
var ymove=GSz.height-(GHSz.height+4);
return [(xmove<0)?GBset.left:(x>=GBset.left&&x<=GBset.left+xmove)?x:(x=GBset.top&&y<=ymove+GBset.top)?y:(y-xmove)?x:(x>0)?0:-xmove,(ymove<0)?0:(y<=0&&y>-ymove)?y:(y>=0)?0:-ymove];
}});
Event.observe($('imagebox'),"mousewheel",IBUTLS.mouseWheelControl);
Event.observe($('imagebox'),"DOMMouseScroll",IBUTLS.mouseWheelControl);
}
}
for (var i=0;i<_deliv.plural;i++) {if (element===_deliv.datas[i]) {_deliv.current=i;break;}}
IBUTLS.crtSz=[opts.dSz.width,opts.dSz.height];
_deliv.draw(cpImg,opts);
});
IBUTLS.crtImg=cpImg;
if (!IBUTLS.viewAvailable) {
Event.observe(document, 'keyup', function(e){_deliv.keyControl(e);});
Event.observe($('imagebox_status'),'click',function(e) {_deliv.navigation(e);});
$('imagebox_prev','imagebox_next').each(function(o) {
Event.observe(o,'click',function(e) {_deliv.navigation(e);});
});
$('imagebox_natural','imagebox_window').each(function(o) {
if (o.getAttribute('id').split('_')[1]==_deliv.option.defaultView) o.hide();
Event.observe(o,'click',function(e) {_deliv.changeView(e);});
});
}
},
draw:function(image,opts) {
var _deliv=this;
if (_deliv.plural) {
var statusList=[];
var status,content,start,end,ev;
start=0,end=_deliv.plural;
if (_deliv.plural>5) {
start=Math.floor(_deliv.current/5)*5;
end=start+5;
}
for (i=start;i';
else content='';
statusList.push(''+content+'');
}
else statusList.push('');
}
status=(_deliv.option.thumb) ? ((statusList.length-2)*45)+42:((statusList.length-2)*17)+42;
$('imagebox_status').setStyle({width:status+'px'}).update(statusList.join(''));
}
if (IBUTLS.viewAvailable===false) $('short_tip').setStyle({left:((opts.dSz.width/2)-108)+'px',top:((opts.dSz.height/2)-22)+'px',display:'block'});
opts.wSz.width=opts.dSz.width+IBUTLS.frSz[0];
opts.wSz.height=opts.dSz.height+IBUTLS.frSz[1];
opts.wPs[0]=parseInt((IBUTLS.wdSz()[0]/2)-(opts.wSz.width/2));
opts.wPs[1]=parseInt($('imagebox_area').getStyle('top'))>0 ? parseInt($('imagebox_area').getStyle('top')) : document.viewport.getScrollOffsets().top + _deliv.option.topPos;
$('imagebox').setStyle({width:opts.dSz.width+'px',height:opts.dSz.height+'px'});
$('imagebox_area').setStyle({top:((opts.wPs[1]<0) ?0:opts.wPs[1])+'px'});
IBUTLS.effects[0]=new Effect.Morph($('imagebox_rel'),{
duration:0.2,
style: {width: (opts.dSz.width+2)+'px',height:(opts.dSz.height+2)+'px'}
});
IBUTLS.effects[1]=new Effect.Morph($('imagebox_area'), {
style: {width:opts.wSz.width+'px',height:opts.wSz.height+'px',left:((opts.wPs[0]<0) ? 0 : opts.wPs[0]) + 'px'},
duration: 0.2,
afterFinish:function() {
if (parseInt($('imagebox_area').getStyle('top'))>=0) {
$('imagebox').update(image);
$('imagebox').setStyle({display:'block'});
if (IBUTLS.viewAvailable===false) {
setTimeout(function() {$('short_tip').fade({duration:0.5});},500);
IBUTLS.viewAvailable=true;
}
}
}
});
}
});
