/**
@prefix : <http://purl.org/net/ns/doas#> .
<http://special-sauce.co.jp/js/common.js> a :JavaScript;
 :shortdesc "common.js";
 :created "2010-11-10";
 :license <http://special-sauce.co.jp/>;
 :dependencies "JQueryに依存する" .
*/

/*----------------------------------------------------
    ページ内スクロール
----------------------------------------------------*/
function smoothScroll(){
    $('a[href=#top], a[href=#concept], a[href=#about], a[href=#works], a[href=#blog], a[href=#contact]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;    
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
}
$(document).ready(smoothScroll);

/*----------------------------------------------------
    メインナビゲーション
----------------------------------------------------*/
function mainNavi(){
    
    $.fn.mainNavi = function() {
    
        // アニメーション変数
        jQuery.extend(jQuery.easing, {
            easeOutQuad: function (x, t, b, c, d) {
    		  return -c *(t/=d)*(t-2) + b;
            }
        });
        
        var target = $(this);
        var orignAnimatePosition = target.css('backgroundPosition');
        var orignAnimatePositionX = target.css('backgroundPositionX');
        var changeImage, orignImage, index;
        
        $('li', this).hover(function() {
            
            // 何個目の要素にロールオーバーしているか
            index = $('li', target).index(this);
            
            // 背景の帯を動かす
            var animatePosition = 80 * index +'px';
            if(orignAnimatePosition) {
                target.stop().animate({
                    backgroundPosition: animatePosition + ' 0px'
                }, 500, 'easeOutQuad');
            } else {
                target.stop().animate({
                    backgroundPositionX: animatePosition
                }, 500, 'easeOutQuad');
            }
            
            // ロールアウトした際に元に戻すため画像の初期値を格納
            orignImage = $('li.action', target).find('img').attr('src');
            changeImage = $('li', target).eq(index).find('img').attr('src');
            
            // 画像オンオフの切り替え
            if(!changeImage.match(/_on/)) {
                var orignImageOff = orignImage.replace(/_on/, '');
                var changeImageOn = changeImage.substr(0, changeImage.lastIndexOf('.')) + '_on' + changeImage.substring(changeImage.lastIndexOf('.'));
                $('li.action img', target).attr('src', orignImageOff);
                $('li', target).eq(index).find('img').hide().attr('src', changeImageOn).show();
            }
            
        }, function() {
        
            // 背景の帯を元の位置へ
            if(orignAnimatePosition) {
                target.stop().animate({
                    backgroundPosition: orignAnimatePosition
                }, 500, 'easeOutQuad');
            } else {
                target.stop().animate({
                    backgroundPositionX: orignAnimatePositionX
                }, 500, 'easeOutQuad');
            }
            
            // 画像を元に戻す
            if($('li', target).eq(index).attr('class') !== 'action') {
                $('li', target).eq(index).find('img').attr('src', changeImage);
            }
        });
        
        // ulからマウスアウトした際の動き
        $(this).mouseleave(function() {
            var lastImage = $('li.action img', target).attr('src');
            if(!lastImage.match(/_on/)) {
                var resetImage = lastImage.substr(0, lastImage.lastIndexOf('.')) + '_on' + lastImage.substring(lastImage.lastIndexOf('.'));
                $('li.action img', target).hide().attr('src', resetImage).show();
            }
        });
    }
    
    $('#mainNavi01').mainNavi();
    $('#mainNavi02').mainNavi();
    $('#mainNavi03').mainNavi();
    $('#mainNavi04').mainNavi();
    $('#mainNavi05').mainNavi();
    
}
$(document).ready(mainNavi);

/*----------------------------------------------------
    ロールオーバー
----------------------------------------------------*/
function rolloverImages() {
    $('img.rollover').hover(function() {
        $(this).stop().animate({"opacity":0});
    }, function() {
        $(this).stop().animate({"opacity":1});
    });
}
$(document).ready(rolloverImages);

/*----------------------------------------------------
    worksのタブ切り替え
----------------------------------------------------*/
function tabImages() {
	
	// クエリの有無判定
    var query = window.location.search;
    var regexp01 = /page=[\w|-]+/i;
    var regexp02 = /tab=[\w|-]+/i;
    if(query) {
        if(query.match(regexp01)) {
            var queryPage = query.match(regexp01).toString();
            queryPage = queryPage.replace(/page=/, "#");
        }
        if(query.match(regexp02)) {
            var queryTab = query.match(regexp02).toString();
            queryTab = queryTab.replace(/tab=/, "");
        }
    }
    
    $.fn.imageTabs = function(options){
    
        // 引数のデフォルト値を渡す
        var conf = $.extend({
            animate: 'show',
            duration: ''
        }, options); // optionsに値があれば上書きする
        
        // 初期設定
        var target = this;
        var tabPanel = $('div.tabPanel', target);
        tabPanel.hide();
        var handler = $('ul.tab li a', target);
		
		// クエリでtabの指定があった場合
		if(queryTab) {
			$('div.tabPanelGroup div').each(function(){
				if(queryTab == $(this).attr('id')) {
					$('div#' + queryTab, target).show();
        			$('ul.tab li.' + queryTab + ' a', target).addClass('active');
        			$('ul.tab li.' + queryTab + ' img', target).css({"opacity":0});
				}
			});
		} else {
			// 先頭のタブを開く
        	$('div.tabPanel:first', target).show();
        	$('ul.tab li:first a', target).addClass('active');
        	$('ul.tab li:first img', target).css({"opacity":0});
		}
		
        // クリック時の動作
        handler.click(function() {
            if($(this).attr('class') !== 'active') {
                
                // タブ画像の切り替え
                $('ul.tab li a.active', target).removeClass('active');
                $('ul.tab li img', target).css({"opacity":1});
                $(this).addClass('active');
				$('ul.tab li a.active img', target).css({"opacity":0});
                
                // コンテンツの切り替え
                var clickAttr = $(this).attr('href');
                var boxHeight = $('div.tabPanelGroup').height();
                $('div.tabPanelGroup').css('height', boxHeight);
                $('div.tabPanel:visible', target).stop(true, true).hide();
                $('div#' + clickAttr)[conf.animate](conf.duration);
                $('div.tabPanelGroup').css('height', 'auto');
            }
            return false;
        });
		
		// ロールオーバー
        handler.hover(function() {
            if($(this).attr('class') !== 'active') {
                $(this).children('img').stop().animate({"opacity":0});
			}
        }, function() {
            if($(this).attr('class') !== 'active') {
                $(this).children('img').stop().animate({"opacity":1});
            }
        });
		
		// クエリでpageの指定があった場合
		if(queryPage) {
			$('section').each(function(){
				if(queryPage == '#' + $(this).attr('id')) {
					var queryPosition = $(queryPage).offset();
					$('html,body').animate({scrollTop: queryPosition.top}, 1000);
				}
			});
		}
        
    }
    
    $('#tabArea').imageTabs();
    
}
$(document).ready(tabImages);

/*----------------------------------------------------
    イメージオーバー
----------------------------------------------------*/
function imageOver() {
    $('.tabPanel ul li p.img').append('<img src="/img/works/img_01.png" alt="" class="frame" />');
    $('.frame').hide();
    $('.tabPanel ul li p.img').hover(function() {
        $(this).children('.frame').stop(false, true).fadeIn('fast');
    }, function() {
        $(this).children('.frame').stop(false, true).fadeOut();
    });
}
$(document).ready(imageOver);

/*----------------------------------------------------
    モーダルウィンドウ
----------------------------------------------------*/
function modalWindow() {
	$('<div id="glayLayer"></div><div id="overLayer"></div><img src="/img/common/loader_img_01.gif" alt="" id="loaderImage" />').appendTo('body').hide();
	
    $('#glayLayer').click(function() {
        $(this).hide();
        $('#overLayer, #loaderImage').hide();
    });
    $('#overLayer p.btn').click(function() {
        $('#glayLayer, #overLayer, #loaderImage').hide();
    });
    
    $('.tabPanel ul li p.img').click(function(){
        $('#glayLayer').css({ opacity: '0' });
        $('#glayLayer').show().animate({ opacity: '0.85' });
        $('#overLayer').css({ opacity: '0' });
        $('#overLayer').show().animate({ opacity: '1' });
        $('#loaderImage').show();
		
		// IE6,IE7用
		if(!$.support.opacity) {
			if(!$.support.style) {
				if(typeof document.documentElement.style.maxHeight != "undefined") {
					// IE7
					$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
        			$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
				} else {
					// IE6
					$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
        			$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
				}
			}
		}
		
        // ページの読み込み
        var loadPage = $(this).children('a').attr('href');
        $('#contentArea, #error').hide();
        $("#overLayer").load(loadPage + ' #contentArea', function(response, status, xhr) {
            imageGallery();
            $('#contentArea .inner-01 h3, #contentArea .inner-01 p, #contentArea .inner-01 ul').css({"color":"#fff"});
			$('#overLayer').append('<p id="closeBtn"><img src="/img/works/btn_01.png" alt="close" /></p>');
			$('#closeBtn').click(function() {
        		$('#glayLayer, #overLayer, #loaderImage').hide();
    		});
            $('img#loaderImage').hide();
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#overLayer").html('<p id="error">' + msg + xhr.status + " " + xhr.statusText + '</p>');
				$('#overLayer').append('<p id="closeBtn"><img src="/img/works/btn_01.png" alt="close" /></p>');
				$('#closeBtn').click(function() {
					$('#glayLayer, #overLayer, #loaderImage').hide();
				});
            }
        });
        return false;
    });
	
}
$(document).ready(modalWindow);

