var transitionScroller ={
    //by Peri http://www.ptzeka.com * please don't remove *
    //settings
    autostart : true,
    speed : 5, //in seconds
    maxTransitions : 25, // stop rotating after this number, so that if someone leaves the browser on, you don't waste their power
    thumb_bottom_spacing : 10,
    thumb_right_spacing : 10,
    //vars
    count : null,
    z : null,
    state : 0, //1 for play next, 0 for stop
    cPanel :0, // current panel
    nPanel :null,//next panel
    div : null,
    items : null,
    thumbs : null,
    previews : null,
    fx : null,
    previewFX : [],
    playImg : null,
    errorMsg : "Incorrect setup",
    init : function(div)
    {
        this.fx = new Anim();
        this.div = $(div);
        this.items = $(div,"DIV","item");
        this.thumbs = $(div,"DIV","thumbnail");
        this.previews = $(div,"DIV","preview");
        if(this.thumbs.length != this.items.length)
        {
            this.div.innerHTML = this.errorMsg;
            return false;
        }
        var l = this.thumbs.length;
        var obj = this;
        var x = this.thumb_right_spacing;
        var d;
        var h = 0;
        for(var i=l;i--;)
        {
            var imgLocus = GetLocus(this.items[i],1);
            imgLocus.h > h ? h = imgLocus.h : null;
            var thumb = this.thumbs[i];
            var preview = this.previews[i];
            if(preview)
            {
                this.previewFX[i] = new Anim();
                preview.tail = $(this.previews[i],"IMG","tail");
            }

            thumb.index = i;
            thumb.style.display = "block";
            d = GetLocus(thumb,1);
            thumb.style.bottom = this.thumb_bottom_spacing + "px";
            thumb.style.right = x + "px";
            x += d.w + this.thumb_right_spacing;
            thumb.onclick = function(){
                obj.count = 0;
                obj.getNextFrame(this);
            }
            thumb.onmouseover = function(event)
            {
                event? event = event : event = window.event;
                obj.preview(this,1);
            }
            thumb.onmouseout = function(event)
            {
                event? event = event : event = window.event;
                if(trueMouseOut(event,this))
                    obj.preview(this,0);
            }
        }
        this.div.style.height = h + "px";
        this.playImg = $(div,"IMG","play");
        this.playImg.style.display = "block";
        var loading = $(div,"IMG","loading");
        this.playImg.style.right = x + "px";
        this.playImg.style.bottom = this.thumb_bottom_spacing + d.h/2 - this.playImg.offsetHeight/2 + "px";
        this.playImg.onclick = function(){
            if(this.className.match("pause"))
                obj.stop();
            else
                obj.play(1);
        }
        this.div.removeChild(loading);
        this.thumbs[this.cPanel].className = "thumbnail selected";
        if(this.autostart == true)
            this.play();
    },
    play : function(skip)
    {
        this.playImg.className = "play pause";
        var obj = this;
        obj.count = 0;
        if(skip)this.getNextFrame();
        this.z = window.setInterval(function(){obj.getNextFrame()},obj.speed*1000);


    },
    stop : function()
    {
        if(this.z)
        {
            this.playImg.className = "play";
            window.clearInterval(this.z);
            this.z = null;
        }
    },
    getNextFrame : function(frame)
    {
        var f1;
        var f2;
        if(!frame)
        {
            f1 = this.cPanel;
            this.cPanel ++;
            this.cPanel > this.items.length-1 ? this.cPanel = 0 : null;
            f2 = this.cPanel;
        }
        else
        {
            frame = frame.index;
            if(this.thumbs[frame].className.match("selected"))
                return false;
            f1 = this.cPanel;
            f2 = frame;
            this.cPanel = frame;
            this.stop();
        }
        this.transition(f1,f2);

    },
    transition : function(f1,f2)
    {
        var th1 = this.thumbs[f1];
        var div1 = this.items[f1];
        var div2 = this.items[f2];
        var th2 = this.thumbs[f2];

        th1.className = "thumbnail";
        th2.className = "thumbnail selected";
        div1.style.display = "block";
        div2.style.filter = "alpha(opacity="+0+")";
        div2.style.opacity = 0;
        div2.style.display = "block";


        var obj = this;
        var start = [100,0];
        var end = [0,100];
        this.fx.init(
            start,end,
            function(v)
            {
                div1.style.opacity = v[0]/100;
                div1.style.filter = "alpha(opacity="+v[0]+")";
                div2.style.opacity = v[1]/100;
                div2.style.filter = "alpha(opacity="+v[1]+")";
            },6,
            function()
            {
                obj.count ++;
                if(obj.count > obj.maxTransitions)
                {
                    obj.stop();
                    return false;
                }
            }
        )
    },
    preview : function(thumb,state)
    {
        var index  = thumb.index;
        if(this.previews[index])
        {
            var el = this.previews[index];
            el.style.display = "block";
            var d1 = GetLocus(thumb,1);
            var d2 = GetLocus(el,1);
            var max = this.div.offsetWidth - d2.w - 10;
            var top = d1.y - d2.h - 10;
            var left = d1.x + d1.w/2 - d2.w/2;
            if(left>max)
            {
                left = max;
                el.className += " tailRight";
              el.tail.style.marginLeft = d2.w - el.tail.offsetWidth*1.25 + "px";
            }
            else
            {
                el.tail.style.marginLeft = d2.w/2 - el.tail.offsetWidth/2 + "px";
                el.className = el.className.replace("tailRight","")
            }
            var start;
            var end;
            if(!exists(this.previewFX[index]).z && state == 1)
            {
                start = [top+12,0];  //top , opacity;
            }
            else
            {
                start = [parseInt(el.style.top),parseInt(el.style.opacity)*100];

            }
            if(state == 0)
                end = [top+12,0]
            else
                end = [top+6,100];
            this.previewFX[index].init(
            start,end,
            function(v)
            {
                el.style.top = v[0] + "px";
                el.style.opacity = v[1]/100;
                el.style.filter = "alpha(opacity="+v[1]+")";
            },7,
            function()
            {
                if(state == 0)
                    el.style.display = "none";
            }
        )
            el.style.left = left  + "px";
            el.style.top = top  + "px";
        }
    }
}
onLoad(function(){
    transitionScroller.init("Transitions");
});