/*

Filename: 		carousel.js
Path:			/cs/vision/progs/1/scripts/js/carousel.js
Created by:		Luca De Angeli
Created Date:	2008-07-16

Script purpose:	VideoCarousel integrating an EMP player with the Glow carousel -  configurable height and skin -
				buttons not appearing when the carousel has less than 4 items
Requires:		Glow 0.3.1

*/

glow.ready(function(){
	// create instances of Carousel	
	/*if (glow.dom.get('#carousel-main').length != 0) {
		myCarousel = new Carousel("#carousel-main", {loop: true});
		glow.dom.get('#carousel-main').before("<a id='previous' class='navPrev' href='javascript:myCarousel.move(1)' title='previous'><img src='" + JS_SITE_PATH + "/img/btn-carousel-l.gif' class='scroll-buttons' alt='previous' /></a>");
		glow.dom.get('#carousel-main').after("<a id='next' class='navNext' href='javascript:myCarousel.move(-1)' title='next'><img src='" + JS_SITE_PATH + "/img/btn-carousel-r.gif' class='scroll-buttons' alt='next' /></a>");
		mouseListeners('#carousel-main');
	}*/

	if (glow.dom.get('#carousel-video').length != 0) {
		if (glow.dom.get('#carousel-video').children().length > 3) {
			myCarouselVideo = new Carousel("#carousel-video", {loop: true});
			glow.dom.get('#carousel-video').before('<a id="prev-video" class="navPrev navPrev-' + EMP_THEME + "-" + CAROUSEL_HEIGHT + '" onClick="myCarouselVideo.move(1); return false;" title="previous"><img class="scroll-buttons" src="' + JS_SITE_PATH + '/img/btn-carousel-video-l.gif" width="27" height="116" alt="Previous video"></a>');
			glow.dom.get('#carousel-video').after('<a id="next-video" class="navNext navNext-' + EMP_THEME + "-" + CAROUSEL_HEIGHT + '" onClick="myCarouselVideo.move(-1); return false;"" title="next"><img class="scroll-buttons" src="' + JS_SITE_PATH + '/img/btn-carousel-video-r.gif" width="27" height="116" alt="Next video"></a>');
		} else {
			glow.dom.get('#prg-carousel-content').parent().addClass('prg-carousel-content-nobuttons');
			glow.dom.get('#carousel-video').addClass('visionAppsCarousel');
			}
		mouseListeners('#carousel-video');
	}
	
	if (glow.dom.get('#carousel-img').length != 0) {
		myCarouselImg = new Carousel("#carousel-img", {loop: true});
		glow.dom.get('#carousel-img').before("<a id='prev-img' class='navPrev' onClick='myCarouselImg.move(1); return false;' title='previous'><img src='" + JS_SITE_PATH + "/img/btn-carousel-l.gif' class='scroll-buttons' alt='Previous' /></a>");
		glow.dom.get('#carousel-img').after("<a id='next-img' class='navNext' onClick='myCarouselImg.move(-1); return false;' title='next'><img src='" + JS_SITE_PATH + "/img/btn-carousel-r.gif' class='scroll-buttons' alt='Next' /></a>");
		mouseListeners('#carousel-img');
	}

	// hightlight an item and move it to the start
	function showSelected(pos){
		myCarousel.addClass(pos , "highlight");
		myCarousel.moveTo(pos , 0, {anim:false});
	}

	function mouseListeners(objID) {
	    var items = glow.dom.get(".video-image");

	    items.each(function(i) {
	            glow.dom.get(this).css("opacity", "0.75");

				glow.events.addListener(
	               glow.dom.get(this), 'mouseout',
	               function() { glow.anim.css(glow.dom.get(this), 0.15, {"opacity" : {to:0.75}}).start(); }, this
				);

	           glow.events.addListener(
	               glow.dom.get(this), 'mouseover',
	               function() { glow.anim.css(glow.dom.get(this), 0.15, {"opacity" : {to:1}}).start(); }, this
	           );
	             
	    });
	}

});