var _cBox = null;

var _shift = 596;
var _duration = 1500;
var fx = null;
var fx2 = null;
var _scroll = false;
var _where = 0;
els = [];

var items = [];
var path2items = 'items.xml';
var path2portfolio = 'portfolio.html';

var _popup_title = null;
var _popup_label = null;
var _popup_text = null;
var _popup_link = null;
var _popup_active = null;

_tip = null;

function initMarquee() {
		_cBox = $('marquee');
		if (_cBox)
		{
			getHttpRequest(path2items, null, addItems, true);
		}	
		
		var tip1 =  new Tips($('carousel').getElements("a.title"), {
				initialize:function(){
				this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
			},
			onShow: function(toolTip) {
				this.fx.start(1);
			},
			onHide: function(toolTip) {
				this.fx.start(0);
			}
		});
}


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 = "";
	_cBox._left = -1092;
	for (i = 0; i < 5; i ++)
	{
		addItem(i, 0, i*596);
	}
	makeCarousel();
	makeTip();
}

function makeTip() {
	_tip = new Tips(_cBox.getElements(".tooltip"), {
		initialize:function(){
			this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
		},
		onShow: function(toolTip) {
			this.fx.start(1);
		},
		onHide: function(toolTip) {
			this.fx.start(0);
		}
	});
}

function addItem(_index, where, _left) {
	var li = document.createElement("li");
	li._index = _index;
	li.style.left = _left + "px";
	li._left = _left;
	
	var _img = document.createElement("img");
	_img.src = "images/carousel/"+items[_index].src;
	_img.title = items[_index].label ? items[_index].name + " *" : items[_index].name;
	_img.className = "tooltip";
	li.appendChild(_img);
	_img.parentNode.innerHTML = _img.parentNode.innerHTML.replace(">"," onclick='openPopup(this, "+_index+");return false;'>");

	li.innerHTML += '<a href="#" class="info" onclick="openPopup(this, '+_index+');return false;">Info</a>';
	if (_index == 2)
	{
		li.className = "active";
	}
	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,
				onStart: function(element) {
					_scroll = false;
					els.each(function(el, i){
						el.className = "";
					}, element);
					hs.close(this);
					
					if (_where == 0)
					{
						
						if (items[els[4]._index+1])
						{
							addItem(els[4]._index+1, 0, els[4]._left+596);
						}
						else
						{
							addItem(0, 0, els[4]._left+596);
						}
						
						element._left = element._left - 596;
						
					}
					if (_where == 1)
					{
						
						if (items[els[0]._index-1])
						{
							addItem(els[0]._index-1, 1, els[0]._left - 596);
						}
						else
						{
							addItem(items.length-1, 1, els[0]._left - 596);
						}
						
						element._left = element._left + 596;
					}
					
				},
				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].label ? items[els[2]._index].name + " *" : items[els[2]._index].name;
					_popup_text.innerHTML = items[els[2]._index].description;
					_popup_label.innerHTML = items[els[2]._index].label ? "* " + items[els[2]._index].label : "";
					_popup_link.href = path2portfolio +"?page="+items[els[2]._index].page+"&ids=" + items[els[2]._index].ids;
					
					_scroll = true;
					makeTip();
			}
		}, _cBox);
		
		$('marquee-left').onclick = $('marquee-left-small').onclick = $('scroll-left').onclick = function() {
			if (_scroll) {
				_where = 1;
				_scroll = false;
				fx.start({
					'left': _cBox._left + 596
				});
			}
			return false;
		};
		$('marquee-right').onclick =  $('marquee-right-small').onclick = $('scroll-right').onclick = function() {
			if (_scroll) {
				_where = 0;
				_scroll = false;
				fx.start({
					'left': _cBox._left - 596
				});
			}
			return false;
		};
		els = _cBox.getElements("li");
		_scroll = true;
		
		_popup_title = $('ptitle');
		_popup_text = $('ptext');
		_popup_link = $('plink');
		_popup_label = $('plabel');
}

function openPopup(link, _index) {
	
	_popup_title.innerHTML = items[_index].label ? items[_index].name + " *" : items[_index].name;
	_popup_text.innerHTML = items[_index].description;
	_popup_label.innerHTML = items[_index].label ? "* " + items[_index].label : "";
	_popup_link.href = path2portfolio +"?page="+items[_index].page+"&ids=" + items[_index].ids;
	
	if (!_popup_active)
	{
		_popup_active = link;
	}
	hs.htmlExpand(_popup_active, { contentId: 'popup' });
}


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