$(function(){

	var numS = 56;	/* number of small images. change m/gallery.php, too */
	var numL = 19;	/* number of large images */
	var pos  = Math.floor(Math.random() * numS);
	var posL = Math.floor(Math.random() * numL);
	
	/* init large image */
    var imgLSrc = "L" + getZero(posL) + posL + ".jpg";
	$("#img_L0").hide()
	.attr("src", "img/top/" + imgLSrc)
	.attr("alt", imgLSrc)
	.attr("title", imgLSrc)
	.fadeIn(3000);
	
	/* init small images */
	for (i = 0; i < 11; i++ ) {
        var imgSsrc = "S" + getZero(pos) + pos + ".jpg";
		$("#img_S" + i)
			.hide()
			.attr("src", "img/top/" + imgSsrc)
			.attr("alt", imgSsrc)
			.attr("title", imgSsrc)
			.show();
		pos = (pos + 1) % numS;
	}
	
	/* click small image */
	$("td.imgS").not("#startPuzzle").click(function(){
        var imgSsrc = "S" + getZero(pos) + pos + ".jpg";
        pos = (pos + 1) % numS;
		$(this).children().each(function(){
            $.get("img/top/" + imgSsrc);
    		$(this).slideUp(1000, function(){
			$(this).attr("src", "img/top/" + imgSsrc)
			.attr("alt", imgSsrc)
			.attr("title", imgSsrc)
			.slideDown(1000);
            })
		});
		return false;
	});
	
	$("#startPuzzle").mouseover(function(){
		$(this).css("background-color", "#FFFFFF");
		$("#img_S10").fadeTo("fast", 0.75);
	});
	
	$("#startPuzzle").mouseout(function(){
		$(this).css("background-color", "#217b3e");
		$("#img_S10").fadeTo("fast", 1.0);
	});
	
	$("#startPuzzle").click(function(){
		showPuzzle("img/top/L" + getZero(posL) + posL + ".jpg");
		posL = (posL + 1) % numL;
		return false;
 	});	
	
	/* click large image */
    $("#img_L0").click(function(){
  		posL = (posL + 1) % numL;
        var imgLSrc = "L" + getZero(posL) + posL + ".jpg";
        $.get("img/top/" + imgLSrc);
        $(this).fadeOut(2000, function(){
            $(this).attr("src", "img/top/" + imgLSrc)
            .attr("alt", imgLSrc)
            .attr("title", imgLSrc)
            .fadeIn(2000);
        });
		return false;
	});
	
})

function getZero(pos) {
	if (pos >= 1000) {
		zero = "";
	} else if (pos >= 100) {
		zero = "0";
	} else if (pos >= 10) {
		zero = "00";
	} else {
		zero = "000";
	}
	return zero;
}

function goHome() {
	location.href = "/";
}

function showPuzzle(src) {
	$("#footer").hide();
	$("td.imgS").remove();

	$("td.imgL").css("cursor", "default")
	.css("text-align", "left")
	.css("color", "#FFFFFF")
	.css("padding-left", "140px")
	.css("padding-top", "10px")
	.css("padding-bottom", "10px")
	.append(" <p>（遊び方） <br /> <strong>[シャッフル]</strong> でパズルスタート。" 
	+ "空白に隣接する写真のピースをクリックして移動させ、画像を完成させてください。<br />"
	+ " <strong>[正解図]</strong> で完成画像表示。もう一度クリックで元に戻る。</p>");

	var settings = { 
	    rows: 4,                    // number of rows [3 ... 9] 
	    cols: 4,                    // number of columns [3 ... 9] 
	    hole: 16,                   // initial hole position [1 ... rows*columns] 
	    shuffle: false,             // initially show shuffled pieces [true|false] 
	    numbers: false,              // initially show numbers on pieces [true|false] 
	    language: 'en',             // language for gui elements [language code] 
	 
	    // display additional gui controls 
	    control: { 
	        shufflePieces: true,    // display 'Shuffle' button [true|false] 
	        confirmShuffle: true,   // ask before shuffling [true|false] 
	        toggleOriginal: true,   // display 'Original' button [true|false] 
	        toggleNumbers: true,    // display 'Numbers' button [true|false] 
	        counter: true,          // display moves counter [true|false] 
	        timer: true,            // display timer (seconds) [true|false] 
	        pauseTimer: true        // pause timer if 'Original' button is activated 
	                                // [true|false] 
	    }, 
	 
	    // perform actions when the puzzle is solved sucessfully 
	    success: { 
	        fadeOriginal: true,    // cross-fade original image [true|false] 
	        callback: undefined,    // callback a user-defined function [function] 
	                                // the function is passed an object as its argument 
	                                // which includes the fields 'moves' and 'seconds' 
	        callbackTimeout: 300    // time in ms after which the callback is called 
	    }, 
	 
	    // animation speeds and settings 
	    animation: { 
	        shuffleRounds: 3,       // number of shuffle rounds [1 ... ] 
	        shuffleSpeed: 800,      // time in ms to perform a shuffle round 
	        slidingSpeed: 200,      // time in ms for a single move 
	        fadeOriginalSpeed: 600  // time in ms to cross-fade original image 
	    }, 
	 
	    // additional style information not specified via css 
	    style: { 
	        gridSize: 1,            // space between two pieces in px 
	        overlap: true,          // if true, adjacent piece borders will overlap 
	                                // applies only if gridSize is set to 0 
	        backgroundOpacity: 0.1  // opacity of the original image behind the pieces 
	                                // [0 ... 1] (0 means no display) 
	    } 
	} 
	
	var texts = { 
	    shuffleLabel:           'シャッフル', 
	    toggleOriginalLabel:    '正解図', 
	    toggleNumbersLabel:     '番号表示', 
	    confirmShuffleMessage:  'シャッフルしてもよろしいですか？', 
	    movesLabel:             '回', 
	    secondsLabel:           '秒' 
	}
 
	$("#img_L0").jqPuzzle(settings, texts);

	
}