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();