/*-------------------------------------------------------------------
Initialize the navigation and carousel in the CNET Music Centre
------------------------------------------------------------------- */

var Site = {
	

	
	initCarousel: function() {
		new CNETcarousel('music-carousel', {
			buttonsSelector: '.nav-button',
			rotateAction: 'click',
			slideInterval: 4000
		});
	},
	
	start: function() {
		if ($('music-carousel')) {
			Site.initCarousel()
		}
		if ($('channel-nav')) {
			Site.initNav();
		}
	}
	
};

window.addEvent('domready', Site.start);

/*-------------------------------------------------------------------
Miscellaneous site functions
------------------------------------------------------------------- */
function sumArr(arr) { var sum = 0; arr.each(function(el){sum += el;}); return sum; }

Fx.Slide.implement({
	isVisible: function() {
		return (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) ? false: true;
	}
});

function toggleSection (id,onClass,offClass) {
    var styleObject = document.getElementById(id);
    var currentClass = styleObject.className;
    if (styleObject) {
        if (currentClass != offClass) {
            changeClass(id, offClass);
        } else {
            changeClass(id, onClass);
        }
        return true;
    } else {
        return false;
    }
}

function changeClass(id, newClass) {
    if (document.getElementById(id)) {
        var identity=document.getElementById(id);
        if (identity.className != newClass) {
            identity.className=newClass;
        }
    } else {
        /*alert ('id not found: ' + id);*/
    }

}

/*-------------------------------------------------------------------
Carousel.js:
	by Aaron Newton, <aaron [dot] newton [at] cnet [dot] com>

For more documentation check out:
	http://clientside.cnet.com/cnet.gf/docs/files3/common/layout-widgets/carousel-js.html
------------------------------------------------------------------- */

var CNETcarousel = new Class({

	initialize: function(container, options){
		this.container = $(container);
		if(!this.container.hasClass('hasCarousel')){
			this.container.addClass('hasCarousel');
			this.slides = [];
			this.buttons = [];

			this.setOptions({
				onRotate: Class.empty,
				onStop: Class.empty,
				onAutoPlay: Class.empty,
				onShowSlide: Class.empty,
				slidesSelector: ".slide",
				buttonsSelector: ".button",
				slideInterval: 4000,
				transitionDuration: 400,
				startIndex: 0,
				buttonOnClass: "selected",
				buttonOffClass: "off",
				rotateAction: "none",
				rotateActionDuration: 100,
				autoplay: true
			}, options);
			this.slides = $(container).getElements(this.options.slidesSelector);
			this.buttons = $(container).getElements(this.options.buttonsSelector);
			this.createFx();
			this.showSlide(this.options.startIndex);
			if(this.options.autoplay) this.autoplay();
			if(this.options.rotateAction != 'none') this.setupAction(this.options.rotateAction);
			return this;
		} else return false;
	},

	setupAction: function(action) {
		this.buttons.each(function(el, idx){
			$(el).addEvent(action, function() {
				this.slideFx.setOptions(this.slideFx.options, {duration: this.options.rotateActionDuration});
				if(this.currentSlide != idx) this.showSlide(idx);
				this.stop();
			}.bind(this));
		}, this);
	},

	createFx: function(){
		this.slideFx = new Fx.Elements(this.slides, {duration: this.options.transitionDuration});
		this.slides.each(function(slide){
			slide.setStyle('opacity',0);
		});
	},

	showSlide: function(slideIndex){
		var action = {};
		this.slides.each(function(slide, index){
			if(index == slideIndex && index != this.currentSlide){ //show
				$(this.buttons[index]).removeClass(this.options.buttonOffClass).addClass(this.options.buttonOnClass);
				action[index.toString()] = {
					'opacity': [1]
				};
				slide.setStyle('display','block');
			} else {
				$(this.buttons[index]).removeClass(this.options.buttonOnClass).addClass(this.options.buttonOffClass);
				action[index.toString()] = {
					'opacity': [0]
				};
				slide.setStyle('display','none');
			}
		}, this);
		this.fireEvent('onShowSlide', slideIndex);
		this.currentSlide = slideIndex;
		this.slideFx.start(action);
	},

	autoplay: function(){
		this.createFx();
		this.slideshowInt = this.rotate.periodical(this.options.slideInterval, this);
		this.fireEvent('onAutoPlay');
	},

	stop: function(){
		clearInterval(this.slideshowInt);
		this.fireEvent('onStop');
	},

	rotate: function(){
		current = this.currentSlide;
		next = (current+1 >= this.slides.length) ? 0 : current+1;
		this.showSlide(next);
		this.fireEvent('onRotate');
	},

	show: function() {
		$(this.options.carouselContainer).setStyle('visibility','visible');
		if(!$(this.options.carouselContainer).isVisible())$(this.options.carouselContainer).setStyle('display','block');
	},

	hide: function(){
		$(this.options.carouselContainer).setStyle('visibility','hidden');
	}
	
});

CNETcarousel.implement(new Options);

CNETcarousel.implement(new Events);

var CNETcarouselWithButtons = CNETcarousel.extend({

	initialize:function(el, options){
		this.parent(el, $merge({
			bubbleButtonBGImgSelector: '.bbg',
			buttonOnGifSrc: 'http://i.i.com.com/cnwk.1d/i/fd/c/green_button.gif',
			buttonOffGifSrc: 'http://i.i.com.com/cnwk.1d/i/fd/c/gray_button.gif'
		}, options));
	},
	
	showSlide: function(slideIndex){
		this.buttons.each(function(button, index){
			$(button).getElement(this.options.bubbleButtonBGImgSelector).src = (index == slideIndex)?this.options.buttonOnGifSrc:this.options.buttonOffGifSrc;
		}, this);
		this.parent(slideIndex);
	}
	
});

var carousel = null;