/*
 * MainVisual XML Data
 */
var DrawXMLDataClassMain = function(pass, main, thumb, html){
	this.xmlFilePath = pass;
	this.mainView = $(main);
	this.thumbView = $(thumb);
	this.bnrData = {};
	this.bnrLength = 0;
	this.mainHtml = html.main;
	this.thumbHtml = html.thumb;
};
DrawXMLDataClassMain.prototype = {
	transJSON:function(xml){
		var json = [];
        $(xml).find('banner').each(function(i) {
            json[i] = {
                id: i,
                mainSrc: $(this).find('mainVisual').attr('src'),
                mainAlt: $(this).find('mainVisual').attr('alt'),
                thumbSrc: $(this).find('thumbBtn').attr('src'),
                thumbAlt: $(this).find('thumbBtn').attr('alt'),
                anchorHref: $(this).find('anchor').attr('href'),
                anchorTarget: $(this).find('anchor').attr('target')
            };
        });
        return json;
	},
	renderHTML:function(){
		var mainHTML = '';
        var thumbHTML = '';
        for ( var i = 0; i < this.bnrLength; i++ ) {
            mainHTML += this.makeMainHTML(i);
            thumbHTML += this.makeThumbHTML(i);
        }
        this.mainView.html(mainHTML).children('li:not(:first)').hide();
        this.thumbView.html(thumbHTML);

	},
	makeMainHTML:function(index){
		return this.mainHtml.replace(/{\$href}/g, this.bnrData[index].anchorHref || 'javascript:void(0);')
        			.replace(/{\$target}/g, this.bnrData[index].anchorTarget || '_self')
        			.replace(/{\$src}/g, this.bnrData[index].mainSrc || '')
        			.replace(/{\$alt}/g, this.bnrData[index].mainAlt || '');

	},
	makeThumbHTML:function(index){
		return this.thumbHtml.replace(/{\$href}/g, this.bnrData[index].anchorHref || 'javascript:void(0);')
        			.replace(/{\$target}/g, this.bnrData[index].anchorTarget || '_self')
        			.replace(/{\$src}/g, this.bnrData[index].thumbSrc || '')
        			.replace(/{\$alt}/g, this.bnrData[index].thumbAlt || '');

	}
};

/*
 * RotationVisual XML Data
 */
var DrawXMLDataClassRotation = function(pass, main, html){
	this.xmlFilePath = pass;
	this.mainView = $(main);
	this.bnrData = {};
	this.bnrLength = 0;
	this.html = html;
};
DrawXMLDataClassRotation.prototype = {
	transJSON:function(xml){
		var json = [];
        $(xml).find('banner').each(function(i) {
            json[i] = {
                id: i,
                mainSrc: $(this).find('mainVisual').attr('src'),
                mainAlt: $(this).find('mainVisual').attr('alt'),
                anchorHref: $(this).find('anchor').attr('href'),
                anchorTarget: $(this).find('anchor').attr('target'),
                mainTitle: $(this).find('title').text(),
                mainDetail: $(this).find('detail').text()
            };
        });
        return json;
	},
	renderHTML:function(){
		var mainHTML = '';
        for ( var i = 0; i < this.bnrLength; i++ ) {
            mainHTML += this.makeMainHTML(i);
        }
        this.mainView.html(mainHTML);

	},
	makeMainHTML:function(index){
		return this.html.replace(/{\$href}/g, this.bnrData[index].anchorHref || 'javascript:void(0);')
        			.replace(/{\$target}/g, this.bnrData[index].anchorTarget || '_self')
        			.replace(/{\$src}/g, this.bnrData[index].mainSrc || '')
        			.replace(/{\$alt}/g, this.bnrData[index].mainAlt || '')
        			.replace(/{\$title}/g, this.bnrData[index].mainTitle || '')
        			.replace(/{\$detail}/g, this.bnrData[index].mainDetail || '');

	}
};

/*
 * SlideVisual XML Data
 */
