$(document).ready(function(){
/* ¸ÞÀÎ ºñÁÖ¾ó ·Ñ¸µ */
mainResize()
$(window).resize(function(){
mainResize()
})
function bannerController( visualBox , ctlBox , rollStyle, rollSpeed){
$(".visual_rolling li.i02").css({ 'visibility' : 'visible' }).animate({'opacity':'0.0'},1);
$(".visual_rolling li.i03").css({ 'visibility' : 'visible' }).animate({'opacity':'0.0'},1);
$(".visual_rolling li.i04");
$(".visual_rolling li.i05").css({ 'visibility' : 'visible' }).animate({'opacity':'0.0'},1);
$(".visual_rolling li.i06").css({ 'visibility' : 'visible' }).animate({'opacity':'0.0'},1);

var that = {
$visual_box : $(visualBox),
$visual_boxLi : $(visualBox + ' li'),
bannerLength : 0,
$obj : 0,
objWidth : 0,
$btnPlay : $( ctlBox + ' a').eq(0),
$btnPrev : $( ctlBox + ' a').eq(1),
$btnNext : $( ctlBox + ' a').eq(2),
chkNumN : 0, 
chkNumO : 0, 
visualItv : null,
rollStyle : rollStyle,
rollSpeed : rollSpeed,
playVisualBox : function(){
if( this.visualItv == null){ 
this.$btnPlay.find('img')[0].src = this.$btnPlay.find('img')[0].src.replace("_play","_stop");
this.$btnPlay.find('img').attr('alt', 'À̹ÌÁö ·Ñ¸µÁ¤Áö');
this.visualItv = setInterval( function(){ that.slideNext(); }, rollSpeed); 
}else{
this.stopVisualBox();
}
},
stopVisualBox : function(){
clearInterval( this.visualItv );
this.visualItv = null;

this.$btnPlay.find('img')[0].src = this.$btnPlay.find('img')[0].src.replace("_stop","_play");
this.$btnPlay.find('img').attr('alt', 'À̹ÌÁö ÀÚµ¿·Ñ¸µ');
},
rollImg : function( direction ){ 
if( this.rollStyle == 'fade' ){
this.$obj[this.chkNumO].stop().animate({'opacity':0},1250);
this.$obj[this.chkNumN].stop().animate({'opacity':1},1250); 
}else if( this.rollStyle == 'slide' ){
if( direction == 'right'){ 
this.$obj[this.chkNumO].css('left', 0 ).stop().animate({'left':(-this.objWidth)},600);
this.$obj[this.chkNumN].css('left', this.objWidth ).stop().animate({'left':0},600);
}else{ 
this.$obj[this.chkNumO].css('left', 0 ).stop().animate({'left':this.objWidth},600);
this.$obj[this.chkNumN].css('left', -this.objWidth ).stop().animate({'left':0},600);
} 
} 
},
slideNext : function(){
this.chkNumO = this.chkNumN;
this.chkNumN = (this.chkNumN + this.bannerLength + 1) % this.bannerLength; 
this.rollImg('right');
},
slidePrev : function(){
this.chkNumO = this.chkNumN;
this.chkNumN = (this.chkNumN + this.bannerLength - 1) % this.bannerLength;
this.rollImg('left');
}
}
that.init = function(){

this.bannerLength = this.$visual_boxLi.length; 
this.$obj = new Array();

for(i=0; i<this.bannerLength; i++){
this.$obj[i] = this.$visual_boxLi.eq(i);
this.$obj[i].css('z-index', this.bannerLength - i);
} 
this.objWidth = this.$obj[0].width();
this.$btnPrev.click(function(e){
e.preventDefault(); 
that.stopVisualBox();
that.slidePrev();
});
this.$btnNext.click(function(e){
e.preventDefault(); 
that.stopVisualBox();
that.slideNext();
});
this.$btnPlay.click(function(e){
e.preventDefault(); 
that.playVisualBox();
}); 
} 
that.init(); 
return that;
} 
var slide1 = bannerController('.visual_rolling', '.play_box', 'fade', 5000);
slide1.playVisualBox();

});

function mainResize(){
if ($(window).width() > 960)
{
var pos_x = $(window).width()-960-($(window).width()/2)
}else{
var pos_x = -480
} 
$(".visual_rolling li").css("background-position-x",pos_x)
}