menuFlag = true; sw = $(window).width(); sh = $(window).height(); /************************ @ ready ************************/ $(document).ready(function() { sw = $(window).width(); sh = $(window).height(); set_ui(); gnb(); selectFooter(); selectTmenu(); //팝업 닫기 버튼 이벤트 등록(공통) $('p.pop_bg,p.pop_top .btn_close').click(function(){ pop_view($('#pop_view'),1); }); if($('#wrap').hasClass('sub')){ SubVisual = new subVisual(); } if($('#wrap').hasClass('main')){ mainInit(); } quickResize(); });//end ready /************************ @ resize Event ************************/ $(window).resize(function(){ sw = $(window).width(); sh = $(window).height(); if($('#wrap').hasClass('main')){ quickResize(); } });//end resize //메인 퀵 리사이즈 function quickResize(){ if(sw < 1227){ $('#quick').css('left',613); }else{ $('#quick').css('left','50%'); } } /************************ @ scroll Event ************************/ $(window).scroll(function() { offy = $(window).scrollTop(); if($('#wrap').hasClass('sub')){ scrollSubPage(offy) }; });//end scroll //팝업 보이기 & 닫기(_flag = 0, _flag = 1) function pop_view(_target,_flag){ if(_flag == 1){ _target.stop().fadeOut(500); }else{ _target.stop().fadeIn(500); } } /************************ @ 서브페이지 메뉴 변경 ************************/ function scrollSubPage(top){ /* / @ 스크롤변경중 무의미한 값에서의 움직임을 없애고자 flag값으로 직접삽입 */ var vx01, //서브비주얼 값 vx02, //컨테이너 값 vx03; //히스토리영역 값 if(top == 0){ //스크롤 좌표값이 0이면 서브비주얼 오픈 vx01 = 242; vx02 = 399; vx03 = 330; menuFlag = true; //SubVisual.play(); scrollSubPageMove(vx01,vx02,vx03); }else{ if(menuFlag){ //스크롤 좌표값이 0이면 서브비주얼 숨김 vx01 = 40; vx02 = 197; vx03 = 130; scrollSubPageMove(vx01,vx02,vx03); //SubVisual.stop(); menuFlag = false; } } } //스크롤 시 서브 페이지 비주얼 영역 보이기 & 감추기 function scrollSubPageMove(dx1,dx2,dx3){ var target_1 = $('.sub_visual_wrap'); var target_2 = $('#container'); var target_3 = $('.tnb_wrap'); target_1.stop().animate({'height':dx1},900,'easeOutExpo'); target_2.stop().animate({'padding-top':dx2},900,'easeOutExpo'); target_3.stop().animate({'top':dx3},900,'easeOutExpo'); } /************************ @ 상단메뉴 ************************/ function gnb(){ Gtarget = $('.gnb_wrap'); G_h = $('.gnb_wrap').height(); //gnb 고유높이값 Gtarget.find('> ul > li a').bind('mouseenter focus click',function(){ snb_Flag(0); }); Gtarget.bind('mouseleave',function(){ snb_Flag(1); }); $('.otherMenu').find('a').focus(function(){ snb_Flag(1); }); Gtarget.find('> ul > li').bind('mouseenter mouseleave',function(event){ if(event.type=='mouseenter'){ if(!$(this).hasClass('current')){ $(this).addClass('current'); } }else{ if(!$(this).hasClass('actived')){ $(this).removeClass('current'); } } }); //메뉴 초기화 Gtarget.css({'height':40,'visibility':'visible'}); if($('body').hasClass('mobile')){ Gtarget.find('> ul > li > a').attr('href','javascript:;'); } } //서브메뉴 보이기 안보이기 function snb_Flag(n){ if(n==0){ //배경 $('p.snb_bg').stop().css('display','block').animate({'height':G_h-40},900,'easeOutExpo'); //snb Gtarget.stop().animate({'height':G_h},900,'easeOutExpo'); }else{ //배경 $('p.snb_bg').stop().animate({'height':0},900,'easeOutExpo',function(){$(this).css('display','none');}); //snb Gtarget.stop().animate({'height':40},900,'easeOutExpo'); } } /************************* @ 페이지 이동 ************************/ function movePage(dx){ //dx 이동값 //$('body,html').animate({scrollTop:dx},900,'easeOutExpo') $('body,html').scrollTop(dx); } /************************ @ 푸터 셀렉박스 ************************/ function selectFooter(){ var FToogle = false; var FT_dx = 0; var FT_speed = 900; var FT_ease = 'easeOutExpo'; var FT_arrow_xy = 'left top' FT_offy = $('#select_family').find('.select_list').height(); //셀렉터 리스트 고유값 Ftarget = $('#select_family'); //셀렉터 부모 FStarget = Ftarget.find('.select_list'); //셀렉터 리스트 FAtarget = Ftarget.find('.select_title'); //셀렉터 제목 Ftarget.find('.select_title').bind('click',function(){ FT_move.selectMove(); }); var FT_move = { selectMove:function(){ if(FToogle){ FT_dx = 0; FToogle = false; FT_arrow_xy = 'left top' }else{ FT_dx = FT_offy; FToogle = true; FT_arrow_xy = 'left bottom' } FAtarget.find('.arrow').css({'background-position':FT_arrow_xy}) FStarget.stop().css('display','block').animate({'height':FT_dx},FT_speed,FT_ease) }, selectInit:function(){ FStarget.css('height','0') } } Ftarget.bind('mouseleave',function(){ if(FToogle){FT_move.selectMove();}; }); FT_move.selectInit(); } /************************ @ 로케이션 메뉴 셀렉박스 ************************/ function selectTmenu(){ var MToogle = false; var MT_dx = 0; var MT_speed = 900; var MT_ease = 'easeOutExpo'; var MT_arrow_xy = 'left top' var MT_color = '#444444' MT_offy = $('#select_tnb').find('.select_list').height(); //셀렉터 리스트 고유값 MTarget = $('#select_tnb'); //셀렉터 부모 MStarget = MTarget.find('.select_list'); //셀렉터 리스트 MAtarget = MTarget.find('.select_title'); //셀렉터 제목 MTarget.find('.select_title').bind('click',function(){ MT_move.selectMove(); }); var MT_move = { selectMove:function(){ if(MToogle){ MT_dx = 0; MToogle = false; MT_arrow_xy = 'left top' MT_color = '#444444'; }else{ MT_dx = MT_offy; MToogle = true; MT_arrow_xy = 'left bottom' MT_color = '#a71a19'; } MAtarget.css('color',MT_color).find('.arrow').css({'background-position':MT_arrow_xy}) MStarget.stop().css('display','block').animate({'height':MT_dx},MT_speed,MT_ease) }, selectInit:function(){ MStarget.css('height','0') } } MTarget.bind('mouseleave',function(){ if(MToogle){MT_move.selectMove();}; }); MT_move.selectInit(); } /************************ @ 모바일 구분 ************************/ function set_ui(){ var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|iPad|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) { $('body').addClass('mobile'); $('#header_wrap').css('position','absolute'); if($('#wrap').hasClass('main')){ $('head').append( $('').attr('href', 'common/css/mobile.css') ); }else{ $('head').append( $('').attr('href', '../common/css/mobile.css') ); } $('head').append( $('').attr('href', 'common/css/mobile.css') ); //$('head').append(""); //offHeight = $('#container > div:eq('+(len-1)+')').height(); } setTimeout(function(){$('body,html').scrollTop(0);},30); //footer 페딩 체크 f_m = (sh-$('#wrap').height())*-1; if(f_m >=0 && f_m <= 212)$('#footer_wrap').css('padding-bottom',(222-f_m)); };//end set_ui /************************ @ 변수값 가져오기 ************************/ function getParameter(key) { var url = location.href; var spoint = url.indexOf("?"); var query = url.substring(spoint,url.length); var keys = new Array; var values = new Array; var nextStartPoint = 0; while(query.indexOf("&",(nextStartPoint+1) ) >-1 ){ var item = query.substring(nextStartPoint, query.indexOf("&",(nextStartPoint+1) ) ); var p = item.indexOf("="); keys[keys.length] = item.substring(1,p); values[values.length] = item.substring(p+1,item.length); nextStartPoint = query.indexOf("&", (nextStartPoint+1) ); } item = query.substring(nextStartPoint, query.length); p = item.indexOf("="); keys[keys.length] = item.substring(1,p); values[values.length] = item.substring(p+1,item.length); var value = ""; for(var i=0; i div').length; time = 5000; // 움직임 설정 var Action={ ease:'easeOutExpo', speed:900, autoTimer:function(){ prev = cur; cur = (cur >= len-1)?0:cur = cur+1; Sdirection = 1; //widthSlideMove(Starget,cur,prev,Swidth,Sdirection); Action._start(); }, _start:function(){ var _dx = (Sdirection == 0)?Swidth:Swidth*-1; //방향 //큰이미지 정렬 Starget.find('.slide_big > div').each(function(){ if($(this).index() == cur){ $(this).stop().css({'left':_dx*-1,'opacity':0}).animate({'left':0,'opacity':1},this.speed,this.ease); }else if($(this).index() == prev){ $(this).stop().animate({'left':_dx,'opacity':0},this.speed,this.ease); }else{ $(this).css({'left':_dx*-1,'opacity':0}) } }); //페이징 정렬 if(_page){ Starget.find('.pagenation01 > li').each(function(){ if($(this).index() == cur){ $(this).addClass('actived'); }else{ $(this).removeClass('actived'); } }); } }, _reset:function(_index){ prev = cur; cur = _index; Action._start(); } } this.setMove = function(_index){ Action._reset(_index); } //pagenation event handler if(_page){ Starget.append("") var i; for(i=0;i") } Starget.find('.pagenation01').each(function(){ if(Salign == 1){ $(this).css('margin-left',$(this).width()/2*-1); } }); Starget.find('.pagenation01 > li').click(function(){ prev = cur; cur = $(this).index(); Action._start(); }); } //timer event handler if(StimeFlag){ Starget.bind('mouseleave mouseenter',function(event){ if(event.type == 'mouseenter'){ clearInterval(Stimer); }else{ Stimer = setInterval(Action.autoTimer,time); } }); Stimer = setInterval(Action.autoTimer,time); } // arrow event handler Starget.find('> a').click(function(){ prev = cur; if($(this).index() == 1){ //left cur = (cur == 0)?len-1:cur=cur-1; Sdirection = 0; }else{ //right cur = (cur >= len-1)?0:cur = cur+1; Sdirection = 1; } Action._start(); }); Action._start() if($('body').hasClass('mobile')){ Starget.swipe(function(direction){ if(direction == "left"){ prev = cur; cur = (cur == 0)?len-1:cur=cur-1; Sdirection = 1; Action._start(); }else if(direction == "right"){ prev = cur; cur = (cur >= len-1)?0:cur = cur+1; Sdirection = 0; Action._start(); } //alert(direction); }, { preventDefault: false, mouse: true, pen: true, distance: 50 }); } } /************************ @ 가로 썸네일 슬라이드 ************************/ function thumbSlide(_t,_w,_n,_sw,_m){ var Thumb_speed = 900; var Thumb_ease = 'easeOutExpo' var target = _t //타겟 var w = _w //타겟 넓이 var n = _n //타겟 갯수 var dw = _sw //타겟 섬네일 넓이 var dm = _m //타겟 마진값 var Btarget = target.find('.list_item'); var Mtarget = Btarget.find('ul'); var tt,cur,len; cur = 0; len = Btarget.find('> ul > li').length; target.find('> a').click(function(){ if($(this).index() == 1){ //왼쪽버튼 cur = (cur < 1)?0:cur-1; }else{ //오른쪽버튼 if(len-n>0)cur = (cur >= (len-n))?len-n:cur+1; } SlideMove.start(cur); }); var SlideMove={ start:function(_cur){ var dx = (_cur*(dw+dm))*-1 if($('body').hasClass('mobile')){ Mtarget.stop().css({'left':dx}); }else{ Mtarget.stop().animate({'left':dx},Thumb_speed,Thumb_ease); } } } this.setNum = function(){ len = Btarget.find('> ul > li').length; } this.setMove = function(){ Mtarget.find('li').each(function(){ if($(this).hasClass('on')){ if(len-n>0)cur = ($(this).index() >= (len-n))?len-n:$(this).index(); SlideMove.start(cur); } }); } if($('body').hasClass('mobile')){ target.swipe(function(direction){ if(direction == "left"){ if(len-n>0)cur = (cur >= (len-n))?len-n:cur+1; SlideMove.start(cur); }else if(direction == "right"){ cur = (cur < 1)?0:cur-1; SlideMove.start(cur); } //alert(direction); }, { preventDefault: false, mouse: true, pen: true, distance: 10 }); } } /************************ @ 주소검색 팝업 ************************/ function pop_tab(_index){ $('.address_tab').find('> li:eq('+_index+')').addClass('actived').siblings().removeClass('actived'); $('.address_search').find('> div').each(function(){ if($(this).index() == _index){ $(this).stop().fadeTo(0, 0.01).delay(30).fadeTo(300, 1); }else{ $(this).stop().css('display','none'); } }); $('#naddr').val(_index); } /************************ @ 히스토리, 상단비주얼, 메뉴 정렬 ************************/ function menuAlign(_f,_s){ //셀렉트박스 var Ptarget = $('#select_tnb') // 셀렉트박스 부모객체 var Title = Ptarget.find('.select_list > ul').eq(_f).find('> li').eq(_s).text(); // 해당 텍스트 Ptarget.find('p.title').text(Title) // 타이틀 변경 Ptarget.find('.select_list > ul').each(function(){ if($(this).index() != _f){ $(this).css('display','none'); } }); //GNB활성 $('.gnb_wrap > ul > li:eq('+_f+')').addClass('actived'); // gnb 활성화 //히스토리 var history_first = ["셀렉토 소개","메뉴","창업안내","매장안내","이벤트","회사소개","사이트맵"] var history_second = []; history_second[0] = []; history_second[0][0] = "브랜드 이야기"; history_second[0][1] = "셀렉토의 아메리카노"; history_second[0][2] = "셀렉토 아카데미"; history_second[0][3] = "로스팅 하우스"; history_second[0][4] = "셀렉토 켐페인"; history_second[1] = []; history_second[1][0] = "New Menu"; history_second[1][1] = "Coffee"; history_second[1][2] = "Beverage"; history_second[1][3] = "Smoothie"; history_second[1][4] = "Bakery"; history_second[1][5] = "MD"; history_second[2] = []; history_second[2][0] = "창업비용"; history_second[2][1] = "창업지원시스템"; history_second[2][2] = "인테리어"; history_second[2][3] = "창업추천매장"; history_second[2][4] = "창업성공 스토리"; history_second[2][5] = "창업성공 포인트"; history_second[2][6] = "창업문의"; history_second[2][7] = "사업설명회"; history_second[3] = []; history_second[3][0] = "오픈예정점"; history_second[3][1] = "매장찾기"; history_second[4] = []; history_second[4][0] = "이벤트"; history_second[4][1] = "보도자료"; history_second[4][2] = "공지사항"; history_second[4][3] = "고객문의"; history_second[5] = []; history_second[5][0] = "본사소개"; history_second[5][1] = "인재채용"; history_second[5][2] = "오시는 길"; history_second[6] = []; history_second[6][0] = ""; $('li.h_t_01').text(history_first[_f]); $('li.h_t_02').text(history_second[_f][_s]); if(_f == 6)$('#select_tnb').css('display','none'); //서브비주얼 내용 var title02; switch(_f){ case 0: title02 = "셀렉토 스토리, 5가지 아메리카노의 비법과 커피 이야기를 만나보세요." break; case 1: title02 = "테마가 있는 신메뉴, 다양한 메뉴와 MD상품을 만나보세요." break; case 2: title02 = "셀렉토커피의 소중한 가치, 고객의 만족입니다." break; case 3: title02 = "셀렉토커피를 만날 수 있는 매장 안내입니다." break; case 4: title02 = "셀렉토커피에서 일어나는 새소식과 이벤트를 알려드립니다." break; case 5: title02 = "대한민국을 대표하는 프랜차이즈 전문기업 입니다." break; case 6: title02 = "셀렉토커피의 서비스를 한눈에 볼 수 있습니다." } $('.sub_visual').find('h2').text(history_first[_f]); $('.sub_visual').find('.sub_title').text(title02); } /************************ / @ 서브비주얼 loop *************************/ function subVisual(){ var s_timer; var s_cur = 0; var s_target = $('.visual_wrap'); var s_time = 3000; var s_len = s_target.find('> p').length; s_target.find('p').css('opacity',0); var Action={ speed:900, autoTimer:function(){ s_cur = (s_cur >= s_len-1)?0:s_cur = s_cur+1; Action._start(); }, _start:function(){ s_target.find('p').each(function(){ if($(this).index() == s_cur){ $(this).stop().animate({'opacity':1},this.speed) }else{ $(this).stop().animate({'opacity':0},this.speed) } }); } } this.play = function(){ s_timer = setInterval(Action.autoTimer,s_time); }; this.stop = function(){ clearInterval(s_timer); }; s_timer = setInterval(Action.autoTimer,s_time); Action._start(); } /************************ @ 오퍼시티 슬라이드 ************************/ function opaSlide(_t,_a,_page,_time){ var Starget = _t; //해당타겟 var Salign = _a; //페이징 정렬 var StimeFlag = _time; var Stimer,cur,prev,len,time,Sdirection; var Action; cur = 0; len = Starget.find('.slide_big > div').length; time = 5000; //pagenation event handler if(_page){ Starget.append("") var i; for(i=0;i") } Starget.find('.pagenation01').each(function(){ if(Salign == 1){ $(this).css('margin-left',$(this).width()/2*-1); } }); Starget.find('.pagenation01 > li').click(function(){ prev = cur; cur = $(this).index(); Action._start(); }); } // 움직임 설정 var Action={ ease:'easeOutExpo', speed:1200, autoTimer:function(){ prev = cur; cur = (cur >= len-1)?0:cur = cur+1; Action._start(); }, _start:function(){ //큰이미지 정렬 Starget.find('.slide_big > div').each(function(){ if($(this).index() == cur){ $(this).stop().fadeTo(0, 0.01).delay(30).fadeTo(300, 1); }else{ $(this).stop().css('display','none'); } }); //페이징 정렬 if(_page){ Starget.find('.pagenation01 > li').each(function(){ if($(this).index() == cur){ $(this).addClass('actived'); }else{ $(this).removeClass('actived'); } }); } }, _reset:function(_index){ cur = _index; Action._start(); } } if($('body').hasClass('mobile')){ Starget.swipe(function(direction){ if(direction == "left"){ prev = cur; cur = (cur == 0)?len-1:cur=cur-1; Action._start(); }else if(direction == "right"){ prev = cur; cur = (cur >= len-1)?0:cur = cur+1; Action._start(); } //alert(direction); }, { preventDefault: false, mouse: true, pen: true, distance: 50 }); } //timer event handler if(StimeFlag){ Starget.bind('mouseleave mouseenter',function(event){ if(event.type == 'mouseenter'){ clearInterval(Stimer); }else{ Stimer = setInterval(Action.autoTimer,time); } }); Stimer = setInterval(Action.autoTimer,time); } Action._start() } /************************ @ 매장 맵 ************************/ function searchMap(){ var mapName01, mapName02; //시 클릭 $('#s_map .city02').find('a').click(function(){ switch($(this).index()){ case 0:mapName01="서울";break; case 1:mapName01="인천";break; case 2:mapName01="대전";break; case 3:mapName01="대구";break; case 4:mapName01="울산";break; case 5:mapName01="부산";break; } //alert(mapName01); //시 정렬 searchMapCity01Align($(this).index()); }); //도 클릭 /* $('#s_map .city01').find('a').click(function(){ switch($(this).index()){ case 0:mapName02="경기도";break; case 1:mapName02="강원도";break; case 2:mapName02="충청남도";break; case 3:mapName02="충청북도";break; case 4:mapName02="전라북도";break; case 5:mapName02="전라남도";break; case 6:mapName02="경상북도";break; case 7:mapName02="경상남도";break; case 8:mapName02="제주도";break; case 9:mapName02="울릉도";break; } alert(mapName02); searchMapCity01Align(-1); }); */ } //매장 정렬 function searchMapCity01Align(_index){ $('#s_map .city02').find('a').click(function(){ $(this).addClass('actived').siblings().removeClass('actived'); }); $('#s_map .city02').find('a').each(function(){ if($(this).index() == _index)$(this).addClass('actived'); else $(this).removeClass('actived'); }); } var map01 = -1; var map02 = -1; /************************ @ 매장 마우스 오버 ************************/ function mapOver(){ var mIndex = 0; $('#s_map .city02').find('a').mouseover(function(){ mIndex = $(this).index(); mapAlign(mIndex); }); $('#s_map .city02').find('a').mouseout(function(){ mapAlign(map01); }); $('#s_map .city01').find('a').mouseover(function(){ mIndex = ($(this).index() == 9)?13:$(this).index()+7; mapAlign(mIndex); }); $('#s_map .city01').find('a').mouseout(function(){ mapAlign(map01); }); $('#s_map').mouseleave(function(){ //mapAlign(map01); }); } //매장 마우스 오버시 정렬 function mapAlign(_index){ var mtarget = $('.store_search_map'); var _src = (_index == -1)?"store_list_map_bg":"store_list_map_bg"+_index; mtarget.find('.map_img').attr('src',"../images/store/"+_src+".gif"); } //매장 마우스 오버시 정렬2 function mapSalign(_index){ $('#s_map .city01').find('a').each(function(){ if(!$(this).hasClass('actived')){ } }); } /************************ @ 매장 오버 디폴트 ************************/ function mapDefault(){ $('#s_map .city01').find('a').each(function(){ if($(this).hasClass('on')){ mIndex = ($(this).index() == 9)?13:$(this).index()+7; mapAlign(mIndex); $(this).addClass('actived'); map01 = mIndex; } }); $('#s_map .city02').find('a').each(function(){ if($(this).hasClass('on')){ mIndex = $(this).index(); mapAlign(mIndex); $(this).addClass('actived'); map01 = mIndex; } }); } set_ui();