var DrawXMLDataClassSlide = function(pass, view, html){
	this.xmlFilePath = pass;
	this.mainView = $(view);
	this.bnrData = {};
	this.bnrLength = 0;
	this.html = html;
	this.viewWidth = 960;
};
DrawXMLDataClassSlide.prototype = {
	transJSON:function(xml){
		var json = [];
    var date = new Date();
    var str = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2) + ('0' + date.getHours()).slice(-2)+ ('0' + date.getMinutes()).slice(-2);
      $(xml).find('banner').each(function(){
        if($(this).attr('enddate') >= str){
          $(this).attr('class', 'slide_in');
        }
      });
	    $(xml).find('banner.slide_in').each(function(i) {
	        var onclick_attr_val = $(this).find('anchor').attr('onclick');
	        json[i] = {
	            id: i,
	            endDate: $(this).attr('enddate'),
	            mainSrc: $(this).find('mainVisual').attr('src'),
	            mainAlt: $(this).find('mainVisual').attr('alt'),
	            anchorHref: $(this).find('anchor').attr('href'),
	            anchorOnclickSet: onclick_attr_val ? 'onclick="' + onclick_attr_val + '"' : '',
	            anchorTarget: $(this).find('anchor').attr('target'),
	            arrowLeft: $(this).find('arrow').attr('src1'),
	            arrowRight: $(this).find('arrow').attr('src2')
	        };
	    });
	    return json;
	},
	renderHTML:function(){
		var mainHTML = this.makeMainHTML(this.bnrLength - 1);
        if (this.bnrLength > 1) {
            for (var i = 0; i < this.bnrLength; i++) {
                mainHTML += this.makeMainHTML(i);
            }
            this.mainView.css({
                width: this.viewWidth * (this.bnrLength + 1) + 'px',
                left: '-' + this.viewWidth + 'px'
            }).html(mainHTML);
            
        } else {
            this.mainView.html(mainHTML);
        }

	},
	makeMainHTML:function(index){
		return this.html.replace(/{\$id}/g, this.bnrData[index].id)
				.replace(/{\$href}/g, this.bnrData[index].anchorHref || '')
				.replace(/{\$onclick_set}/g, this.bnrData[index].anchorOnclickSet)
				.replace(/{\$target}/g, this.bnrData[index].anchorTarget || '_self')
				.replace(/{\$src}/g, this.bnrData[index].mainSrc || '')
				.replace(/{\$alt}/g, this.bnrData[index].mainAlt || '');

	}
};

/*
 * MainVisual
 */
