var screenShotFrameId = 'screen-shot-frame'; //ul
var screenShotFrameSpan = 380; //px
var screenShotImgWidth = 280; //px
var screenShotImgListWidth; //px

var screenShotTitle = 'ss-title-list';
var screenShotMsg = 'ss-msg-list';

var thumbFrameId = 'thumb-frame'; //ul
var thumbFrameSpan = 60 ; // ☆サムネイルのスパン
var thumbImgWidth = 50; //   ☆サムネイルの画像サイズ
var thumbImgListWidth; //px

var thumbFrameSelectedId = 'thumb-selected';
var thumbFrameSelectedBorder = '3px solid red';

var imageId = 0;
var newImageId = 0;


var ssTitleList;
var ssMsgList;

// mootools Main
window.addEvent('domready', function() {

    ssTitleList = $$('#'+ screenShotTitle +' h1');
    ssMsgList = $$('#' + screenShotMsg + ' div');

    screenShotImgListWidth = screenShotFrameSpan * ssTitleList.length;
    thumbImgListWidth = thumbFrameSpan * ssTitleList.length - (thumbFrameSpan - thumbImgWidth) + 5;

    // set images
    setScreenShotImgList(screenShotFrameId, screenShotImgWidth, screenShotFrameSpan, screenShotImgListWidth);
    setScreenShotImgList(thumbFrameId, thumbImgWidth, thumbFrameSpan, thumbImgListWidth);


    changeScreenShot(0);

    // 選択済みサムネイルのスタイル
    with ( $(thumbFrameSelectedId).getElement('img') ) {
        setStyle("width", thumbImgWidth + "px");
        setStyle("height", (thumbImgWidth * 1.5) + "px");
    }


    $$('#thumb-frame img').each(function(image) {
        image.onclick = function() { 
            if (image.getAttribute('id')) { //選択中の場合を除外
                imageId = parseInt(image.getAttribute('id').match(/\d+/g)); // クリックしたサムネイルの順番
                changeScreenShot(imageId);
                
                return false;
            }
        }
    });
});


var changeScreenShot = function (imageId){
    var screenShotFrameLeft = - screenShotFrameSpan * imageId;
    var thumbFrameLeft = thumbFrameSpan * imageId;

    changeScreenShotMain(screenShotFrameId, screenShotFrameLeft);
    changeScreenShotMain(thumbFrameSelectedId, thumbFrameLeft);

    for ( var i=0; i < ssMsgList.length; i++ ) {
    	ssMsgList[i].setStyle("display", "none");
    	ssMsgList[imageId].setStyle("display", "block");
    	ssTitleList[i].setStyle("display", "none");
    	ssTitleList[imageId].setStyle("display", "block");
    };

}

var changeScreenShotMain = function (id,left) {
    $(id).set('tween',  {duration: 250});
    $(id).tween('left', left + "px");
}



// imgListの画像をセット
var setScreenShotImgList = function (id, width, listSpan, listWidth) {

    $(id).setStyle("width", listWidth + "px");
    for (i = 0; i < $$('#'+id+' li').length; i++) { 
        if( i == ($$('#'+id+' li').length-1) && id == thumbFrameId ){
            $$('#'+id+' li')[i].setStyle("width", width + "px");
        } else {
            $$('#'+id+' li')[i].setStyle("width", listSpan + "px");
        }

    }
/*
    var oLi;
    var oImg;
    for (i = 0; i < imageList.length; i++) {
        oLi = document.createElement('li');
        oImg = document.createElement('img');
        $(id).appendChild(oLi);

        oLi.appendChild(oImg);

        // set attribute
        oImg.setAttribute("src", imageList[i]);
        oImg.setAttribute("width", width);
        oImg.setAttribute("id", id + "img_" + i);
        oLi.setAttribute("id", id + "li_" + i);

        if( i == (imageList.length-1) && id == thumbFrameId ){
            $(id + "li_" + i).setStyle("width", width + "px");
        } else {
            $(id + "li_" + i).setStyle("width", listSpan + "px");
        }
    }
*/

}