//flatheight

$(function() {
    $('.flatheight').flatHeights();
});

//tooltip
$(function() {
    $('#' + angleTab1 + ' a, #' + angleTab2 + ' a, #' + angleTab3 + ' a, #' + colorId1 + ' img, #' + colorId2 + ' img, #' + colorId3 + ' img').tooltip({ 
        track: true, 
        delay: 0, 
        showURL: false, 
        showBody: " - ", 
        fade: 100 
    });
});


//------ 以下、設定 ---------------------------------------------------------------------//
// クロックバンド・クロックバンド キッズなどタブを記述したdivタグのid(※１)
var productTab = 'productTab';

// カラーリストのulタグのid(※１のタブの数だけ作成)
var colorId1 = 'clogColor';
var colorId2 = 'flipColor';
var colorId3 = 'slideColor';

// アングルイメージのdivタグのid(※１のタブの数だけ作成)
var angleId1 = 'clogImage';
var angleId2 = 'flipImage';
var angleId3 = 'slideImage';

// アングルイメージのdivタグ内のpタグのid(※１のタブの数だけ作成)
var anglePId1 = 'cAngle';
var anglePId2 = 'fAngle';
var anglePId3 = 'sAngle';

// アングルリストのulタグのid(※１のタブの数だけ作成)
var angleTab1 = 'clogAngleTab';
var angleTab2 = 'flipAngleTab';
var angleTab3 = 'slideAngleTab';

// アングルリストのaタグのid(※１のタブの数だけ作成、共通部分のみ記述)
var angleAId1 = 'clog';
var angleAId2 = 'flip';
var angleAId3 = 'slide';

// アングル配列
var angles = new Array();
angles['side'] = ['img/clog_side.jpg', 'prepairclog,side', 'clogSide'];
angles['pair'] = ['img/clog_pair.jpg', 'prepairclog,pair', 'clogPair'];
angles['angle'] = ['img/clog_angle.jpg', 'prepairclog,angle', 'clogAngle'];
angles['back'] = ['img/clog_back.jpg', 'prepairclog,back', 'clogBack'];

var anglesflip = new Array();
anglesflip['side'] = ['img/flip_side.jpg', 'prepairflip,side', 'flipSide'];
anglesflip['pair'] = ['img/flip_pair.jpg', 'prepairflip,pair', 'flipPair'];
anglesflip['angle'] = ['img/flip_angle.jpg', 'prepairflip,angle', 'flipAngle'];
anglesflip['back'] = ['img/flip_back.jpg', 'prepairflip,back', 'flipBack'];

var anglesslide = new Array();
anglesslide['side'] = ['img/slide_side.jpg', 'prepairslide,side', 'slideSide'];
anglesslide['pair'] = ['img/slide_pair.jpg', 'prepairslide,pair', 'slidePair'];
anglesslide['angle'] = ['img/slide_angle.jpg', 'prepairslide,angle', 'slideAngle'];
anglesslide['back'] = ['img/slide_back.jpg', 'prepairslide,back', 'slideBack'];

// カレントカラー(※１のタブの数だけ作成、設定値は初期表示カラー名)
var currentcolor1 = 'black_hotpink_silver';
var currentcolor2 = 'black_citrus_silver';
var currentcolor3 = 'silver_dahlia_silver';

//------ 以上、設定 ---------------------------------------------------------------------//


//tab.ui
$(function() {
    $('#' + productTab).tabs({ fxFade: true, fxSpeed: 'fast' });
	$('#contentTab2, #contentTab3').tabs({ fxFade: true, fxSpeed: 'fast' });
});

// ga 
$(function() {
    $('#' + productTab + ' li').each(function (i) {
        $(this).find('a').click(function() {
            firstTracker._trackPageview($(this).attr('id'));
            secondTracker._trackPageview($(this).attr('id'));
        });
    });
});