var MainVisualClass = function(){
	this.visualUl = $("#bnrList");
	this.visualLi = this.visualUl.children("li");
	this.thumbUl = $("#thumbList");
	this.thumbLi = this.thumbUl.children("li");
	this.thumbSc = 99;
	this.thumbMove = 1;
	this.thumbMax = 3;
	this.index = 0;
	this.timer = null;
	this.animation = false;
	this.wait = 4000;
	this.duration = 700;
	this.prevBtn = $("#thumbPrev");
	this.nextBtn = $("#thumbNext");
};
MainVisualClass.prototype = {
	init:function(){
		var self = this;
		var len = this.visualLi.length;
		
		//set event
		this.visualUl.hover(function(){
			self.stop();
			
		},function(){
			self.start();
			
		});
		
		this.thumbLi.each(function(index){
			$(this).hover(function(){
				self.index = index;
				self.active();
				self.stop();
				
			},function(){
				self.start();
			});
		});
		
		this.prevBtn.hover(function(){
			self.stop();
			
		},function(){
			self.start();
			
		});
		
		this.nextBtn.hover(function(){
			self.stop();
			
		},function(){
			self.start();
			
		});
		
		if ( this.condition() ) {
			this.prevBtn.click(function(){
				if ( !self.animation ) {
					self.index = self.index - 1;
					if ( self.index < 0 ) {
						self.index = len - 1;
					}
					self.active();
					self.thumbRotation("back");
				}
				
			});
			
			this.nextBtn.click(function(){
				if ( !self.animation ) {
					self.index = self.index + 1;
					if ( self.index > len - 1 ) {
						self.index = 0;
					}
					self.active();
					self.thumbRotation("forward");
				}
				
			});
			
		} else {
			this.prevBtn.css({"opacity":0.3, "cursor":"default"});
			this.nextBtn.css({"opacity":0.3, "cursor":"default"});
		}
		
		this.initThumbSet();
		this.activeThumb();
		this.start();
	},
	condition:function(){
		if ( this.visualLi.length > this.thumbMax ) {
			return true;
		} else {
			return false;
		}
	},
	activeThumb:function(){
		var self = this;
		this.thumbLi.each(function(index){
			var src = $(this).find("img").attr("src");
			if ( index == self.index ) {
				if ( !$(this).find("img").hasClass("current") ) {
					$(this).find("img").attr("src", src.replace(/.jpg/,"_on.jpg"));
					$(this).find("img").addClass("current");
				}
				
			} else {
				$(this).find("img").attr("src", src.replace(/_on.jpg/,".jpg"));
				$(this).find("img").removeClass("current");
			
			}
		});
	},
	active:function(){
		this.activeThumb();
		var self = this;
		this.visualLi.each(function(index){
			if ( index == self.index ) {
				$(this).stop(true, true).fadeIn(self.duration);
				
			} else {
				$(this).stop(true, true).fadeOut(self.duration);
			
			}
		});
	},
	start:function(){
		var self = this;
		if ( !this.condition() ) {
			return false;
		}
		this.timer = setTimeout(function(){
			self.auto();
		}, this.wait);
	},
	stop:function(){
		clearTimeout(this.timer);
		this.timer = null;
	},
	auto:function(){
		this.index++;
		if ( this.index == this.visualLi.length ) {
			this.index = 0;
			
		}
		this.active();
		this.thumbRotation("forward");
		this.stop();
		this.start();
	},
	thumbRotation:function(direction){
		this.animation = true;
		
		if ( direction == 'forward' ) {
			this.setThumbView(direction);
		}
		var self = this;
		var len = this.thumbUl.children().length;
		
		this.thumbUl.children("li").each(function(i){
			var posTop;
			if ( direction == 'back' ) {
				posTop = self.thumbSc * (i - 1);
				scFlg = true;
				$(this).stop(true, false).animate({'top':posTop + self.thumbSc * self.thumbMove},
					self.duration,
					'easeOutCubic',
					function(){
						if(i == len - 1){
							self.setThumbView(direction);
							self.animation = false;
						}
				});
				
			} else if ( direction == 'forward' ) {
				posTop = self.thumbSc * i;
				scFlg = true;
				$(this).stop(true, false).animate({'top':posTop - self.thumbSc * self.thumbMove},
					self.duration,
					'easeOutCubic',
					function(){
						if(i == len - 1){
							self.animation = false;
						}
				});
			}
		});
	},
	setThumbView:function(direction){
		if ( direction == 'forward' ) {
			for ( var i=0; i<this.thumbMove; i++ ) {
				var fbnr = this.thumbUl.find('li:first');
				this.thumbUl.append(fbnr);
				$(fbnr).css({'top':this.thumbSc * this.thumbMax });
			}

		} else if ( direction == 'back' ) {
			for ( var i=0; i<this.thumbMove; i++ ) {
				var lbnr = this.thumbUl.find('li:last');
				this.thumbUl.prepend(lbnr);
				$(lbnr).css({'top':-1 * this.thumbSc});
			}
		}
	},
	initThumbSet:function(){
		if ( this.condition() ) {
			for ( var i=0; i<this.thumbMove; i++ ) {
				var setbnr = this.thumbUl.find('li:last');
				this.thumbUl.prepend(setbnr);
			}
			
			var setTop = -1 * this.thumbSc * this.thumbMove;
			var self = this;
			this.thumbUl.children().each(function(i){
				$(this).css({'position':'absolute','top':setTop});
				setTop = setTop + self.thumbSc;
			});
		
		} else {
			var setTop = 0;
			var self = this;
			this.thumbUl.children().each(function(i){
				$(this).css({'position':'absolute','top':setTop});
				setTop = setTop + self.thumbSc;
			});
			
		}
	}
};
/*
 * RotationVisual
 */
