//new Image().src = "sam0002.png"; 
//new Image().src = "sam0001.png"; 
//new Image().src = "demo_0002s.jpg";
//new Image().src = "demo_0002.jpg";
//new Image().src = "demo_0001s.jpg";
//new Image().src = "demo_0001.jpg";
//ファイルサイズを複数使用するので、事前ロードは行いません
var clickTuch;
if (window.ontouchstart === undefined){clickTuch=1; }else if (window.ontouchstart === null){clickTuch=0;};
$(function(){
var sh; //= window.screen.height
var sw; //= window.screen.width
var shval; // popUp させた画像の高さ
var swval; // popUp させた画像の幅
var topval; // popUp させた画像の上端表示位置
var leftval; // popUp させた画像の表示左位置
var CamId;// 選択された画像のID
var imgUrl;//表示させる画像の格納場所とファイル名
function phopen(){
sh = $(window).height();//Window Inner Size の取得
sw = $(window).width();
if (sh < sw){// pc 又は landscape の場合 基準を高さにする
　　　　　　　　shval = Math.floor((sh*0.9)-35);//(高さ - ボタン高) * 90% を四捨五入(現在では四捨五入は必須では無い)
　　　　　　　　swval = Math.floor(shval*1.41); //写真の縦横比率 1.41 or 0.71
　　　　　}else if(sh > sw){// mobile or tablet の portrait の場合 幅を基準にする
swval = Math.floor(sw *0.9);
shval = Math.floor(swval * 0.71); 
};
topval = ((sh - shval) + 35) / 2;//表示の上端を決める(画面中央に配置 35 はクローズボタンの高さのmargin)
leftval = ((sw - swval) / 2); //表示の左位置を決める(画面中央に配置)
//スクリーンのサイズに合わせて画像ファイルを２種類用意しているのでその選択
if(CamId == "photo01"){ //画像01を選択した場合
if(swval <= 506){/*small size*/imgUrl = 'url("demo_0001s.jpg")';
}else{/*large size*/imgUrl = 'url("demo_0001.jpg")'};
}else if(CamId == "photo02"){ //画像02を選択した場合
if(swval <= 506){/*small size*/imgUrl = 'url("demo_0002s.jpg")';
}else{/*large size*/imgUrl = 'url("demo_0002.jpg")'};
};
$.when($(".shade").fadeIn(300).animate({'width': '50%'},700,'easeOutExpo'),
$("#photobox").css({'width':swval +'px','height':shval +'px','left':leftval +'px','top':topval +'px','background-image':imgUrl})
//↑は先にやっておきたいこと ↓は後からやりたいこと [$.when,done]を使う
).done(function(){$("#photobox").fadeIn(1200)});
};
function canvasclose(){$.when($('#photobox').fadeOut('slow')//クローズボタンに対しての処理
).done(function(){$('.shade').animate({'width': '0px'},700,'easeInExpo').fadeOut('slow');});
};
if(clickTuch===1){//クリック対応
$('.photo').on('click', function(){ CamId = $(this).attr("id"); return phopen(); });
$('#closebtn').on('click', function(){return canvasclose(); });
}else if(clickTuch===0){//タッチデバイス対応
var isTouch = false;
$('.photo').on('touchstart', function(){isTouch = true;})
.on('touchmove', function(){isTouch = false;})
.on('touchend', function(){ if(isTouch == true){ CamId = $(this).attr("id"); return phopen(); }; });
$('#closebtn').on('touchstart', function(){isTouch = true;})
.on('touchmove', function(){isTouch = false;})
.on('touchend', function(){if(isTouch == true){return canvasclose(); };});
};
});