var _cBox = null;

var _shift = 946;
var _duration = 1500;

var fx = null;
var _scroll = false;
var _where = 0;
els = [];

var items = [];
var path2items = 'projects.aspx?action=getitems';
var path2projects = 'projects.aspx';

var _popup_title = null;
var _popup_website = null;
var _popup_text = null;
var _popup_link = null;
var _popup_active = null;
var _popup = null;


function initMarquee() {
		        _cBox = $('marquee');
                _popup = $('popup');
                if (_cBox)
                {
                        
                        getHttpRequest(path2items, null, addItems, true);
                }
}


function shuffle(_array) {
        for (var i = _array.length - 1; i > 0; i--) {
      var j = $random(0, i);
      temp = _array[i];
      _array[i] = _array[j];
      _array[j] = temp;
    }
    return _array;
}

var addItems = function(_items)  {
        items = shuffle(_items);
        //_cBox.innerHTML = "4444";
        _cBox._left = -1892;
        _cBox.style.left = "-1892px";
        for (i = 0; i < 5; i ++)
        {
                addItem(i, 0, i*_shift);
        }
        makeCarousel();
        
}

function addItem(_index, where, _left) {
        
        var li = document.createElement("li");
        li._index = _index;
        li.style.left = _left + "px";
        li._left = _left;

        var _link = document.createElement("a");
        _link.href="#";
        _link.onclick = function() {
                openPopup(this, _index);
                return false;
        }

        var _img = document.createElement("img");
        //_img.src = "images/marquee/"+items[_index].src;
        _img.src = "images/marquee/"+items[_index].src;
        _link.appendChild(_img);
        li.appendChild(_link);
        if (where) {
                        var node = _cBox.getElements("li")[0];
                        _cBox.insertBefore(li, node);
        }
        else {
                _cBox.appendChild(li);
        }
}

function makeCarousel() {
        fx = new Fx.Styles(_cBox, {
                duration:_duration,
                                wait:true,
                                transition: Fx.Transitions.Quad.easeInOut,
                                onStart: function(element) {
                                        _scroll = false;
                                        els.each(function(el, i){
                                                el.className = "";
                                        }, element);

                                        if (_where == 0)
                                        {

                                                if (items[els[4]._index+1])
                                                {
                                                        addItem(els[4]._index+1, 0, els[4]._left+_shift);
                                                }
                                                else
                                                {
                                                        addItem(0, 0, els[4]._left+_shift);
                                                }

                                                element._left = element._left - _shift;

                                        }
                                        if (_where == 1)
                                        {

                                                if (items[els[0]._index-1])
                                                {
                                                        addItem(els[0]._index-1, 1, els[0]._left - _shift);
                                                }
                                                else
                                                {
                                                        addItem(items.length-1, 1, els[0]._left - _shift);
                                                }

                                                element._left = element._left + _shift;
                                        }

                                },
                                onComplete: function(element) {
                                        if (_where == 0)
                                        {
                                                els[0].remove();
                                        }
                                        if (_where == 1)
                                        {
                                                els[4].remove();
                                        }

                                        els = element.getElements("li");
                                        els[2].className = "active";

                                        _popup_title.innerHTML = items[els[2]._index]['name'];
                                        _popup_text.innerHTML = items[els[2]._index]['description'];
                                        _popup_website.innerHTML = items[els[2]._index]['website'];
                                        _popup_link.href = path2projects +"?ids=" + items[els[2]._index]['ids'];

                                        _scroll = true;
                        }
                }, _cBox);
                function aaa()
                 {
                        if (_scroll) {
                                _where = 1;
                                _scroll = false;
                                fx.start({
                                        'left': _cBox._left + _shift
                                });
                        }
                        return false;
                };

                $('scroll-left').onclick = function() {
                        if (_scroll) {
                                _where = 1;
                                _scroll = false;
                                fx.start({
                                        'left': _cBox._left + _shift
                                });
                        }
                        return false;
                };
                $('scroll-right').onclick = function() {
                        if (_scroll) {
                                _where = 0;
                                _scroll = false;
                                fx.start({
                                        'left': _cBox._left - _shift
                                });
                        }
                        return false;
                };
                els = _cBox.getElements("li");
                _scroll = true;

                _popup_title = $('ptitle');
                _popup_text = $('ptext');
                _popup_website = $('pwebsite');
                _popup_link = $('plink');

                $("popup-close").onclick = function() {
                        closePopup();
                        return false;
                }
}

function openPopup(link, _index) {
        _popup_title.innerHTML = items[_index]['name'];
        _popup_website.innerHTML = items[_index]['website'];
        _popup_text.innerHTML = items[_index]['description'];
        _popup_link.href = path2projects +"?ids=" + items[_index]['ids'];

        if (!_popup_active)
        {
                _popup_active = link;
        }
        _popup.style.display = "block";
}

function closePopup() {
        _popup.style.display = "none";
}


if (window.addEventListener) {
        window.addEventListener("load", initMarquee, false);
}
else if (window.attachEvent) {
        window.attachEvent("onload", initMarquee);
}