var RotationVisualClass = function(){
	this.target = $("#recommend");
	this.visual = $("#slide");
	this.visualLen = this.visual.children("li").length;
	this.bnrView = 5;
	this.list = $("#list");
	this.listIndex = 0;
	this.prevBtn = "#listPrev";
	this.nextBtn = "#listNext";

};
RotationVisualClass.prototype = {
	init:function(){
		this.initList();
		var copyBnr = new Array();
		
		if ( this.visualLen > this.bnrView ) {
			
			//ナビ移動のため要素を複製する
			copyBnr[0] = this.visual.children("li").clone(true);
			copyBnr[1] = this.visual.children("li").clone(true);
			
		} else {
			
			//表示数より小さいため要素を複製する
			var count = parseInt(this.bnrView/this.visualLen, 10) + 1;
			for ( var i=0; i<count; i++ ) {
				copyBnr[i] = this.visual.children("li").clone(true);
			}
		}

		this.addBnrView(copyBnr);
		this.rotation();
	},
	initList:function(){
		var self = this;

		// draw list
		this.drawList();

		//add listNavi propaty
		this.listNavi.index = 0;
		this.listNavi.listBtn = $("#list").children("li");
		this.listNavi.listMax = $("#list").children("li").length;
		this.listNavi.liClick = { target:"#list", index:0 };
		
	},
	drawList:function(){
		var self = this;
		this.visual.children("li").each(function(index){
			var listTag = self.listHTML();
			if ( index == self.listIndex ) {
				listTag = listTag.replace("{{active}}","01");
				
			} else {
				listTag = listTag.replace("{{active}}","02");
				
			}
			self.list.append(listTag);
			
		});
		
	},
	listHTML:function(){
		var tag = '<li><img src="/products/colorio/images/bt_reco_{{active}}.gif" width="15" height="15" alt="" /></li>';
		return tag;
	},
	addBnrView:function(copyBnr){
		for ( var i=0, len=copyBnr.length; i<len; i++ ) {
			this.visual.append(copyBnr[i]);
		}
		
		//中央寄せ
		var visualLeft = 120 - 250 * (this.visualLen - 1);
		this.visual.css({left:visualLeft});
		
	},
	rotation:function(){
		this.target.bannerRotation({
			time:		5000,
			duration:	500,
			easing:		'easeOutCubic',
			leftBtn:	this.prevBtn,
			rightBtn:	this.nextBtn,
			bnrArea:	this.visual,
			bnrWidth:	223,
			bnrHeight:	0,
			bnrMarginL:	22,
			bnrMarginT:	0,
			bnrView:	this.bnrView,
			moveBnr:	1,
			direction:	'forward',
			callBack:	this.listNavi,
			stopArea:	this.listNavi.listBtn,
			liClickMove:this.listNavi.liClick
		});
	},
	listNavi:{
		direction:false,
		action:function(shift){
			var btnImg = ["bt_reco_01.gif","bt_reco_02.gif"];
			var self = this;
			var listActive = function(list){
				self.listBtn.each(function(index){
					var src = $(this).find("img").attr("src");
					if ( index == list ) {
						$(this).find("img").attr("src", src.replace(btnImg[1], btnImg[0]));
						
					}else{
						$(this).find("img").attr("src", src.replace(btnImg[0], btnImg[1]));
						
					}
					
				});
			};
			
			if ( this.direction ) {
				this.index = this.index + shift;
				if ( this.index > this.listMax - 1 ) {
					this.index = 0;
				}
				listActive(this.index);
				
			} else {
				this.index = this.index - shift;
				if ( this.index < 0 ) {
					this.index = this.listMax - 1;
				}
				listActive(this.index);
			}
		}
	}
};

/*
 * SlideVisual
 */
