var PhotoSlider = {
    Version: '1.0.0.1', 
    Name: 'PhotoSlider',
    Photos: new Array(),
    Count: 0, LoadCount: 0, LeftToRight: false, Runnable: true, Delay: 75, Width: 120,
    Container: null, Reference: null,

    Init: function(params) {
        //handler, args, target
        this.handler = params["handler"] ? params["handler"] : 'Callbacks.ashx';
        this.args = params["args"] ? params["args"] : 'a=photoslider';
        this.Container = params["container"] ? params["container"] : 'photoslider';
        this.Tag = params["tag"] ? params["tag"] : 'div';
        this.ClassName = params["classname"] ? params["classname"] : '';

        sendAJAX3(this.handler, this.args, this.Name + '.getResponse(httpRequest.responseText)');
    },
    getResponse: function(response) {
        var xml = LoadXMLText(response);
        if(!xml) return;
        var photos = xml.firstChild.childNodes;

        for(var index=0; index<photos.length; index++) {
            var obj = new Object();
            obj.loaded = false;
            obj.photo = new Image;
            obj.photo.src = photos[index].attributes[0].nodeValue;
            obj.photo.alt = photos[index].attributes[1].nodeValue;
            obj.photo.loaded = true;
            //obj.photo.onload = new Function(this.Name + '.onLoad(' + this.Count + ');');
            obj.tag = document.createElement(this.Tag);
            obj.tag.className = this.ClassName;
            obj.tag.innerHTML = photos[index].firstChild.nodeValue.replace('[img]', 
                '<img src="' + obj.photo.src + '" alt="' + obj.photo.alt + '" width="105" height="78" />');
            obj.tag.onmouseover = new Function(this.Name + '.OnMouseOver(' + this.Count + ');');
            obj.tag.onmouseout = new Function(this.Name + '.OnMouseOut(' + this.Count + ');');
            obj.tag.style.left = (this.Width * this.Count) + 'px';
            obj.left = (this.Width * this.Count);
            this.Photos.push(obj);
            this.Count++;
        }
        this.Create();
    },
    onLoad: function(index) {
        this.Photos[index].loaded = true;
        this.LoadCount++;
        if(this.LoadCount == this.Count) 
            this.Create();
    },
    Create: function() {
        this.Container = $get(this.Container);
        if(!this.Container) {
            setTimeout(this.Reference + '.Create()', 100);
            return;
        }
        this.Container.innerHTML = '';
        for(index=0; index<this.Count; index++)
            this.Container.appendChild(this.Photos[index].tag);
        this.TotalWidth = this.Count * this.Width;
        this.Reference = this.Name; 
        eval(this.Reference + '=this');
        setInterval(this.Reference + '.Run()', this.Delay);
    },
    Run: function() {
        if(!this.Runnable) return; 
        this.Runnable = false;

        // hoeft niet te roteren omdat alle foto's zichtbaar zijn
        if(this.TotalWidth < this.Container.offsetWidth) {
            // foto's centreren
            var padding = (this.Container.offsetWidth - this.TotalWidth) / (this.Count + 1);
            var left = padding;
            for(var index=0; index<this.Count; index++) {
                this.Photos[index].left += left;
                this.Photos[index].tag.style.left = this.Photos[index].left + 'px';
                this.Photos[index].tag.onmouseout = new Function();
                left += padding;
            }
            return;
        }
        
        for(var index=0; index<this.Count; index++) {
            var left = this.Photos[index].left;
            if(left < -this.Width) { 
                var p = index == 0 ? this.Photos[this.Count - 1] : this.Photos[index - 1];
                left = p.left + (left * -1);
            }
            else if(left >= (this.Count - 1) * this.Width) {
                left = -this.Width;
            }
            if(this.LeftToRight) left+= 1;
            else left-=1;
            this.Photos[index].left = left;
            this.Photos[index].tag.style.left = left + 'px';
        }
        this.Runnable = true;
    },
    OnMouseOver: function(index) {
        this.Runnable = false;
    },
    OnMouseOut: function(index) {
        this.Runnable = true;
        this.LeftToRight = this.Photos[index].left > 355;
    }
};

var PhotoCarousel = {
    Version: '1.0.0.1', Name: 'Photo Carousel', Author: 'Corné Harmsen, Octavalent V.O.F.',
    Count: 3, Index: 0,

    Init: function(params) {
        this.Container = $get(params["container"] ? params["container"] : 'photocarousel');
        this.ClassName = params["classname"] ? params["classname"] : 'active';
        this.Height = params["height"] ? params["height"] : 50;
        this.ImageText = $get(params["imagetext"] ? params["imagetext"] : 'imagecount');
        this.Photos = params["photos"] ? params["photos"] : new Array();
        this.Preview = $get(params["preview"] ? params["preview"] : 'img_preview');
        this.Type = params["type"] ? params["type"] : 'large';
        this.Width = params["width"] ? params["width"] : 66;
        this.ShowAll = params["showall"] ? params["showall"] : false;

        if(!this.Container || !this.Preview) { 
            alert('Container or Preview not found!\n' + this.Container + '\n' + this.Preview );
            return;
        }

        if(this.Photos[0] == null || this.Photos[0] == undefined) {
            if(this.Container.parentNode)
                this.Container.parentNode.className = this.Container.parentNode.className + ' hidden';
            else
                this.Container.className = this.Container.className + ' hidden';
            return;
        }

        var index = 0;
        while(this.Photos[index]) {
            var img = new Image();
            img.src = this.Photos[index]["src"];
            img.alt = this.Photos[index]["title"];
            if(index == 0) img.className = 'active';
            this.Photos[index] = img;
            index++;
        }
        this.Photos.length = index;
        this.Count = this.ShowAll || this.Photos.length < 3 ? this.Photos.length : 3;
        this.Show(0);
    },
    Switch: function(container1, container2, photocontainer, preview, type, showall) {
        container1 = $get(container1); container2 = $get(container2);
        this.Container = $get(photocontainer);
        this.Count = showall || this.Photos.length < 3 ? this.Photos.length : 3;
        this.Preview = $get(preview);
        this.Type = type;
        this.ShowAll = showall;

        if(!container1 || !container2 || !this.Container || !this.Preview || !this.Type) {
            alert('Error!\n' + container1 + '\n' + container2 + '\n' + this.Container + '\n' + this.Preview + '\n' + this.Type);
            return;
        }

        container1.style.display = 'block';
        container2.style.display = 'none';
        this.Show(this.Index);
    },
    Next: function() { this.Show(this.Index + 1); },
    Previous: function() { this.Show(this.Index - 1); },
    Show: function(index) {
        if(index >= this.Photos.length) index = 0;
        else if(index < 0) index = this.Photos.length - 1;
        var start = index == 0 ? 0 : index == this.Photos.length - 1 ? index - 2 : index - 1;
        if(this.Count == this.Photos.length) start = 0;
        this.Container.innerHTML = '';
        for(var i=0; i<this.Count; i++) {
            this.Photos[start + i].className = start + i == index ? this.ClassName : '';
            var img = this.Photos[start + i];
            this.Container.innerHTML += '<img src="' + img.src + '" alt="' + img.alt + '" class="' +
                img.className + '" width="' + this.Width + '" height="' + this.Height + '" onclick="PhotoCarousel.Show(' + (start + i) + ');" />';
        }
        if(this.ImageText) this.ImageText.innerHTML = (index + 1) + ' / ' + this.Photos.length;
        this.Preview.src = this.Photos[index].src.replace('small', this.Type);
        this.Index = index;
    }
}