// OPTIONS
// '' none
// 'left_focused' only the left item is colored, the others are grey -> difference in rollover
// 'auto_play' the autoplay starts when slider not focused with mouse

// class "back-image" background images for a cross fade effect with upper images
// class "to-grey" elements that have to become grey in deselect mode

/* SCROLLER */
$.fn.initScroller = function() {
	var scroller = $(this);
	var slider = scroller.parent();
	var sliderOptions = slider.attr("slider-options");
	scroller.attr("init-scroller-left-margin", scroller.position().left);
	// init to grey
	var imagesDiv = scroller.find("div:has('img'):not('.description')");
	imagesDiv.each(function(i){
		if (slider.hasOption("left_focused")) {
			scroller.toGreyDescription(i,'');
		} else {
			scroller.toColor(i,'');
		}
	});
	scroller.scrollToImageId(0);
	scroller.addScrollerListeners();
}

$.fn.addScrollerListeners = function () {
	var scroller = $(this);
	var slider = scroller.parent();
	var imagesDiv = scroller.find("div:has('img'):not('.description')");	
	var roll = function(id, fade, type) {
		var currentImageId = parseInt(scroller.attr("current-image-id"));
		imagesDiv.each(function(i, div){
			if(type=="over") {
				if (i==id) {
					scroller.toColor(i,fade);
				} else {
					scroller.toGrey(i,fade);
				}
			} else {
				if (i==currentImageId) {
					scroller.toColor(i,fade);
				} else {
					if (slider.hasOption('left_focused')) {
						scroller.toGrey(i,fade);
					} else {
						scroller.toColor(i,fade);
					}
				}
			}
		});
	}
	imagesDiv.each(function(i, div){
		var url = $(div).find('a').attr('href');
		$(div).hover(function() {
			if (url!=null) {
				$(this).css('cursor','pointer');
			}
			roll(i,'fade','over');
		}, function() {
			if (url!=null) {
				$(this).css('cursor','auto');
			}
			roll(i,'fade','out');
		});
		
		if (url!=null) {
			$(div).click(function(e){
				window.location.href = url; 
			});
		}
	});
}

$.fn.setCurrentImageId = function (id) {
	var scroller = $(this);
	scroller.attr("old-image-id",scroller.attr("current-image-id"));
	scroller.attr("current-image-id", id);
}

$.fn.toGrey = function (id, type){
	var scroller = $(this);
	var imagesDiv = scroller.find("div:has('img'):not('.description')");
	var imgDiv = $(imagesDiv[id]);
	
	if (type=='fade') {
		imgDiv.find(".back-image").animate({opacity:1},{queue:false, duration:600});
	} else {
		imgDiv.find(".back-image").css('opacity',1);
	}
	imgDiv.find(".back-image").show();
	scroller.toGreyDescription(id, type);
}

$.fn.toGreyDescription = function (id, type) {
	var scroller = $(this);
	var imagesDiv = scroller.find("div:has('img'):not('.description')");
	var imgDiv = $(imagesDiv[id]);
	var toGreyList = imgDiv.find(".to-grey");
	toGreyList.each(function(i, elem) {
		if ($(elem).attr("color")==undefined) {
			$(elem).attr("color",$(elem).css("color"));
		}
		if (type=='fade') {
			$(elem).animate({color:"#d3d3d3"},{queue:false, duration:600});
		} else {
			$(elem).css('color',"#d3d3d3");
		}
	});
}

$.fn.toColor = function (id, type) {
	var scroller = $(this);
	var imagesDiv = scroller.find("div:has('img'):not('.description')");
	var imgDiv = $(imagesDiv[id]);
	if (type=='fade') {
		imgDiv.find(".back-image").animate({opacity:0},{queue:false, duration:600});
	} else {
		imgDiv.find(".back-image").hide();
	}
	scroller.toColorDescription(id, type);
}

$.fn.toColorDescription = function (id, type) {
	var scroller = $(this);
	var imagesDiv = scroller.find("div:has('img'):not('.description')");
	var imgDiv = $(imagesDiv[id]);
	var toGreyList = imgDiv.find(".to-grey");
	toGreyList.each(function(i, elem) {
		var elemColor = $(elem).attr("color");
		if (elemColor!==undefined) {
			if (type=='fade') {
				$(elem).animate({color:elemColor},{queue:false, duration:600});
			} else {
				$(elem).css('color',elemColor);
			}
		}
	});
}