//color
$(function() {
// 1
    //リストにクラス名を追加
    $('#' + colorId1 + ' li').each(function (i) {
        i = i+1;
        $(this).addClass('color'+i);
        
        //marginの値を計算
        var position = {marginTop: -(i-1)*230}
        
        $(this).click(function(){
            //$('#' + colorId1 + ' li').css('borderBottom', 'none');
			$('#' + colorId1 + ' li').css('borderBottom', '2px solid #2b2b2b');
            $(this).css('borderBottom', '2px solid #fff');
            $('#' + angleId1 + ' img').css(position);
            currentcolor1 = $(this).find('img').attr('id');
            firstTracker._trackPageview('clogcolor,' + currentcolor1);
            secondTracker._trackPageview('clogcolor,' + currentcolor1);

            // アングルのカラーを変更する。
            for(var angle in angles) {
                $('#' + angleAId1 + '_' + angle).parent().attr('id', angles[angle][2] + '_' + currentcolor1);
            }
        });
    });

    //イメージの差し替え
	$('#' + angleTab1 + ' li a').each(function (i) {
        $(this).click(function(){
				var shoes = $(this).attr('href');
            	$('#' + anglePId1 + ' img').hide().attr('src', angles[shoes][0]).load(function(){$(this).fadeIn('normal');});
	            $('#' + anglePId1 + ' img').attr('alt', angles[shoes][1]);
			 
            //google-analytics pagetracking
            firstTracker._trackPageview(angles[shoes][1] + ',' + currentcolor1);
            secondTracker._trackPageview(angles[shoes][1] + ',' + currentcolor1);

            return false;
        });
    });
    
    // ui-tabs-selectedを付与
    $('#' + angleTab1 + ' li').each(function (i) {
        // 左端を初期選択とする。
        if(i == 0) {
            $(this).addClass('ui-tabs-selected');
        }
        $(this).find('a').click(function(){
            $('#' + angleTab1 + " li").removeClass("ui-tabs-selected");
            $(this).parent().addClass("ui-tabs-selected");
        });
    });
// 2
    //リストにクラス名を追加
    $('#' + colorId2 + ' li').each(function (i) {
        i = i+1;
        $(this).addClass('color'+i);
        
        //marginの値を計算
        var position = {marginTop: -(i-1)*230}
        
        $(this).click(function(){
            //$('#' + colorId2 + ' li').css('borderBottom', 'none');
			$('#' + colorId2 + ' li').css('borderBottom', '2px solid #2b2b2b');
            $(this).css('borderBottom', '2px solid #fff');
            $('#' + angleId2 + ' img').css(position);
            currentcolor2 = $(this).find('img').attr('id');
            firstTracker._trackPageview('flipcolor,' + currentcolor2);
            secondTracker._trackPageview('flipcolor,' + currentcolor2);

            // アングルのカラーを変更する。
            for(var angle in angles) {
                $('#' + angleAId2 + '_' + angle).parent().attr('id', anglesflip[angle][2] + '_' + currentcolor2);
            }
        });
    });

    //イメージの差し替え
    $('#' + angleTab2 + ' li a').each(function (i) {
        $(this).click(function(){
            var shoes = $(this).attr('href');
           	$('#' + anglePId2 + ' img').hide().attr('src', anglesflip[shoes][0]).load(function(){$(this).fadeIn('normal');});
            $('#' + anglePId2 + ' img').attr('alt', anglesflip[shoes][1]);

            //google-analytics pagetracking
            firstTracker._trackPageview(anglesflip[shoes][1] + ',' + currentcolor2);
            secondTracker._trackPageview(anglesflip[shoes][1] + ',' + currentcolor2);

            return false;
        });
    });

    // ui-tabs-selectedを付与
    $('#' + angleTab2 + ' li').each(function (i) {
        // 左端を初期選択とする。
        if(i == 0) {
            $(this).addClass('ui-tabs-selected');
        }
        $(this).find('a').click(function(){
            $('#' + angleTab2 + " li").removeClass("ui-tabs-selected");
            $(this).parent().addClass("ui-tabs-selected");
        });
    });
// 3
    //リストにクラス名を追加
    $('#' + colorId3 + ' li').each(function (i) {
        i = i+1;
        $(this).addClass('color'+i);
        
        //marginの値を計算
        var position = {marginTop: -(i-1)*230}
        
        $(this).click(function(){
            //$('#' + colorId3 + ' li').css('borderBottom', 'none');
			$('#' + colorId3 + ' li').css('borderBottom', '2px solid #2b2b2b');
            $(this).css('borderBottom', '2px solid #fff');
            $('#' + angleId3 + ' img').css(position);
            currentcolor3 = $(this).find('img').attr('id');
            firstTracker._trackPageview('slidecolor,' + currentcolor3);
            secondTracker._trackPageview('slidecolor,' + currentcolor3);

            // アングルのカラーを変更する。
            for(var angle in angles) {
                $('#' + angleAId3 + '_' + angle).parent().attr('id', anglesslide[angle][2] + '_' + currentcolor3);
            }
        });
    });

    //イメージの差し替え
    $('#' + angleTab3 + ' li a').each(function (i) {
        $(this).click(function(){
            var shoes = $(this).attr('href');
           	$('#' + anglePId3 + ' img').hide().attr('src', anglesslide[shoes][0]).load(function(){$(this).fadeIn('normal');});
            $('#' + anglePId3 + ' img').attr('alt', anglesslide[shoes][1]);

            //google-analytics pagetracking
            firstTracker._trackPageview(anglesslide[shoes][1] + ',' + currentcolor3);
            secondTracker._trackPageview(anglesslide[shoes][1] + ',' + currentcolor3);

            return false;
        });
    });

    // ui-tabs-selectedを付与
    $('#' + angleTab3 + ' li').each(function (i) {
        // 左端を初期選択とする。
        if(i == 0) {
            $(this).addClass('ui-tabs-selected');
        }
        $(this).find('a').click(function(){
            $('#' + angleTab3 + " li").removeClass("ui-tabs-selected");
            $(this).parent().addClass("ui-tabs-selected");
        });
    });
});


//rollover
var preLoadImg = new Object();

function initRollOvers(){
	$("img.rollover").each(function(){
		var imgSrc = this.src;
		var sep = imgSrc.lastIndexOf('.');
		var onSrc = imgSrc.substr(0, sep) + '_o' + imgSrc.substr(sep, 4);
		preLoadImg[imgSrc] = new Image();
		preLoadImg[imgSrc].src = onSrc;
		$(this).hover(
			function() { this.src = onSrc; },
			function() { this.src = imgSrc; }
		);
	});
}
$(function(){
	initRollOvers();
});



//scroll
$(function(){ 
	$('a[rel=pagescroll]').click(function() {
		var href= this.hash;
		var $target = $(href == '#_top' ? 'body' : href);
 
		if($target.size()) {
			$.scrollTo($target, 800, {easing:'swing'});
		}
		return false;
	});
});



//biggerlink

$(function(){
	$('.box').biggerlink();
});



//lovers flow
$(document).ready(function() {	
	$('#mask').css({'height':$('#interview').height()});	
	$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
	$('#panel div').width($('#mask').width());
	$('a[rel=panel]').click(function () {
		var panelheight = $($(this).attr('href')).height();
		$('a[rel=panel]').removeClass('selected');
		$(this).addClass('selected');
		$('#mask').animate({'height':panelheight},{queue:false, duration:500});			
		$('#mask').scrollTo($(this).attr('href'), 800);		
		return false;
	});
	
});