Ext.ns("OXX.Slideshow");


OXX.Slide = Ext.extend(Object, {

    id: null,
    width: 0,
    height: 0,
    paper: null,
    rect: null,
    imgId: "",

    constructor: function(item, width, height, idx) {
        this.id = item.id;
        this.width = width,
        this.height = height


        var fxBox = document.createElement('div');
        fxBox.className = 'fxbox';
        item.appendChild(fxBox);
        this.paper = Raphael(fxBox, width, height);
        this.imgId = "fximg_" + idx.toString();


        this.rect = this.paper.rect(0, 0, width, height);
        this.rect.slide = this;
        this.rect.attr({ fill: "#E6E7E9", "stroke-width": "0", opacity: 0.9 });
        this.rect.onAnimation(function() {
            //console.log(this.attr("opacity") + ":" + this.slide.imgId);
            var curlVal = this.attr("opacity");
            //cvi_curl.modify(document.getElementById(this.slide.imgId), { size: this.attr("opacity")*250 });
        });

        this.imgEl = item.select("img.doc-image-full").item(0);
        this.imgEl.dom.id = this.imgId;


        //cvi_curl.add(document.getElementById(this.imgId), { size: 0, shadow: 0.6, invert: false });
        //   cvi_curl.modify(this.imgEl.dom, { size: 140, shadow: 0.3, invert: false });
    },

    hideAndShow: function(fx) {
        var t = this;
        fx.state = 1;
        fx.prevSlide().rect.animate({ opacity: 1.0, fill: "#E6E7E9" }, 2000, function() {
            fx.prevSlide().hide();
            t.show();
            t.rect.animate({ opacity: 0.0, fill: "#E6E7E9" }, 2000, function() {
                fx.state = 2;
            });
        });
    },

    hide: function() {
        Ext.fly(this.id).hide();
    },


    show: function() {
        Ext.fly(this.id).show();

    }
});



OXX.SlideshowFx = Ext.extend(Object, {

    slides: [],   // { id:ole, paper:null }

    currentSlideIdx: 0,

    state: 0,     // 0 - hideAndShow, 1-wait, 2-next

    constructor: function() {

    },
        
    prevSlide: function() {
        return this.slides[this.currentSlideIdx > 0 ? this.currentSlideIdx - 1 : this.slides.length - 1];    
    },

    currentSlide: function() {

        return this.slides[this.currentSlideIdx];
    },

    nextSlide: function() {

        return this.slides[this.currentSlideIdx < (this.slides.length - 1) ? this.currentSlideIdx + 1 : 0];
    },

    init: function() {
        this.wh = [Ext.fly('myslideshow').getWidth(), Ext.fly('myslideshow').getHeight()];

        Ext.select('.imgbox').each(function(item, i, idx) {
            var slide = new OXX.Slide(item, this.wh[0], this.wh[1], idx);
            //if (idx != this.currentSlideIdx) {
                slide.hide();  //toggleClass('hidebox');
            //}
            //else
            //    slide.show();

            this.slides[parseInt(idx)] = slide;
        }, this);

    },




    update: function() {
        
      //  console.log("state:" + this.state + " idx:" + this.currentSlideIdx)
        
        if (this.state == 0)
            this.currentSlide().hideAndShow(this);

        if (this.state == 2) {
            this.currentSlideIdx = (this.currentSlideIdx < this.slides.length - 1) ? (this.currentSlideIdx + 1) : 0;
            this.state = 0;            
        }
    },

    start: function() {
        var t = this;
        var task = {
            run: function() {
                t.update();
            },
            interval: 5000
        }


        Ext.TaskMgr.start(task);
    }
});




Ext.onReady(function() {

    var slideshow = new OXX.SlideshowFx();


    if (Ext.fly("myslideshow") != null) {
        slideshow.init();
        //slideshow.next();               
       slideshow.start();               
    }
    
});