function Carousel(el, ui, pages, opts)
{
    var C1 = "current-card";
    var C2 = "new-card";
    var W = 936;
    var self = this;
    var len = pages.length;
    var sid = null
    var animating = false;
	
    
    function createDot(i)
    {
        var d = document.createElement('div');
        d.id = 'dot' + i;
        d.className = 'cr-dot' + (i != 0 ? '' : ' selected');
        d.onclick = function()
        {
            callByIndex(i);
        };
        
        return d;
    }
    
    if (el != null)
    {
        this.container = el;
		this.started = false;
        this.pages = pages;
        this.index = 0;
        this.timer = 5000;  
        this.transitionDuration = 1;
		        
        for (var i = 0; i < len; i++)
        {
            var d = createDot(i);
            d.style.top = '14px';
            d.style.left = (W - (len*65) + i*20) + 'px';
            ui.appendChild(d);
        }
        
        if (opts)
        {
            if (opts.timePerSlide) this.timer = opts.timePerSlide*1000;
            if (opts.transitionDuration) this.transitionDuration = opts.transitionDuration;
        }       
        
        
        
        function callNext()
        {
            self.index++;
            if (self.index > len-1)
                self.index = 0;
            
            callByIndex(self.index, true);
        }
        
        function callBefore()
        {
            self.index--;
            if (self.index < 0)
                self.index = len-1;
            
            self.reverse = true;
            callByIndex(self.index, true);
        }
        
        function callByIndex(index, force)
        {
            if (animating || index == self.index && !force) return;
            self.index = index;
            var first = document.getElementById(C1);
            var second = document.createElement('div');
            second.id = C2;
            second.className = 'card';
            second.style.left = (self.reverse ? -W : W) + 'px';
            
            el.appendChild(second);
            second.innerHTML = pages[index].html;
            
            animate();
            
            if (sid)
                clearTimeout(sid);
            
            sid = setTimeout(callNext, self.timer); 
            
            for (var i = 0; i < len; i++)
            {
                var d = document.getElementById('dot' + i);
                d.className = 'cr-dot' + (i == index ? ' selected' : '');
            }
        }
        
        function onAnimateEnd()
        {
            var first = document.getElementById(C1);    
            var second = document.getElementById(C2);
            first.parentNode.removeChild(first);
            second.id = C1;
            second.style.left = 0 + 'px';
            animating = false;
            self.reverse = false;
        }
        
        function animate()
        {
            animating = true;
            var interval = 1000/60;
            var dur = self.transitionDuration;
            var shiftAmount = Math.ceil(W/(dur*interval));
            var shift = 0;
            var first = document.getElementById(C1);    
            var second = document.getElementById(C2);
            
            function step()
            {
                shift += shiftAmount;
                    
                if (shift < W)
                {
                    if (self.reverse)
                    {
                        first.style.left = shift + 'px';
                        second.style.left = -W+shift + 'px';
                    }
                    else
                    {
                        first.style.left = -shift + 'px';
                        second.style.left = W-shift + 'px';
                    }
                    setTimeout(step, interval);
                }
                else
                {
                    onAnimateEnd();
                }
            }
            step();
        }
        
		if(this.started) {
			sid = setTimeout(callNext, self.timer);
		} else {
			callNext();
		}
		
    }
    
    this.next = function()
    {
        callNext();
    };
    
    this.prev = function()
    {
        callBefore();
    };
    
    this.precache = function(data)
    {
		var imgs= [];
		for (var i = 0; i < data.length; i++) {
			imgs.push(data[i].img);
		}
        var len = imgs.length;
        var iIndex = 0;
        var temp = document.createElement('img');
        temp.style.display = 'none';
        
        function nextImage()
        {
            iIndex++;
            loadImage();
        }       
        
        function loadImage()
        {
            if (iIndex >= len) 
            {
                temp = null;
                return;
            }
            var src = imgs[iIndex];
            
            temp.src = src;
        }       
        
        temp.onload = nextImage;
        loadImage();        
    };
	
	this.precache(this.pages);
};