/**
 * Need MooTools framework core v:1.2
 * @author dtardia
 */
var thumbSize = {'width':99,'height':67};
var leftIndex = 0;
var space = 0;
var container_cropper_name;
var startX;
var images;
var images_box;
var useArrow;
var direction;
var moveFx;
var waitStart;
var setBar = function (container,pimages){
	if(moveFx)moveFx.cancel();
	$clear(waitStart);
	useArrow = false;
	direction = 1;
	images = pimages;
	container_cropper_name = container;
	leftIndex = images.length - 1;
	if ($(container_cropper_name)) {
		$(container_cropper_name).setStyle('float', 'left');
		$(container_cropper_name).setStyle('overflow', 'hidden');
		$(container_cropper_name).setStyle('position', 'relative');
		//$(container_cropper_name).setStyle('background-color', '#ffff00');
		if (images.length > 0) {
			images_box = new Array();
			var image_container = new Element('div', {
				'id': 'image_container',
				'styles': {
					'float': 'left',
					'position': 'absolute',
					'left': -thumbSize.width,
					'height': thumbSize.height,
					'width': thumbSize.width*7
				}
			});
			for (var img = 0; img < images.length; img++) {
				var newLinkBox = new Element('p', {
					'styles': {
						'position': 'relative',
						'padding': '0 ' + space + 'px 0 ' + space + 'px',
						'margin': '0 ',
						'float': 'left'
					}
				});
				
				var newLinkImg = new Element('a', {
					'href': images[img].description,
					'styles': {
						'position': 'relative',
						'display': 'block',
						'float': 'left',
						'background-color': '#FF0000',
						'height': thumbSize.height,
						'width': thumbSize.width
					},
					'id': 'link_' + img
				});
				var imgPlace = new Element('p', {
					'styles': {
						'position': 'absolute','top':0,'left':0,
						'float': 'left',
						'display': 'block',
						'background-color': '#FFFFFF',
						'height': thumbSize.height,
						'width': thumbSize.width,
						'cursor': 'hand',
						'filter': 'chroma(color=#A57B94)',
						'margin':0
					},
					'id': 'place_' + img
				
				});
				var newImg = new Element('img', {
					'styles': {
						'position': 'absolute','top':0,'left':0,
						'float': 'left',
						'display': 'none',
						'height': thumbSize.height,
						'width': thumbSize.width
					},
					'id': 'thumb_' + img
				
				});
				newImg.index = img;
				$(container_cropper_name).adopt(image_container);
				images_box.push(newLinkBox.adopt(newLinkImg.adopt(imgPlace, newImg)));
				onImgLoad(newImg,images[img].urlthumb);
			}
			setBarEls();
		}
	}
}
var onImgLoad = function(caller,url_caller){			
	caller.setProperty('src',url_caller);
	caller.setStyle('display', 'block');
	hidePlace.delay(80,this,caller.index);
}
var hidePlace = function(i){
	var placeName = 'place_'+i;
	if ($('place_' + i)) {
		$('place_' + i).destroy();
	}
}
var setBarEls = function(caller){
	$('image_container').empty();
	var tmpI = leftIndex;
	var els = 0;
	var t="";
	while (els<7){
		if (tmpI > images_box.length - 1) {
			tmpI = 0;
		}
		if (images_box[tmpI]) {
			$('image_container').adopt(images_box[tmpI].clone());
		}
		t +=tmpI+" ";
		tmpI++;
		els++;
	}
	if (!useArrow) {
		if (moveFx) {
			moveFx.cancel();
		}
		direction = 1;
		moveFx = new Fx.Tween($('image_container'), {
			duration: 4000,
			transition: Fx.Transitions.Quad.easeInOut
		});
		moveFx.addEvent('complete', this.updateLimit.bindWithEvent(this));
		moveFx.start('left', -(thumbSize.width*2));
	}else{
		//waitStart = startSlide.delay(5000,this);
		startSlide();
	}

}
var updateLimit = function(){
	if(direction==1)leftIndex++;
	else if(direction==-1)leftIndex--;
	leftIndex = (leftIndex>images.length-1)?0:((leftIndex<0)?(images.length-1):leftIndex);
	$('image_container').set('styles', {
	    'left': -thumbSize.width
	});
	setBarEls();
};
var startSlide = function(){
	if(moveFx)moveFx.cancel();
	$clear(waitStart);
	useArrow = false;
	direction = 1;
	setBarEls();
}
var selPrev = function(){
	if(moveFx)moveFx.cancel();
	$clear(waitStart);
	useArrow = true;
	direction = -1;
	moveFx = new Fx.Tween($('image_container'), {
		duration: 200
	});
	moveFx.addEvent('complete', this.updateLimit.bindWithEvent(this));
	moveFx.start('left', 0);
}
var selNext = function(){
	if(moveFx)moveFx.cancel();
	$clear(waitStart);
	useArrow = true;
	direction = 1;
	moveFx = new Fx.Tween($('image_container'), {
		duration: 200
	});
	moveFx.addEvent('complete', this.updateLimit.bindWithEvent(this));
	moveFx.start('left', -(thumbSize.width*2));
}