// JavaScript Document
function imgReplace(obj,flag){
var imgSrc = obj.attr("src");
if(flag == "on"){
imgSrc = imgSrc.replace("_off.","_on.");
} else if(flag == "off"){
imgSrc = imgSrc.replace("_on.","_off.");
}
obj.attr("src",imgSrc);
}
var $win = $(window),
$doc = $(document),
$html = $('html'),
$body = $('body');
var viewMode,
resizeTimer = null;
var Detect = {
isDesktop : function(){
var platform = "win16|win32|win64|mac", result = false;
if( navigator.platform ){
( platform.indexOf(navigator.platform.toLowerCase()) < 0 ) ? result = false : result = true ;
}
return result;
},
isTouch : function(){
var _isTouchDevice = 'ontouchstart' in document.documentElement;
return _isTouchDevice;
}
};

(function($){
var $header = $('#container'),
$ms = $('#mainVisual'),
$list = $ms.find('.list'),
nowIdx, _whole, _quarter,_half, _third,
_mobileUI = false,
speed = {
duration: 800,
queue: false,
easing: 'easeInOutExpo'
},
txtTimer = null;
var ms = {
init : function(speed){
if ($body.width()){
if (_mobileUI){
ms.bindEvent();
_mobileUI = false;
}
_whole = parseInt($header.outerWidth(),10),
_half = Math.ceil(_whole/2),
_quarter = Math.ceil(_whole/4),
_third = Math.ceil(_half/3);
$ms.css({width : _quarter*4+5 ,overflow : 'hidden'})
$list.stop().animate({width :_quarter },speed);
} else {
$ms.css('width','auto');
$list.css('width','100%');
$list.find('>a').off();
_mobileUI = true;
}
},

pcStart : function(){
if ($body.width()){

_whole = parseInt($header.outerWidth(),10),
_half = Math.ceil(_whole/2),
_quarter = Math.ceil(_whole/4),
_third = Math.ceil(_half/3);
$list.css('width',_quarter);
$ms.css({width : _quarter*4+5 ,overflow : 'hidden'})
$list.stop().animate({width :_quarter },{
duration: 1200,
queue: false,
easing: 'easeInOutExpo'
});
}
},
reset: function(speed) { 
ms.init(speed);
ms.txtHover(-1);
$list.removeClass('on').find('>a').addClass('close').find('.num img').USimgNameChg({'src':['_on','_off']});
},
action : function(idx){

var $target = $list.eq(idx);
$target.find('.num img').USimgNameChg({'src':['_off','_on']});
$target.siblings().find('.num img').USimgNameChg({'src':['_on','_off']});

$target.addClass('on').stop().animate({width : _half },speed);
$target.siblings().removeClass('on').stop().animate({width : _third },speed);

$list.find('>a').addClass('close');
$target.find('>a').removeClass('close');
nowIdx = idx;
},

txtHover : function(idx){
(idx == -1) ? target = 5 : target = idx;
$list.not(':eq('+target+')').find('.on').stop().fadeTo(400,0,function(){
$list.not(':eq('+target+')').find('.off').show().stop().fadeTo(1000,1); 
});
if (target < 4){
$list.eq(target).find('.off').stop().fadeTo(400,0,function(){
$(this).hide();
$list.eq(target).find('.on').css('display','block').stop().fadeTo(1000,1); 
});
}
},
resize : function(){
$win.resize(function(){
ms.reset(0);
});
},
bindEvent : function(){
if (!Detect.isTouch()){
$list.find('>a').on({
'click mouseenter focusin' : function(e){
if ($(this).hasClass('close')){
clearTimeout(txtTimer);
var $this = $(this);
var idName = $this.parent('div').attr('id');
var targetIdx = idName.charAt(idName.length -1);
txtTimer = setTimeout(function(){
ms.action(targetIdx,speed);
ms.txtHover(targetIdx);
},200)
e.preventDefault();
}
}
});
$ms.on({
'mouseleave' : function(){
ms.reset();
},
'focusin' : function(e){
e.stopPropagation();
}
});
$body.on('focusin', function(e) {
ms.reset();
e.stopPropagation();
//e.preventDefault();
});
} else {
$list.find('>a').on({
'click' : function(e){
if($body.width() > 640 && $(this).hasClass('close')) {
var idName = $(this).parent('div').attr('id');
var targetIdx = idName.charAt(idName.length -1);
ms.action(targetIdx,speed);
ms.txtHover(targetIdx);
e.preventDefault();
}
}
});
}
}
};
$(function(){
if(Detect.isDesktop()){
ms.init()
} else {
ms.init(); 
}
ms.resize();
ms.bindEvent();
})
}(jQuery));

$.fn.extend({
USimgNameChg : function(options){
$(this).each(function(){
var $this = $(this);
if (options.alt && options.alt.length == 2){
$this.attr('alt', $this.attr('alt').replace(options.alt[0], options.alt[1]));
}
if (options.src && options.src.length == 2){
$this.attr('src', $this.attr('src').replace(options.src[0], options.src[1]));
}
});
},
USfoldingBox : function(options){
var selectArray = $(this),
speed = {
duration: 500,
queue: false,
easing: 'easeInOutExpo'
},
defaults = {
devide : false, 
autoFocusEnter : false, 
_stateChange : '', 
_addEvent : false, 
_openEvent : false,
_closeEvent : false
};
var option = $.extend({},defaults,options);
selectArray.each(function(){ 
var $folderBox = $(this),
$selectList = $folderBox.find('.ui-fold-list');

if (option.devide){ 
$folderBox.on({
'mouseleave' : function(){
closeEvent();
}
})
}

if (option._addEvent){
option._addEvent();
}
if (option.autoFocusEnter){ 
$folderBox.find('.ui-fold-btn').on({
'mouseenter focusin' : function(e){
( $selectList.is(':visible') ) ? closeEvent() : openEvent();
e.preventDefault();
e.stopPropagation();
return false;
}
});
} else { 
$folderBox.find('.ui-fold-btn').on({
'click' : function(e){
( $selectList.is(':visible') ) ? closeEvent() : openEvent();
e.preventDefault();
e.stopPropagation();
}
});
}

$folderBox.on('mousedown focusin', function(e){
e.stopPropagation();
})
$body.on('mousedown focusin', function(e) {
closeEvent();
e.stopPropagation();
//e.preventDefault();
});
function openEvent(){
$folderBox.find('.ui-fold-btn').addClass('on');
if (option._openEvent){
speed.complete = option._openEvent;
}
$selectList.slideDown(speed);
if (option._stateChange == 'image'){
$folderBox.find('.ui-fold-btn img').USimgNameChg({'src' : ['_off','_on'] });
}
};
function closeEvent(){
$folderBox.find('.ui-fold-btn').removeClass('on');
if (option._closeEvent){
speed.complete = option._closeEvent;
}
$selectList.slideUp(speed);
if (option._stateChange == 'image'){
$folderBox.find('.ui-fold-btn img').USimgNameChg({'src' : ['_on','_off'] });
}

};
});
}
});