var SlideVisualClass = function(visual, navi, bnrData, html){
	this.visual = $(visual);
	this.navi	= $(navi);
	this.naviImg = { prev:'#listPrev', next:'#listNext' };
	this.wait 	= 3000;
	this.distSc = 960;
	this.duration = 1050;
	this.easing = "easeOutQuart";
	this.isAnimation = { view:false, navi:false };
	this.isHover = false;
	this.timer = { view:null, naiv:null };
	this.viewLen = this.visual.children("li").length - 1;
	this.bnrData = bnrData;
	this.html = html;
	
};
SlideVisualClass.prototype = {
	init:function(){
		this.setArrow(0);
		
		if (this.viewLen > 1) {
			this.setMainEvent();
			this.setNaviEvent();
			this.setIntervalTimer();
		}
		
	},
    // ナビゲーション要素のHTML生成
	setArrow:function(no){
        $(this.naviImg.prev, this.navi).attr('src', this.bnrData[no].arrowLeft);
        $(this.naviImg.next, this.navi).attr('src', this.bnrData[no].arrowRight);
    },
    // メインビジュアル要素イベント設定
	setMainEvent:function(){
		var self = this;
        $('li', this.visual).unbind('mouseenter').unbind('mouseleave').hover(function() {
        	self.isHover = true;
            self.clearIntervalTimer();
            self.clearSelectedTimer();
            if ( !self.isAnimation.view || self.isAnimation.navi ) { self.navi.show(); }
        }, function() {
        	self.isHover = false;
            self.setIntervalTimer();
            self.setSelectedTimer();
        });
    },
    //ホバー画像
    getHoverSrc:function(src, hover){
    	var type = src.substring(src.lastIndexOf('.'), src.length);
        return hover ? src.replace(type, '_ov' + type) : src.replace('_ov' + type, type);
    },
    // ナビゲーション要素イベント設定
    setNaviEvent:function(){
    	var self = this;
        $('li > img', this.navi).hover(function() {
        	self.isHover = true;
        	self.clearIntervalTimer();
        	self.clearSelectedTimer();
            $(this).attr('src', self.getHoverSrc($(this).attr('src'), true));
            self.navi.show();
            
        }, function() {
        	self.isHover = false;
        	self.setIntervalTimer();
        	self.setSelectedTimer();
            $(this).attr('src', self.getHoverSrc($(this).attr('src'), false));
        });

        $(this.naviImg.prev).click(function() {
        	self.slideRight();
        });

        $(this.naviImg.next).click(function() {
        	self.slideLeft();
        });
    },
    // ローテーションタイマーの設定
    setIntervalTimer:function(){
    	var self = this;
        this.clearIntervalTimer();
        this.timer.view = setInterval(function() { self.slideLeft(); }, this.wait);
    },
    // ローテーションタイマーの破棄
    clearIntervalTimer:function(){
        if ( this.timer.view ) {
            clearInterval(this.timer.view);
            this.timer.view = null;
        }
    },
    // ナビゲーションタイマーの設定
    setSelectedTimer:function(){
    	var self = this;
        this.clearSelectedTimer();
        this.timer.navi = setTimeout(function() { self.navi.hide(); }, 50);
    },
    // ナビゲーションタイマーの破棄
    clearSelectedTimer:function(){
        if ( this.timer.navi ) {
            clearTimeout(this.timer.navi);
            this.timer.navi = null;
        }
    },
    // 右から左にスライド
    slideLeft:function(){
        if ( this.isAnimation.view ) { return; }

        this.isAnimation.view = true;
        this.isAnimation.navi = false;
        this.clearIntervalTimer();

        var self = this;
        var currNo = parseInt($('li:last', this.visual).attr('name'), 10);
        var nextNo = ( currNo + 1 < this.viewLen ) ? currNo + 1 : 0;
        var mainHTML = this.makeMainHTML(nextNo);
        
        this.navi.hide();
        setTimeout(function() {
        	self.setArrow(currNo);
            if ( self.isHover ) { self.navi.fadeIn(100); }
            self.isAnimation.navi = true;
        }, this.duration - 350);

        this.visual.animate({
            left: '-=' + this.distSc + 'px'
        }, {
            duration: this.duration, easing: this.easing, complete: function() {  
        		$('li:first', self.visual).remove();
	            $(this).append(mainHTML).css({left: '-' + self.distSc + 'px' });
	            self.setMainEvent();
	            if ( !self.isHover ) { self.setIntervalTimer(); }
	            self.isAnimation.view = false;
        }});
    },
    // 左から右にスライド
    slideRight:function(){
        if ( this.isAnimation.view ) { return; }

        this.isAnimation.view = true;
        this.isAnimation.navi = false;
        this.clearIntervalTimer();

        var self = this;
        var currNo = parseInt($('li:first', this.visual).attr('name'), 10);
        var nextNo = (currNo - 1 >= 0) ? currNo - 1 : this.viewLen - 1;
        var mainHTML = this.makeMainHTML(nextNo);

        this.navi.hide();
        setTimeout(function() {
        	self.setArrow(currNo);
            if ( self.isHover ) { self.navi.fadeIn(100); }
            self.isAnimation.navi = true;
        }, this.duration - 350);

        this.visual.animate({
            left: '+=' + this.distSc + 'px'
        }, {
            duration: this.duration, easing: this.easing, complete: function() {
        		$('li:last', self.visual).remove();
	            $(this).prepend(mainHTML).css({left: '-' + self.distSc + 'px' });
	            self.setMainEvent();
	            if ( !self.isHover ) { self.setIntervalTimer(); }
	            self.isAnimation.view = false;
        }});
    },
    makeMainHTML:function(index){
    	return this.html.replace(/{\$id}/g, this.bnrData[index].id)
			.replace(/{\$href}/g, this.bnrData[index].anchorHref || '')
			.replace(/{\$onclick_set}/g, this.bnrData[index].anchorOnclickSet)
			.replace(/{\$target}/g, this.bnrData[index].anchorTarget || '_self')
			.replace(/{\$src}/g, this.bnrData[index].mainSrc || '')
			.replace(/{\$alt}/g, this.bnrData[index].mainAlt || '');
    }
};

