/*
* Sx.Slide.js #20080416
* Script : Sx.Slide.js
* date    : 2008-04-16
* Authore : Yaku yakuball@naver.com
* license : MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* Class: Sx.Slide
*       ½æ³×ÀÏ¿¡ µû¶ó ¸ÞÀÎÀ̹ÌÁö°¡ Ãâ·Â µÇ´Â ½½¶óÀ̵å
*
* Options:
*        slideon - string - ½½¶óÀÌµå »ç¿ë ¿©ºÎ ( default: '1' ) »ç¿ë
*        mainimg - array  - ¸ÞÀÎÀ̹ÌÁö °¡·Î
*        thumbimg - array - ½æ³×ÀÏ À̹ÌÁö »çÀÌÁî
*        icon     -  ½ÃÀÛ , Á¤Áö ¹øÆ° ±âº» À̹ÌÁö
*        uploadDir - string »ç¿ëÀÚ À̹ÌÁö ¾÷·Îµå °æ·Î
*        playOff  - int - ½æ³×ÀÏ À§Ä¡ ***
*        interval - int - È¿°ú ½Ã°£
*        wait     - int - ±â´Ù¸®´Â ½Ã°£
*        effect   - string - È¿°ú  'fade','wipe','slide'
*        loop     - boolean  - ¹Ýº¹¿©ºÎ
*        direction - string - ¹æ¼§  //top|right|bottom|left|random|sasun
*        transition - È¿°ú
*/