$.fn.scrollToImageId = function(id) {
	var scroller = $(this);
	var slider = scroller.parent();
	var checkArrows = function () {
		slider.checkArrows();
	}
	var imagesDiv = scroller.find("div:has('img'):not('.description')");
	
	if (id>=0 && id<imagesDiv.length) {
		var targetX = $(imagesDiv[id]).position().left;
		var initScrollerLeftMargin = parseInt(scroller.attr("init-scroller-left-margin"));
		
		if(scroller.checkOkScroll(id)) {
			if (slider.hasOption('left_focused')) {
				var actualImageId = parseInt(scroller.attr("current-image-id"));
				scroller.toGrey(actualImageId,'fade');
			}
			scroller.toColor(id,'fade');
			scroller.setCurrentImageId(id);
			scroller.stop(true,false).animate({left: (- targetX + initScrollerLeftMargin)+"px"}, {queue:false, duration:600, step: checkArrows});
		}
	} 
}

$.fn.checkOkScroll = function(id) {
	var scroller = $(this);
	var slider = scroller.parent();
	
	var imagesDiv = scroller.find("div:has('img'):not('.description')");
	var targetX = $(imagesDiv[id]).position().left;
	var initScrollerLeftMargin = parseInt(scroller.attr("init-scroller-left-margin"));
	var lastScrollerPageWidth = slider.width()-initScrollerLeftMargin;
	if((scroller.width()-targetX) > (lastScrollerPageWidth-$(imagesDiv[id]).width()))
		return true;
	else
		return false;
}

$.fn.goNext = function () {
	var scroller = $(this);
	var currentImageId = parseInt(scroller.attr("current-image-id"));
	if (scroller.lastImageInScreen()) {
		scroller.scrollToImageId(0);
	} else {
		scroller.scrollToImageId(currentImageId+1);
	}
}
// return true if the last right image is completely shown in the screen
$.fn.lastImageInScreen = function() {
	var scroller = $(this);
	var scrollerPositionLeft = scroller.position().left;
	
	var slider = scroller.parent();
	if (scroller.width() + scrollerPositionLeft >= slider.width()) {
		return false;
	} else {
		return true;
	}
}

/* SLIDER */
$.fn.hasOption = function(strOption) {
	var slider = $(this);
	var sliderOptions = slider.attr("slider-options");
	if (sliderOptions.lastIndexOf(strOption)!=-1) {
		return true;
	} else {
		return false;
	}
}
$.fn.autoPlay = function() {
	var slider = $(this);
	var scroller = slider.find(".scroller");
	slider.everyTime(8000, function(i) {
		scroller.goNext();
	}, 0);
	slider.attr("auto_play", "true");
}
$.fn.stopAutoPlay = function () {
	var slider = $(this);
	slider.attr("auto_play", "false");
	slider.stopTime();
}
$.fn.checkArrows = function() {
	var slider = $(this);
	var isAutoPlaying = slider.attr("auto_play");
	if (isAutoPlaying!="true") {
		var scroller = slider.find(".scroller");
		var arrowRight = slider.find('.arrow-right');
		var arrowLeft = slider.find('.arrow-left');
		// show right arrow
		if (scroller.lastImageInScreen()) {
			arrowRight.stop(true, true).fadeOut("fast");
		} else {
			arrowRight.stop(true, true).fadeIn("normal");
		}
		if (scroller.position().left < 0) {
			arrowLeft.stop(true, true).fadeIn("normal");
		} else {
			arrowLeft.stop(true, true).fadeOut("fast");
		}
	}
}
$.fn.addSliderListeners = function() {
	var slider = $(this);
	var sliderOptions = slider.attr("slider-options");
	var scroller = slider.find(".scroller");
	var arrowRight = slider.find('.arrow-right');
	var arrowLeft = slider.find('.arrow-left');
	slider.bind('mouseenter', function(){
		if (slider.hasOption("auto_play"))
			slider.stopAutoPlay();
		slider.checkArrows();
	});
	slider.bind('mouseleave', function(){
		if (slider.hasOption("auto_play"))
			slider.autoPlay();
		arrowRight.stop(true, true).fadeOut("fast");
		arrowLeft.stop(true, true).fadeOut("fast");
	});

	arrowRight.click(function(e){
		var currentImageId = parseInt(scroller.attr("current-image-id"));
		scroller.scrollToImageId(currentImageId+1);
    });
	arrowLeft.click(function(e){
		var currentImageId = parseInt(scroller.attr("current-image-id"));
		scroller.scrollToImageId(currentImageId-1);
    });
}
$.fn.startFrom = function (id) {
	var slider = $(this);
	var scroller = slider.find(".scroller");
	
	if(scroller.checkOkScroll(id))
		scroller.scrollToImageId(id);
	else
		slider.startFrom(id-1);
}
$.fn.initSlider = function(sliderOptions) {
	var slider = $(this);
	var scroller = slider.find(".scroller");
	slider.attr("slider-options",sliderOptions);
	if (slider.hasOption("auto_play"))
		slider.autoPlay();
	
	scroller.initScroller();
	slider.addSliderListeners();

	
}