/*
 * Initialize grid items.
 */
var GridItemClass = function(items, navi){
	this.itemGroup = $(items);
	this.itemImg = "dt.image > img";
	this.navi = $(navi);
	this.overlay = ".cover";
	this.hover = "hover";
	this.active = "act";
};

GridItemClass.prototype = {
	/*
	 * Initialize grid items.
	 */
	initGridItems:function(item){
		var self = this;
		this.itemGroup .find(item)
			/* Set clickable area. */
			.css('cursor', 'pointer')
			.bind('click', function() {
				var url = $(this).find('a').get(0).href;
				if (url) {
					location.href = url;
				}
			})
			.bind('mouseenter', function() {
				/* Switch class. */
				$(this).addClass(self.hover);
			})
			.bind('mouseleave', function() {
				/* Switch class. */
				$(this).removeClass(self.hover);
			});
	},
	/*
	 * Reset overlay.
	 * @param {Object} jQuery object that contains an overlay.
	 * @param {String} Target name to filtering. (Default 'all')
	 */
	resetOverlay:function($items, targetName, overlay){
		var target = targetName || 'all';

		$items.each(function() {
			var $overlay = $(this).find(overlay);
			
			if (target === 'all' || $(this).hasClass(target)) {
				$overlay.animate({
					opacity: 0
				}, 320);
			}
			else {
				$overlay
					.animate({
						opacity: 0.8
					}, 320)
				;
			}
		});
	},
	/*
	 * Initialize category nav.
	 */
	initCategoryNav:function(container, item){
		var $navItems = this.navi.find('a[href^="#"]'),
			self = this;
		
		$navItems.unbind('click').bind('click', function(e) {
			e.preventDefault();
			var target = this.hash.replace(/^#/, ''),
				$container = self.itemGroup.find(container),
				$items = $container.children(item),
				order = $container.data('_vgdefchild').get();

			/* Switch current nav image. */
			$navItems.parent().removeClass(self.active);
			$(this).parent().addClass(self.active);

			self.resetOverlay($items, target, self.overlay);

			/* Reset items order. */
			$(order.reverse()).each(function(i, elm) {
				$(elm).prependTo($container);
			});
			order.reverse();
			$container.data('_vgchild', {});

			/* Filter items. */
			if (target !== 'all') {
				order = $items.filter('.'+ target).get();
				$(order.reverse()).each(function(i, elm) {
					$(elm).prependTo($container);
					
				});
			}

			/* Refresh grid. */
			$container.vgrefresh('easeOutQuint');
			
			return false;
		});
	},
	/*
	 * Do grid functions.
	 */
	doGrid:function(container, item){
		
		/* Flat item heights. */
		this.itemGroup.find(item).flatHeights();
		//$('#guide div.item > div > div').flatHeights();
		
		/* Flat item heights. */
		var self = this;
		/* Do grids. */
		this.itemGroup.find(container)
			/* Set grid. */
			.vgrid({
				easing: 'easeInOutQuint',
				time: 480,
				delay: 0,
				fadeIn: {
					time: 480,
					delay: 64
				}
			})
			/* Append overlay to each items. */
			.children(item)
				.each(function() {
					$(self.overlay).css({opacity: 0});
				})
			.end();
	}
};

/*
 * TabChange
 */
var TabChangeClass = function(){
	this.tabArea = $("#tabGroup");
	this.tabs = this.tabArea.children("div:first");
	this.views = this.tabArea.children("div:not(:first)");
	this.index = 0;
	this.typeIndex = { type:"model", value:["multi","single","me","pro","biz"] };
	
};
TabChangeClass.prototype = {
	init:function(){
		var self = this;
		this.getQueryIndexType();
		this.tabs.find("li").each(function(index){
			var src = $(this).find("img").attr("src");
			if ( self.index == index ) {
				self.replaceSrc(this, true, src);
				
			} else {
				self.replaceSrc(this, false, src);
				
			}
			
			//click event
			$(this).click(function(){
				self.index = index;
				self.listImg();
				self.tabChange(index);
			});
			
			//hover event
			$(this).hover(function(){
				if ( self.index != index ) {
					self.replaceSrc(this, true, src);
				}
				
			},function(){
				if ( self.index != index ) {
					self.replaceSrc(this, false, src);
				}
				
			});
		});
		
		this.tabChange(this.index);
	},
	getQueryIndexType:function(){
		var queryArr = decodeURI(location.search).replace(/^\?/, '').split('&');
		var typeValue = "";
		
		for ( var i=0; i<queryArr.length; i++ ) {
			var val = queryArr[i].split('=');
			if ( this.typeIndex.type == val[0] ) {
				typeValue = val[1];
			}
		}
		
		for ( var j=0, len=this.typeIndex.value.length; j<len; j++ ) {
			if ( this.typeIndex.value[j] == typeValue ){
				this.index = j;
			}
		}
		
	},
	listImg:function(){
		var self = this;
		this.tabs.find("li").each(function(index){
			var src = $(this).find("img").attr("src");
			self.replaceSrc(this, false, src);
			src = $(this).find("img").attr("src");
			if ( self.index == index ) {
				self.replaceSrc(this, true, src);
				
			}
		});
	},
	replaceSrc:function(target, active, src){
		if ( active ) {
			if ( !$(this).find("img").hasClass("current") ) {
				$(target).find("img").attr("src", src.replace(/.gif/,"_on.gif"));
				$(target).find("img").addClass("current");
			}
			
		} else {
			$(target).find("img").attr("src", src.replace(/_on.gif/,".gif"));
			$(target).find("img").removeClass("current");
			
		}
	},
	tabChange:function(index){
		this.views.each(function(i){
			if ( i == index ) {
				$(this).show();
				
			} else {
				$(this).hide();
				
			}
		});
	}
};

/*
Copyright (c) 2007, KITAMURA Akatsuki

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/
jQuery.changeLetterSize={handlers:[],interval:1E3,currentSize:0};(function(a){var b=a.changeLetterSize,c=a("<ins>M</ins>").css({display:"block",visibility:"hidden",position:"absolute",padding:"0",top:"0"}),d=function(){c.appendTo("body");var e=c[0].offsetHeight;c.remove();if(b.currentSize==e)return!1;b.currentSize=e;return!0};a(d);var f=function(){d()&&a.each(b.handlers,function(b,a){a()})};b.addHandler=function(a){b.handlers.push(a);1==b.handlers.length&&setInterval(f,b.interval)}})(jQuery); (function(a){var b=[],c=function(a){var b=0;a.each(function(){var a=this.offsetHeight;a>b&&(b=a)});a.css("height",b+"px")};jQuery.fn.flatHeights=function(){1<this.length&&(c(this),b.push(this));return this};var d=function(){a.each(b,function(){this.height("auto");c(this)})};a.changeLetterSize.addHandler(d);a(window).resize(d)})(jQuery);