if(typeof(Class) == 'undefined') alert('require [mootooos.js] in simplex');
if(!$type(Sx)) var Sx = new Object();
if(!$type(Sx.Slide))
{
    Sx.Slide = new Class({

        setOptions: function(options)
        {
            this.options={
                slideon   : '1' ,
                mainimg   : { 'width' : '425px'  , 'height': '425px' } ,
                thubmimg  : { 'width' : '58px'   , 'height': '58px' } ,
                icon      : { 'play_on' : '/cimg/photo/btn_play_on.gif' , 'play_off' : '/cimg/photo/btn_play_off.gif' , 'stop_on' : '/cimg/photo/btn_stop_on.gif' , 'stop_off' : '/cimg/photo/btn_stop_off.gif' } ,
                uploadDir : '/cimg/photo' ,
                playOff   : 1 ,
                interval: 500 ,
                duration: 1000 ,
                effect : 'random',
                loadingCls: 'loading',
                thumbnails: true ,
                wait: 500 ,
                loop: false ,
                thumbExt  : '_thumb' ,
                direction: 'random',
                transition: Fx.Transitions.linear
            };
            $extend(this.options, options || {});
            this.container.setStyles({
                position: 'relative',
                overflow: 'hidden'
            });
        },

        initialize: function(container,desc,images,options, otImages)
        {
            this.container   = $(container);
            this.description = $(desc);
            this.otherImage  = otImages;
            this.setOptions(options);

            this.txtList   = false;
            this.descList  = false;
            this.listLink  = false;
            this.imageObj  = false;


            // Main images Click popUp Image function Call
            if(this.options.onClick){
                this.container.addEvent('click', function(){
                    this.options.onClick(this.imageObj.src);
                }.bind(this));
            }

            // À̹ÌÁö ÀúÀå °ø°£ »ý¼º
            this.imagesHolder = new Element("div").setStyles({
                position: 'absolute',
                overflow: 'hidden',
                top: this.container.getStyle('height'),
                left: 0,
                width:  '0px',
                height: '0px',
                display: 'none'
            }).injectInside(this.container);

            //À̹ÌÁö »ý¼º
            this.images   = this.makeImages(images);

            // ·Îµù¹Ù »ý¼º
            this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
                position: 'absolute',
                top: 0,
                left: 0,
                zIndex: 3,
                display: 'none',
                width:  this.container.getStyle('width'),
                height: this.container.getStyle('height')
            }).injectInside(this.container);

            // ¿À·¡µÈ À̹ÌÁö »ý¼º
            this.oldImage = new Element('div').setStyles({
                position: 'absolute',
                overflow: 'hidden',
                top: 0,
                left: 0,
                opacity: 0,
                width:  this.container.getStyle('width'),
                height: this.container.getStyle('height')
            }).injectInside(this.container);

            this.newImage = this.oldImage.clone();
            this.newImage.injectInside(this.container);


            this.timer = 0;
            this.image = -1;
            this.imageLoaded = 0;
            this.stopped = true;
            this.started = false;
            this.animating = false;


        },

        getPlayOff : function()
        {
            return this.options.playOff;
        },

        makeImages: function(images)
        {
            //thumail À̹ÌÁö »ý¼º
            if($type(images) == 'string' && !this.options.thumbnails){
                var imageList = [];
                $$('.'+images).each(function(el){
                    imageList.push(el.src);
                    el.injectInside(this.imagesHolder);
                },this);
                this.images = imageList;
            }else if($type(images) == 'string' && this.options.thumbnails){
                var imageList = [];
                var srcList   = [];
                var txt       = [];
                var desc      = [];
                var list_link = [];
                this.thumbnails = $$('.'+images);
                this.thumbnails.each(function(el,i){
                    if(el.href) {
                        srcList.push(el.href);
                        imageList.push(el.getElement('img'));
                        txt.push(el.title);
                        desc.push($('desc_'+i).innerHTML);
                        list_link.push(document.getElementById(el.id).getAttribute('link'));
                        el.href = 'javascript:;';
                        el.addEvent('click',function(){
                            this.play(i);
                            this.stop();

                        }.bind(this,el,i));
                    }
                },this);
                this.images = srcList;
                this.thumbnailImages = imageList;
                this.txtList   = txt;
                this.descList  = desc;
                this.listLink  = list_link;
            }else{
                this.images = images;
            }
            return this.images;
        },

        load:function()
        {
            $clear(this.timer);
            this.loading.setStyle('display','block');
            this.image++;
            var img  = this.images[this.image];
            var txt  = this.txtList[this.image];
            var desc = this.descList[this.image];
            var lk   = this.listLink[this.image];
            delete this.imageObj;

            var img_html="";
            var s_img       = this.otherImage[this.image][this.image];
            var thumb       = this.options.thumbExt;
            var userdir     = this.options.uploadDir;
            var thumbWidth  = this.options.thubmimg.width;
            var thumbHeigth = this.options.thubmimg.height;
            var i = 0;
            var tmp = this.image;

            img_html += "<table width=100% cellspacing=0 border=0><tr>";
            img_html += "<td width='25px' valign='middle'>&nbsp;</td>";
            s_img.each(function(el,index){
                if(el){

                    if( i < 7 ) {
                        var temp = [];
                        temp[0] = getFileName(el);
                        temp[1] = getFileExtension(el);
                        var thumbfile= temp[0] +  '.'  + temp[1];
                        img_html +="<td>";
                        img_html +="<a href=\"javascript:changeImg('"+ el + "');\"><img src='"+thumbfile+"' border='0' width='" + thumbWidth + "' height='"+ thumbHeigth + "' /></a>";
                        img_html +="</td>";
                    }
                    i++;

                    if( i == 8)
                    {
                        img_html += "<td width='25px' valign='middle'>";
                        img_html +="<a href=\"javascript:subMove('8' , '"+ tmp + "');\" class='arrow'><img src='/cimg/btn_arrowRight_small.gif' border='0' align='absmiddle' style='width:12px;height:25px;border:0px;' /></a>";
                        img_html += "</td>";
                    }
                }
            });
            img_html += "</tr></table>";

            $('other-images').innerHTML = img_html;
            $('subject').innerHTML  = "<a href='" + lk + "'  style='color:#0080CE;font-size:11px;'>" + txt + "</a>";
            $('viewLink').href= lk;
            this.description.innerHTML = desc;

            //var rege = new RegExp(/<img(.*?)[^\>]+>/g);
            doLoad = true;
            this.imagesHolder.getElements('img').each(function(el){
                var src = this.images[this.image];
                var desc =  this.txtList[this.image];
                if(el.src == src){
                    this.imageObj = el;
                    doLoad = false;
                    this.add = false;
                    this.show();
                }
            },this);



            this.add = true;
            this.imageObj = new Asset.image(img,{onload:this.show.bind(this)});
            this.imageObj.setStyles({width:this.options.mainimg.width,height:this.options.mainimg.height});

        },

        show:function(add)
        {
            if(this.add){ this.imageObj.injectInside(this.imagesHolder);}
            this.newImage.setStyles({ zIndex: 1, opacity: 0 });

            var img = this.newImage.getElement('img');

            if(img){
                img.replaceWith(this.imageObj.clone());
            }else{
                var obj = this.imageObj.clone();
                obj.injectInside(this.newImage);
            }

            this.imageLoaded = this.image;

            if(this.options.thumbnails)
            {
                if(this.options.backgroundSlider){
                    var elT = this.thumbnailImages[this.image];
                    this.bgSlider.move(elT);
                    this.bgSlider.setStart(elT);
                }else{
                    this.thumbnails.each(function(el,i){
                        el.removeClass(this.options.thumbnailCls);
                        if(i == this.image){
                            el.addClass(this.options.thumbnailCls);
                        }
                    },this);
                }

            }
            if(this.options.effect == "none")this.stop();
            else this.effect();
        },

        effect: function(){
            this.animating = true;
            this.effectObj = this.newImage.effects({duration: this.options.duration,transition: this.options.transition    });
            var myFxTypes = ['fade','wipe','slide'];
            var myFxDir   = ['top','right','bottom','left','sasuntop' , 'sasunbottom'];
            if(this.options.effect == 'fade'){    this.fade();
            }else if(this.options.effect ="slide"){
                if(this.options.direction == 'random'){
                    this.setup(myFxDir[Math.floor(Math.random()*(5+1))]);
                }else{
                    this.setup(this.options.direction);
                }
                this.slide();
            }else if(this.options.effect == 'wipe'){
                if(this.options.direction == 'random'){
                    this.setup(myFxDir[Math.floor(Math.random()*(5+1))]);
                }else{
                    this.setup(this.options.direction);
                }
                this.wipe();
            }else if(this.options.effect == 'none'){
                this.none();
            }else if(this.options.effect == 'random'){
                var type = myFxTypes[Math.floor(Math.random()*(2+1))];
                if(type != 'fade'){
                    var dir = myFxDir[Math.floor(Math.random()*(5+1))];
                    if(this.options.direction == 'random'){
                        this.setup(dir);
                    }else{
                        this.setup(this.options.direction);
                    }
                }else{
                    this.setup();
                }
                this[type]();
            }
        },

        wait: function(){
            this.timer = this.load.delay(this.options.wait,this);
        },

        playCheck : function(btn)
        {
            var off = this.options.playOff;

            if(off == 1 || off == 2)
            {
                if(btn == 'on'){
                    $('playImg').src = this.options.icon.stop_on;
                }else{
                    $('playImg').src = this.options.icon.play_on;
                }
            }else
            {
                if(btn == 'on'){
                    $('playOn').src  = this.options.icon.play_off;
                    $('playOff').src = this.options.icon.stop_on;
                }else{
                    $('playOn').src  = this.options.icon.play_on;
                    $('playOff').src = this.options.icon.stop_off;
                }
            }
        },

        play:function(num)
        {

            if(this.stopped)
            {
                if(num > -1){this.image = num-1};
                if(this.image < this.images.length){
                    this.stopped = false;
                    if(this.started){
                        this.next();
                    }else{
                        this.load();
                    }
                    this.started = true;
                }
            }

            if(this.options.slideon == '0') this.stop();
            else this.playCheck('on');
        },

        stop: function()
        {
            $clear(this.timer);
            this.stopped = true;
            this.playCheck('off');
        },

        next: function(wait)
        {

            var doNext = true;
            if(wait && this.stopped){ doNext = false; }
            if(this.animating){ doNext = false;    }
            if(doNext){
                //this.cloneImage();
                $clear(this.timer);
                if(this.image < this.images.length-1){
                    if(wait){
                        this.wait();
                    }else{
                        this.load();
                    }
                }else{
                    if(this.options.loop){
                        this.image = -1;
                        if(wait){
                            this.wait();
                        }else{
                            this.load();
                        }
                    }else{
                        this.stopped = true;
                    }
                }
            }
        },

        previous: function(){
            if(this.imageLoaded == 0){
                this.image = this.images.length-2;
            }else{
                this.image = this.imageLoaded-2;
            }
            this.next();
        },

        cloneImage: function(){

            var img = this.oldImage.getElement('img');

            if(img){
                img.replaceWith(this.imageObj.clone());
            }else{
                var obj = this.imageObj.clone();
                obj.injectInside(this.oldImage);
            }

            this.oldImage.setStyles({zIndex: 0,top: 0,left: 0,opacity:1});
            this.newImage.setStyles({opacity:0});
        },

        setup: function(dir)
        {
            if(dir == 'top'){
                this.top = -this.container.getStyle('height').toInt();
                this.left = 0;
                this.topOut = this.container.getStyle('height').toInt();
                this.leftOut = 0;

            }else if(dir == 'right'){
                this.top = 0;
                this.left = this.container.getStyle('width').toInt();
                this.topOut = 0;
                this.leftOut = -this.container.getStyle('width').toInt();

            }else if(dir == 'bottom'){
                this.top = this.container.getStyle('height').toInt();
                this.left = 0;
                this.topOut = -this.container.getStyle('height').toInt();
                this.leftOut = 0;

            }else if(dir == 'left'){
                this.top = 0;
                this.left = -this.container.getStyle('width').toInt();
                this.topOut = 0;
                this.leftOut = this.container.getStyle('width').toInt();
            }else if(dir == 'sasuntop'){
                this.top =  -this.container.getStyle('width').toInt();
                this.left    = -this.container.getStyle('width').toInt();
                this.topOut  = 0;
                this.leftOut = 0;
            }else if(dir == 'sasunbottom'){
                this.top =  this.container.getStyle('width').toInt();
                this.left    = this.container.getStyle('width').toInt();
                this.topOut  = 0;
                this.leftOut = 0;
            }else{
                this.top = 0;
                this.left = 0;
                this.topOut = 0;
                this.leftOut = 0;
            }
        },

        fade: function()
        {
            if(this.options.slideon == '0')  this.effectObj.start({ opacity: [1    ,1] });
            else  this.effectObj.start({ opacity: [0,1] });
            var duration = this.options.duration;

            this.resetAnimation.delay(duration+90,this);
            if(!this.stopped) this.next.delay(duration+100,this,true);
        },

        slide: function()
        {
            this.effectObj.start({top:[this.top,0],left: [this.left,0],opacity: [0,1] });
            this.resetAnimation.delay(this.options.durationthis);
            if(!this.stopped) this.next.delay(this.options.duration,this,true);
        },

        wipe: function(){
            this.oldImage.effects({
                duration: this.options.duration,
                transition: this.options.transition
            }).start({
                top:  [0,this.topOut],
                left: [0, this.leftOut]
            })
            this.effectObj.start({
                top: [this.top,0],
                left: [this.left,0],
                opacity: [1,1]
            },this);
            this.resetAnimation.delay(this.options.duration+90,this);
            if(!this.stopped){ this.next.delay(this.options.duration+100,this,true); }
        },

        none: function()
        {
            this.resetAnimation();
            this.resetAnimation.delay(this.options.duration+90,this);
            if(!this.stopped){ this.next.delay(this.options.duration+100,this,true); }
        },

        resetAnimation: function()
        {
            this.animating = false;
        },

        changeEffect : function(effect,dir)
        {
            if(this.doNexting())
            {
                this.stop();
                this.options.effect = effect;
                this.options.direction = dir;
                this.play();
            }
        },

        setTimer : function(tm)
        {
            if(this.doNexting())
            {
                this.stop();
                this.resetAnimation();
                this.options.wait = tm;
                this.play();
            }
        },

        imgChange : function(img)
        {
            if(this.doNexting())
            {
                this.stop();
                var imgSrc = img;
                var old = this.options.duration;
                if(this.options.slideon = '1') this.options.duration = this.options.interval;
                this.imageObj = new Asset.image(imgSrc,{onload:this.show.bind(this)});
                this.imageObj.setStyles({width:this.options.mainimg.width,height:this.options.mainimg.height});
            }
        },

        doNexting: function()
        {
            var doNext = true;
            if(this.animating){ doNext = false;    }
            return doNext;
        },

        slideOnChange : function(swc)
        {
            if(swc == 'on') this.options.slideon = '1';
            else  this.options.slideon = '0';
        },

        setOptionsInterval : function(val)
        {
            this.options.interval = val;
        }

    });
}