function show_disp(n, c, cnt)
{

    var id = "photo";
    var id2 = "image_content";
    var url = "index.php";
    var pars = 
    {
        mode : 'detail_photo',
        c : c,
        no : n,
        cnt : cnt
    };

    $('image_content_updown').hide();
    $(id2).hide();
    new Ajax.Updater(id, url, {
        method:'post', 
        parameters: $H(pars).toQueryString(),
        onLoading: function() {
            $(id).innerHTML = '<span><img src="./icon/loading.gif" alt="loading..." /></span>';
            new Effect.Appear(id, {
                duration : .1
            });
        },
        onComplete: function() {
            var alt = $('main_photo').getAttribute('alt');
            new Effect.Appear(id, {
                queue: {
                    scope : 'show_disp',
                    limit : 1
                }
            });

            if (alt != "") {
                $(id2).innerHTML = alt;
                new Effect.Appear(id2, {
                    beforeFinish: function() {
                        moving_check('', '', 'image_content');
                    }
                });
            }
        }
    });
}
function next_thumb(bid, nid, appear, disappear, max)
{
    var ntagid = 'thumb_next';
    var btagid = 'thumb_back';

    new Effect.Fade(nid, {
        duration : .5,
        queue : {
            scope:'myscope',
            position:'end'
        }
    });
    new Effect.Appear(bid, {
        duration : .5,
        queue : {
            scope:'myscope',
            position:'end'
        },
        afterFinish: function() {
            moving_check('thumb_main', '', '');
        }
    });

    //back 戻って出るのは
    var b_ncnt = appear;
    var b_bcnt = disappear;

    //nextで表示するのは+1
    var n_ncnt = appear + 1;
    var n_bcnt = disappear + 1;

    //back
    var b_bid = 'img_' + b_bcnt;
    var b_nid = 'img_' + b_ncnt;

    //next
    var b_id = 'img_' + n_bcnt;
    var n_id = 'img_' + n_ncnt;

    if (b_bcnt >= 0) {

        $(btagid).innerHTML = '<a href="#" onclick="back_thumb(\''+b_bid+'\', \''+b_nid+'\', '+b_bcnt+', '+b_ncnt+', '+max+'); return false;"><img src="./icon/back.gif" width="16" height="16" alt="back" /></a>';
        new Effect.Appear(btagid, { 
            duration : .1
        });
    } else {
        new Effect.Fade(btagid, {
            duration : .5,
            queue : {
                scope:'myscope2',
                position:'end',
                limit:1
            }
        });
    }

    if (n_ncnt < max) {

        $(ntagid).innerHTML = '<a href="#" onclick="next_thumb(\''+n_id+'\', \''+b_id+'\', '+n_ncnt+', '+n_bcnt+', '+max+'); return false;"><img src="./icon/next.gif" width="16" height="16" alt="next" /></a>';;
        new Effect.Appear(ntagid, { 
            duration : .1
        });
    } else {
        new Effect.Fade(ntagid, {
            duration : .5,
            queue : {
                scope:'myscope3',
                position:'end',
                limit:1
            }
        });
    }
}
function back_thumb(bid, nid, appear, disappear, max)
{
    var ntagid = 'thumb_next';
    var btagid = 'thumb_back';

    new Effect.Fade(nid, {
        duration : .5,
        queue : {
            scope:'myscope',
            position:'end'
        }
    });

    new Effect.Appear(bid, {
        duration : .5,
        queue : {
            scope:'myscope',
            position:'end'
        },
        afterFinish: function() {
            moving_check('thumb_main', '', '');
        }
    });

    //back 戻って出るのは -1
    var b_ncnt = appear - 1;
    var b_bcnt = disappear - 1;

    //nextで表示するのは+1
    var n_ncnt = disappear;
    var n_bcnt = appear;

    //back
    var b_bid = 'img_' + b_bcnt;
    var b_nid = 'img_' + b_ncnt;

    //next
    var b_id = 'img_' + n_bcnt;
    var n_id = 'img_' + n_ncnt;

    if (b_ncnt >= 0) {
        $(btagid).innerHTML = '<a href="#" onclick="back_thumb(\''+b_nid+'\', \''+b_bid+'\', '+b_ncnt+', '+b_bcnt+', '+max+'); return false;"><img src="./icon/back.gif" width="16" height="16" alt="back" /></a>';
        new Effect.Appear(btagid, { 
            duration : .1
        });
    } else {
        new Effect.Fade(btagid, {
            duration : .5,
            queue : {
                scope:'myscope2',
                position:'end',
                limit:1
            }
        });
    }

    if (n_ncnt < max) {

        $(ntagid).innerHTML = '<a href="#" onclick="next_thumb(\''+n_id+'\', \''+b_id+'\', '+n_ncnt+', '+n_bcnt+', '+max+'); return false;"><img src="./icon/next.gif" width="16" height="16" alt="next" /></a>';
        new Effect.Appear(ntagid, { 
            duration : .1
        });
    } else {
        new Effect.Fade(ntagid, {
            duration : .5,
            queue : {
                scope:'myscope3',
                position:'end',
                limit:1
            }
        });
    }
}
function all_images_open(id)
{
    new Effect.toggle(id);

}

