var Devnet = {};

Devnet.BannerRotator = new Class({
    
    options: {
        delay: 20000, // 20 seconds
        duration: 1000, // 1 second
        initialBanner: 0 // Index of initial banner to display
    },
    
    initialize: function(el, banners, options) {
        this.element = $(el);
        options = options || [];        
        this.setOptions(options);
        
        this.current = this.options.initialBanner;
		this.element.innerHTML = "Loading...";
		this.banners = new Asset.images(banners, { onComplete: this.banners_onComplete.bind(this) });
    },
    
    setupIndex: function() {
        var idx = Cookie.get(this.element.id);
        if (idx) this.current = parseInt(idx);
        if (this.current >= this.banners.length) this.current = 0;
        Cookie.set(this.element.id, (this.current+1));
    },
    
    updateIndex: function() {
        this.current ++;
        if (this.current >= this.banners.length) this.current = 0;
        Cookie.set(this.element.id, (this.current+1));
    },
    
    banners_onComplete: function() {
        this.setupIndex();
        this.element.innerHTML = "";
        this.banners.each(function(banner) {
            banner.setStyle('opacity', 0);
            banner.setStyle('position', 'absolute');
            //banner.setStyle('z-index', '-1');
            banner.injectInside(this.element);
        }, this);
        this.banners[this.current].setStyle('opacity', '0');
        this.banners[this.current].effect('opacity', {duration:this.options.duration}).start(0, 1);
        this.swap_banner.periodical(this.options.delay, this);
    },

    swap_banner: function() {
        this.banners[this.current].effect('opacity', {duration:this.options.duration}).start(1, 0);
        this.updateIndex();
        if (this.current >= this.banners.length) this.current = 0;
        this.banners[this.current].setStyle('opacity', '0');
        this.banners[this.current].effect('opacity', {duration:this.options.duration}).start(0, 1);
    }
    
});
Devnet.BannerRotator.implement(new Options);



Devnet.ScrollingItemPanel = new Class({
    
    options: {
        itemWidth: 170
    },
    
    initialize: function(left, itemPanel, right, listUrl, options) {
        this.left = $(left);
        this.itemPanel = $(itemPanel);
        this.right = $(right);
        this.listSrc = listUrl;
        options = options || [];
        this.setOptions(options);
        
        // Setup buttons
        this.left.setStyle('cursor', 'pointer');
        this.left.addEvent('click', this.left_button_onclick.bindAsEventListener(this));
        this.right.setStyle('cursor', 'pointer');
        this.right.addEvent('click', this.right_button_onclick.bindAsEventListener(this));
        
        // Setup panel
        this.itemPanel.setStyle('overflow', 'hidden');
        
        this.images = [{
                src: '/viro/partners/cri.png',
                title: 'Carbon Reduction Institute',
                href: ''
            }, {
                src: '/viro/partners/eclipse-solar.png',
                title: 'Eclipse Solar',
                href: ''
            }, {
                src: '/viro/partners/greening.png',
                title: 'Greening Planet',
                href: ''
            }, {
                src: '/viro/partners/jims-iga.png',
                title: 'Jim\'s IGA',
                href: ''
            }, {
                src: '/viro/partners/pines-shopping.png',
                title: 'Pines Shopping Centre',
                href: ''
            }, {
                src: '/viro/partners/skin-organics.png',
                title: 'Skin Organics',
                href: ''
            }, {
                src: '/viro/partners/solahart.png',
                title: 'SolaHart',
                href: ''
            }
        ];
        
        this.images.each(function(img) {
            
        });
        
        this.firstIdx = 0;
        this.load_image(this.images[0]);
        this.load_image(this.images[1]);
        this.load_image(this.images[2]);
        this.load_image(this.images[3]);
        this.load_image(this.images[4]);
    },
    
    left_button_onclick: function() {
        var that = this;
        this.itemPanel.getFirst().effect('margin-left', {
            duration: 1000,
            onComplete: function() {
                that.itemPanel.getFirst().remove();
                that.firstIdx++;
                var imageIdx = 0;
                if (that.firstIdx < (that.images.length + 4)) that.firstIdx = 0;
                that.load_image(that.images[that.firstIdx + 4]);
            }
        }).start(-180);
    },

    right_button_onclick: function() {
        this.move_images(this.itemPanel.getFirst(), 180);
    },
    
    move_images: function(img, amount) {
        var that = this;
        img.effect('margin-left', {
            duration: 1000,
            onComplete: function() {
                
            }
        }).start(amount);
    },
    
    load_image: function(img) {
        var that = this;
        new Asset.image(img.src, {
            title: img.title, 
            onload: function() {
                this.setStyle('opacity', 0);
                this.setStyle('padding-left', '10px');
                this.injectInside(that.itemPanel);
                this.effect('opacity', {duration: 1000}).start(0, 1);
            }
        });
    }
    
});
Devnet.ScrollingItemPanel.implement(new Options);