jQuery.pics_carousel = {
	
	getOffsetElement: function(element) {
		var top = 0;
		while(element)
		{
			top += element.offsetTop;
			element = element.offsetParent;
		}
		
		return top;
	},

	showPopup: function(caller) {

		var href = caller;
		var title = caller.title;
		var popup = document.createElement('div');
		document.body.appendChild(popup);
		popup.className = 'carousel_popup';
		popup.id = 'popup';
		
		popup.style.top = jQuery.pics_carousel.getOffsetElement(caller) - 500 + 'px';
		popup.style.left = 300 + 'px';
		popup.style.zIndex = 999;
		var divInnerHTML = '<h4>'+ title +'</h4><a href="#" onclick="jQuery.pics_carousel.closePopup(); return false;" class="close">Close</a> <br class="clear" /><img src="'+ href +'" alt="" />';
		popup.innerHTML = divInnerHTML;
	},

	closePopup: function() {
		document.body.removeChild(document.getElementById('popup'));
	},

	showedPics : {},
	picPosition: {},
	liWidth: {},
	allListsLength: {},
	movePositions: {},



	 /**
	 * function name: build
	 * Build the carousel and call suport function
	 *
	 * @var target - set the target UL
	 * @var showedPics - number of showed Pics, if is not set the default is 5
	 */
	build: function(target, showedPics) {


		var IE = /*@cc_on!@*/false;
		if (IE) {
			var obj = document.getElementById('carousel').getElementsByTagName('li');
			var before, after;

			var curr_obj = null;
			for (var i = 0; i < obj.length; i++)
			{
				curr_obj = obj[i];
				before = document.createElement('span');
				before.className = 'before';
				after = document.createElement('span');
				after.className = 'after';

				curr_obj.insertBefore(before, curr_obj.firstChild);
				curr_obj.appendChild(after);
			}
		}


		this.movePositions[target] = 1;

		if(showedPics){this.showedPics[target] = showedPics;}
		else {this.showedPics[target] = 5}


		this.picPosition[target] = 0;
		allPics = $(target +' img');
		this.allListsLength[target] = allPics.length;
		var targetLi = $(target +' ul li');
		this.liWidth[target] = $(target +' ul li')[0].offsetWidth + parseInt(targetLi.css('margin-left')) + parseInt(targetLi.css('margin-right'));

		$(target +' ul li a').click( function() {
			jQuery.pics_carousel.showPopup(this);
			return false;
		})

		if (this.allListsLength[target] <= this.showedPics[target]) {
			this.centerCarouselAndRemoveButtons(target, this.liWidth[target]*this.allListsLength[target]);
			return;
		}


		var picsContent = $(target+' ul');
		picsContent.css('left', 0);
		var holder = $(picsContent).wrap(document.createElement("div")).parent();
		holder.addClass('carousel_holder');
		holder.css({'width':this.showedPics[target]*(this.liWidth[target])-(parseInt(targetLi.css('padding-left')) + parseInt(targetLi.css('padding-right')) + parseInt(targetLi.css('margin-left')) + parseInt(targetLi.css('margin-right')) - 3 ), 'overflow':'hidden'});
		picsContent.css({'width' : this.allListsLength[target]*(this.liWidth[target])});

		this.addButtons(target);
	},

	 /**
	 * function name: addButtons
	 * addButtons is caller of function build
	 * set the Buttons "prev" and "next" and call function "carouselMoveTo" on click
	 *
	 */
	addButtons: function(target) {
		var movePositions = this.movePositions[target];
		$(target+' a.right_navigation').click( function() {
			jQuery.pics_carousel.carouselMoveTo(-1*movePositions,this,target);
			return false;
		});
		$(target+' a.left_navigation span').addClass('disable');
		$(target+' a.left_navigation').click( function() {
			jQuery.pics_carousel.carouselMoveTo(1*movePositions,this,target);
			return false;
		});
	},

	 /**
	 * function name: carouselMoveTo
	 * addButtons is caller of function addButtons
	 * @var pos - set the position
	 *
	 */
	carouselMoveTo: function(pos, target, targetName) {
		var picPosition = this.picPosition[targetName];

		var $target = $(target).parent().find('ul');
		$target.stop(true);
		maxMove = -1*((this.allListsLength[targetName]-this.showedPics[targetName])*(this.liWidth[targetName]));
		if ((pos==-1 && this.picPosition[targetName]>maxMove) || (pos==+1 && this.picPosition[targetName]<0)) {
			$target.fadeTo('normal', 0.5);
			picPosition = picPosition + pos*(this.liWidth[targetName]);
			$target.animate({'left': picPosition}, 500);
			this.picPosition[targetName] = picPosition;
			$target.fadeTo('normal', 1);

			if (this.picPosition[targetName]<0) {
				$(targetName+' a.left_navigation span').removeClass('disable');
			}
			else {
				$(targetName+' a.left_navigation span').addClass('disable');
			}

			if (this.picPosition[targetName]>maxMove) {
				$(targetName+' a.right_navigation span').removeClass('disable');
			}
			else {
				$(targetName+' a.right_navigation span').addClass('disable');
			}
		}

	},

	centerCarouselAndRemoveButtons: function(target, width) {
		$(target+' ul').css({'margin': '0 auto', 'position': 'relative', 'width': width});
		$(target+' a.left_navigation').hide();
		$(target+' a.right_navigation').hide();
	}

}