function sample_open(id)
{
    new Effect.toggle(id, 'slide', {duration:.8});

}

function open_cat(id, iconid) {
    if ($(id).style.display == "none") {
        $(iconid).src = './icon/cat_menu_minus.gif';
        new Effect.SlideDown(id, {
            duration: .8,
            queue : {
                scope:'myscope',
                position:'end',
                limit:1
            }
        });
    } else {
        $(iconid).src = './icon/cat_menu_plus.gif';
        new Effect.SlideUp(id, {
            duration : .3,
            queue : {
                scope:'myscope',
                position:'end',
                limit:1
            }
        });
    }
}

function open_arc(id, iconid) {
    if ($(id).style.display == "none") {
        $(iconid).src = './icon/cat_menu_minus.gif';
        new Effect.SlideDown(id, {
            duration: .8,
            queue : {
                scope:'myscope',
                position:'end',
                limit:1
            }
        });
    } else {
        $(iconid).src = './icon/cat_menu_plus.gif';
        new Effect.SlideUp(id, {
            duration : .3,
            queue : {
                scope:'myscope',
                position:'end',
                limit:1
            }
        });
    }
}

var timeTextID;
var pcnt = 0;
var count = 1000;
var countID;

function slideshow(allcnt)
{

    countdown(1);

    var d = pcnt - 1;
    var i1 = pcnt;
    var i2 = pcnt + 1;
    var i3 = pcnt + 2;

    if (d > -1) {

        new Effect.Fade('sam_' + i2, {
            duration : 1.0,
            delay : .8
        });

        new Effect.Puff('sam_' + i2, {
            duration: 1.0,
            delay : 1.0
        });

        new Effect.Puff('sam_' + d, {
            duration: 1.0,
            delay : .8
        });

        new Effect.Fade('contentBox', {
            duration:2.0
        });

        new Effect.Fade('now_count', {
            duration : 1.0,
            delay : .3
        });

        new Effect.Fade('img_' + i1, {
            duration : 1.5,
            afterFinish: function() {

                new Effect.Fade('cnt', {
                    duration : 1.5,
                    delay:.1,
                    afterFinishInternal: function() {
                        $('cnt').innerHTML = i2;
                        new Effect.Appear('cnt', {
                            duration:1.5,
                            delay:.1
                        });
                    }
                });

                $('p_' + i2).style.width="480px";
                $('p_' + i2).style.marginTop="0";
                $('p_' + i2).style.textAlign="center";

                new Effect.Appear('img_' + i2, {
                    duration : 1.5,
                    afterFinish: function() {

                        new Effect.Appear('now_count', {
                            duration : 1.0,
                            delay : .8
                        });

                        var content = $('img_' + i2).getAttribute('alt');
                        var width = $('img_' + i2).getAttribute('width');
                        var height = $('img_' + i2).getAttribute('height') - 25;

                        $('contentBox').hide();
                        viewContent('img_' + i2, content, width, height);
                        new Effect.Opacity("contentBox", {
                            from:0.1,
                            to:0.5,
                            duration:2.5,
                            delay:.8
                        });

                        $('p_' + d).hide();

                        $('p_' + i1).style.width="144px";
                        $('p_' + i1).style.marginTop="70px";
                        $('p_' + i1).style.textAlign="left";

                        new Effect.Appear('sam_' + i1, {
                            duration : 1.5,
                            delay : .3
                        });

                        $('p_' + i3).style.width="144px";
                        $('p_' + i3).style.marginTop="70px";
                        $('p_' + i3).style.textAlign="right";
                        $('p_' + i3).show();

                        new Effect.Appear('sam_' + i3, {
                            duration : 2.5,
                            delay : .8
                        });
                    }
                });
            }
        });
    } else {

        $('p_' + i2).style.width="480px";
        $('p_' + i1).style.width="144px";
        $('p_' + i3).style.width="144px";

        $('p_' + i1).style.marginTop="70px";
        $('p_' + i2).style.marginTop="0";
        $('p_' + i3).style.marginTop="70px";

        $('p_' + i1).style.textAlign="left";
        $('p_' + i2).style.textAlign="center";
        $('p_' + i3).style.textAlign="right";

        $('p_' + i1).show();
        $('p_' + i2).show();
        $('p_' + i3).show();

         new Effect.Appear('sam_' + i1, {
            duration : .1
        });

        new Effect.Appear('img_' + i2, {
            duration : 1.5,
            delay : .2,
            afterFinish: function() {
                var content = $('img_' + i2).getAttribute('alt');
                var width = $('img_' + i2).getAttribute('width');
                var height = $('img_' + i2).getAttribute('height') - 25;

                viewContent('img_' + i2, content, width, height);
                new Effect.Opacity("contentBox", {
                    from:0.1,
                    to:0.5,
                    duration:2.5,
                    delay:.8
                });
            }
        });

        new Effect.Appear('sam_' + i3, {
            duration : 2.5,
            delay : 1.5
        });
    }

    if (pcnt < allcnt) {
        pcnt++;
        clearTimeout(timeTextID);
        timeTextID = setTimeout("slideshow("+allcnt+")", 10000);
    } else {
        $('counter_disp').hide();

        new Effect.Appear('retry', {
            duration:3.0,
            delay : 5.0,
            afterFinish: function () {

                new Effect.Puff('all_pause', {
                    duration: 1.0,
                    delay : .3,
                    queue : {
                        scope:'myscope',
                        position:'end',
                        limit:1
                    },
                    afterFinish : function () {
                        new Effect.Appear('all_restart', {
                            duration: 1.0,
                            delay : .3,
                            queue : {
                                scope:'myscope2',
                                position:'end',
                                limit:1
                            }
                        });
                    }
                });
            }
        });
    }
}