/*----------------------------------------------------
    イメージギャラリー
----------------------------------------------------*/
function imageGallery() {
    
    // キャプチャー画像のロールオーバー
    $('#imageGallery li').append('<img src="/works/img/img_01.png" alt="" class="frame" />');
    $('.frame').hide();
    $('#imageGallery li.active').children('.frame').show();
    
    $('#imageGallery li').hover(function() {
        var classJudgment = $(this).attr('class');
        if(classJudgment !== 'active') {
            $(this).children('.frame').stop(false, true).fadeIn('fast');
        }
    }, function() {
        var classJudgment = $(this).attr('class');
        if(classJudgment !== 'active') {
            $(this).children('.frame').stop(false, true).fadeOut();
        }
    });
    
    // キャプチャーをクリックした際の動き
	$('#imageGallery li').click(function() {
	   var classJudgment = $(this).attr('class');
	   if(classJudgment !== 'active') {
    	   var changeImg = $(this).children('a').attr('href');
    	   $('#imgArea').children('img').attr('src', changeImg);
    	   $('#imageGallery li.active').children('.frame').stop(false, true).fadeOut();
    	   $('#imageGallery li.active').removeClass('active');
    	   $(this).attr('class', 'active');
    	   $('#imageGallery li.active').children('.frame').show();
        }
        return false;
	});
	
	// 画像をクリックした際の動き
	$('#imgArea').click(function(){
	   var listLength = 0, listPotision;
	   $('#imageGallery li').each(function() {
	       listLength++;
	       var classJudgment = $(this).attr('class');
	       if(classJudgment == 'active') {
	           listPotision = listLength;
	       }
	   });
	   
	   if(listPotision == listLength) {
	       var changeImg = $('#imageGallery li:first').children('a').attr('href');
	       $(this).children('img').attr('src', changeImg);
	       $('#imageGallery li.active').children('.frame').stop(false, true).fadeOut();
	       $('#imageGallery li.active').removeClass('active');
	       $('#imageGallery li:first').attr('class', 'active');
    	   $('#imageGallery li.active').children('.frame').show();
	   } else {
	       var changeImg = $('#imageGallery li:eq(' + listPotision + ')').children('a').attr('href');
	       $(this).children('img').attr('src', changeImg);
	       $('#imageGallery li.active').children('.frame').stop(false, true).fadeOut();
	       $('#imageGallery li.active').removeClass('active');
	       $('#imageGallery li:eq(' + listPotision + ')').attr('class', 'active');
    	   $('#imageGallery li.active').children('.frame').show();
	   }
	});
	
}
$(document).ready(imageGallery);

/*----------------------------------------------------
    JSのonoff環境に対応
----------------------------------------------------*/
function worksH3(){
    $('div.tabPanel > h3').hide();
}
$(document).ready(worksH3);

/*----------------------------------------------------
    Google Map API
----------------------------------------------------*/
function gMap(){
    var mapdiv = document.getElementById('map_canvas');
    if(mapdiv) {
        var point = new google.maps.LatLng(34.990241, 135.743168);
        var myOptions = {
            zoom: 17,
            center: point,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
        };
        var map = new google.maps.Map(mapdiv, myOptions);
        var marker = new google.maps.Marker({map: map, position: map.getCenter()});
    }
}
$(document).ready(gMap);