/**
 *
 */
ett_slideshow = Class.create({
    initialize :function (id, slides, options){

        this.viewarea = $(id);
        this.Infs = slides;
        this.showEle = null;
        this.hideEle = null;
        this.imagesElem = new Array();


        this.options = $H({
            interval : 5,
            duration : 0.5
        });
        this.options.update(options);
        this.options.set('interval', parseInt(this.options.get('interval') * 1000));


        //ulActiveElem = document.createElement('ul');
        //ulActiveElem.className = 'ett_slideshow_navi';

        ulNoneElem = document.createElement('ul');
        ulNoneElem.className = 'ett_slideshow_navi';
        for(var i = 0; i < this.Infs.length; i++){
            tag = id + "-inImg" + i.toPaddedString(3);
            imgElem = document.createElement('img');
            imgElem.id = tag;
            imgElem.src = this.options.get('dir') + this.Infs[i].img;
            Element.setStyle(imgElem,{
                position:'absolute',
                display : 'none',
                zIndex  : 0
            });
            if(i == 0){
                imgElem.style.display = 'block';
            }
            this.viewarea.appendChild(imgElem);
            this.imagesElem.push(tag);


            //none用
            liElem = document.createElement('li');
            aElem = document.createElement('a');
            
            spanElem = document.createElement('span');
            spanElem.id = 'btnSlideshowNavi_'+i;
            if(i == 0){
                spanElem.style.backgroundImage = 'url('+ this.options.get('dir') +'num0'+ (i+1) +'_ov.png' +')';
            }else{
                spanElem.style.backgroundImage = 'url('+ this.options.get('dir') +'num0'+ (i+1) +'.png' +')';
            }
            aElem.appendChild(spanElem);

//            imgElem = document.createElement('img');
//            imgElem.id = 'btnSlideshowNavi_'+i;
//            imgElem.src = this.options.get('dir') +'num0'+ (i+1) +'.png';
//            imgElem.style.zIndex = '10';
//            if(i==0){
//                aElem.style.visibility = 'hidden';
//            }else{
//                aElem.style.visibility = 'visible';
//            }
            aElem.href = 'javascript:void(0);';
            Event.observe( aElem, 'click', this.clickSlide.bindAsEventListener(this));

            //aElem.appendChild(imgElem);
            liElem.appendChild(aElem);
            ulNoneElem.appendChild(liElem);



        }
        this.viewarea.appendChild(ulNoneElem);



        //詳細こちらボタン
        imgElem = document.createElement('img');
        imgElem.id='main_btn';
        imgElem.src = this.options.get('dir') + 'main_btn.gif';
        this.viewarea.appendChild(imgElem);
        Event.observe( imgElem , 'click', this.slideClick.bindAsEventListener(this));


        this.nowDispCnt = 0;
        this.maxDispCnt = this.Infs.length;


        this.timerID = setInterval(this.changeSlide.bind(this), this.options.get('interval'));

    },

    slideClick : function(){
        location.href = this.Infs[this.nowDispCnt].anchor;
    },


    clickSlide : function(event){
        clearInterval(this.timerID);


        var old = this.nowDispCnt;
        this.hideElem = $(this.imagesElem[this.nowDispCnt]);

        var elem = Event.element(event);
        var s = elem.id.split('_');
        this.nowDispCnt = parseInt(s[1]);

        this.showElem = $(this.imagesElem[this.nowDispCnt]);


        this.hideElem.style.zIndex = '1';
        this.showElem.style.display = 'block';
        this.showElem.style.zIndex = '2';


        this.imagesElem.each(
            function(item){
                //alert(item);
                if( item == this.showElem.id  ){
                    $(item).style.zIndex = '1';
                }else{
                    $(item).style.zIndex = '0';
                }
            }.bind(this)
        );

        $('btnSlideshowNavi_'+old).style.backgroundImage = 'url('+this.options.get('dir') +'num0'+ (old +1) +'.png)' ;
        $('btnSlideshowNavi_'+this.nowDispCnt).style.backgroundImage = 'url('+ this.options.get('dir') +'num0'+ (this.nowDispCnt+1) +'_ov.png)';

       
        this.timerID = setInterval(this.changeSlide.bind(this), this.options.get('interval'));

    },

    changeSlide : function(){
        var old = this.nowDispCnt;
        this.hideElem = $(this.imagesElem[this.nowDispCnt]);

        this.nowDispCnt += 1;
        if(this.nowDispCnt >= this.maxDispCnt){
            this.nowDispCnt = 0;
        }
        this.showElem = $(this.imagesElem[this.nowDispCnt]);


        this.showElem.style.display = 'none';
        this.showElem.style.zIndex = '2';
        this.hideElem.style.zIndex = '1';


        //alert(this.showElem.id);
        Effect.Appear(this.showElem, {
            duration: this.options.get('duration'),
            afterFinish:function(){

                this.imagesElem.each(
                    function(item){
                        //alert(item);
                        if( item == this.showElem.id  ){
                            $(item).style.zIndex = '1';
                        }else{
                            $(item).style.zIndex = '0';
                        }
                    }.bind(this)
                );
            }.bind(this)
        });

        $('btnSlideshowNavi_'+old).style.backgroundImage = 'url('+this.options.get('dir') +'num0'+ (old +1) +'.png)' ;
        $('btnSlideshowNavi_'+this.nowDispCnt).style.backgroundImage = 'url('+ this.options.get('dir') +'num0'+ (this.nowDispCnt+1) +'_ov.png)';


        //$('btnSlideshowNavi_'+old).style.visibility = 'hidden';
        //$('btnSlideshowNaviActive_'+this.nowDispCnt).tyle.visibility = 'visible';

    }
});