function retry(all)
{
    var i1 = all;
    var i2 = all + 1;
    var i3 = all + 2;

    $('p_' + i1).hide();
    $('p_' + i2).hide();
    $('p_' + i3).hide();
    $('sam_' + i1).hide();
    $('img_' + i2).hide();
    $('sam_' + i3).hide();

    $('now_count').innerHTML = "";
    $('retry').hide();
    $('contentBox').hide();

    new Effect.Puff('all_restart', {
        duration: 1.0,
        delay : .6,
        queue : {
            scope:'myscope',
            position:'end',
            limit:1
        },
        afterFinish : function() {
            new Effect.Appear('all_pause', {
                duration: 1.0,
                delay : .3,
                queue : {
                    scope:'myscope2',
                    position:'end',
                    limit:1
                },
                afterFinish: function () {
                    pcnt = 0;
                    new Effect.Fade('cnt', {
                        duration : 1.0,
                        delay:.1,
                        afterFinishInternal: function() {
                            $('cnt').innerHTML = 1;
                            new Effect.Appear('cnt', {
                                duration:1.0,
                                delay:.1
                            });
                        }
                    });
                    slideshow(all);
                }
            });
        }
    });
}

function stop()
{
    clearTimeout(timeTextID);
    clearTimeout(countID);

    new Effect.Puff('all_pause', {
        duration: 1.0,
        delay : .1,
        queue : {
            scope:'myscope',
            position:'end',
            limit:1
        },
        afterFinish : function() {
            new Effect.Appear('all_start', {
                duration: 1.0,
                delay : .1,
                queue : {
                    scope:'myscope2',
                    position:'end',
                    limit:1
                }
            });
        }
    });

}

function start(all)
{

    new Effect.Puff('all_start', {
        duration: 1.0,
        delay : .1,
        queue : {
            scope:'myscope',
            position:'end',
            limit:1
        },
        afterFinish : function() {
            slideshow(all);
            new Effect.Appear('all_pause', {
                duration: 1.0,
                delay : 1.0,
                queue : {
                    scope:'myscope2',
                    position:'end',
                    limit:1
                },
                afterFinish:function() {
                    $('now_count').innerHTML = 10;
                }
            });
        }
    });

}

var timeout;
var y = 0;
var step = 2;

var timeout2;
var y2 = 0;
var step2 = 2;

var timeout3;
var y3 = 0;
var step3 = 2;

var counter;

function moving_down(id)
{

    if (y < 0){
        y = 0;
    }

    var e = $(id);

    if ($(id).scrollTop < $(id).scrollHeight - $(id).offsetHeight) {
        $(id).scrollTop = y;
        y = y + step;
        timeout=setTimeout("moving_down('"+id+"')", 50);
    }
}

function moving_up(id)
{
    if (y >= 0){
        $(id).scrollTop = y;
        y = y - step;
    }
    timeout=setTimeout("moving_up('"+id+"')", 50);
}

function moving_stop(){
    clearTimeout(timeout);
}

function moving2_down(id)
{

    if (y2 < 0){
        y2 = 0;
    }

    var e = $(id);

    if ($(id).scrollTop < $(id).scrollHeight - $(id).offsetHeight) {
        $(id).scrollTop = y2;
        y2 = y2 + step2;
        timeout2=setTimeout("moving2_down('"+id+"')", 50);
    }
}

function moving2_up(id)
{
    if (y2 >= 0){
        $(id).scrollTop = y2;
        y2 = y2 - step2;
    }
    timeout2=setTimeout("moving2_up('"+id+"')", 50);
}

function moving2_stop(){
    clearTimeout(timeout2);
}
function moving3_down(id)
{

    if (y3 < 0){
        y3 = 0;
    }

    var e = $(id);

    if ($(id).scrollTop < $(id).scrollHeight - $(id).offsetHeight) {
        $(id).scrollTop = y3;
        y3 = y3 + step3;
        timeout3=setTimeout("moving3_down('"+id+"')", 50);
    }
}

function moving3_up(id)
{
    if (y3 >= 0){
        $(id).scrollTop = y3;
        y3 = y3 - step3;
    }
    timeout3=setTimeout("moving3_up('"+id+"')", 50);
}

function moving3_stop(){
    clearTimeout(timeout3);
}

function moving_check(id,id2,id3)
{
    if (id != "") {
        $(id).scrollTop = 0;
        if ($(id).scrollTop < $(id).scrollHeight - $(id).offsetHeight) {
            new Effect.Appear(id+'_updown');
        } else {
            new Effect.Fade(id+'_updown');
        }
    }
    if (id2 != "") {
        $(id2).scrollTop = 0;
        if ($(id2).scrollTop < $(id2).scrollHeight - $(id2).offsetHeight) {
            new Effect.Appear(id2+'_updown');
        }
    }
    if (id3 != "") {
        $(id3).scrollTop = 0;
        if ($(id3).scrollTop < $(id3).scrollHeight - $(id3).offsetHeight) {
            new Effect.Appear(id3+'_updown');
        } else {
            new Effect.Fade(id3+'_updown');
        }
    }
}

function viewContent(id, text, width, y)
{

    var name = 'contentBox';

    var oLeft = 0;
    var oTop = 0;

    while (id) {
        oLeft += $(id).offsetLeft;
        oTop += $(id).offsetTop;
        id = $(id).offsetParent;
    }

    if ($(name)) {
        $(name).parentNode.removeChild($(name));
    }
    var contentBox = document.createElement('div');
    contentBox.style.position = 'absolute';
    contentBox.style.width = width + 'px';
    contentBox.style.left = oLeft + 'px';
    contentBox.style.top = (oTop + y) + 'px';
    contentBox.style.opacity = 0 / 100;
    contentBox.style.MozOpacity = 0 / 100;
    contentBox.style.KhtmlOpacity = 0 / 100;
    contentBox.style.filter = 'alpha(opacity=' + 0 + ')';
    contentBox.setAttribute('id', name);

    contentBox.appendChild(createText(text));
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(contentBox);

    function createText (text) {
        var textBox = document.createElement('div');
        textBox.appendChild(document.createTextNode(text));
        textBox.style.padding = '5px';
        return textBox;
    }
}
function countdown(md)
{

    if (md) {
        counter = 10;
    }

    if (counter < 6) {
        $('now_count').innerHTML = counter;
    } else {
        $('now_count').innerHTML = "";
    }

    if (counter > 0) {
        counter--;
    } else {
        counter = 0;
    }

    clearTimeout(countID);
    countID = setTimeout("countdown()", 1000);
}

function arcopen()
{
    new Effect.toggle('nonedisp');
}