/** Load in the content via XML **/
var XmlBloggers = Class.create();
XmlBloggers.prototype = {
	initialize: function () {
		this.xml_file = '/content/xml_shuttle/parent_blogger.xml';
		this.container = $$('#parentBloggers .container').first();
		this.loadXmlFile();
	},
	loadXmlFile: function () {
		
		xmlReady = this.xmlReady.bind(this);
		new Ajax.Request(this.xml_file, {method: 'get', onSuccess: xmlReady});
	},
	xmlReady: function (transport) {
		
		
		var rootEl = transport.responseXML.getElementsByTagName('shuttle')[0];
		this.items = rootEl.getElementsByTagName('item');
		this.buildContent();
		startBloggerCarousel();
		//this.setupCarousel();
	},
	getValue: function (item, tag) {
		
		var tag=item.getElementsByTagName(tag)[0];
		return tag.firstChild.nodeValue;
	},
	buildContent: function () {
		
		this.ul = new Element('ul');
		this.items.length.times(
			function (index) {
				
				var li = new Element('li');
				
			
				var p1 = new Element('p');
				
				
				var srcUrl = this.getValue(this.items[index], 'imagePath');
				var p1_img = new Element('img',{
					src: srcUrl,
					width: 78,
					height: 54
				});
				
				
				p1.insert(p1_img);
				li.insert(p1);
				
				var p2 = new Element('p');
				var p2_a = new Element('a',{
					href: this.getValue(this.items[index],'link')
				}).update(this.getValue(this.items[index],'headline'));
				
				
				p2.insert(p2_a);
				li.insert(p2);
				
				var p3 = new Element('p').update(this.getValue(this.items[index],'blurb'));
				
				
				li.insert(p3);
				this.ul.insert(li);
				
			}.bind(this)
		);
		this.container.insert(this.ul);
	},
	setupCarousel: function () {
		
	}
} 

var parentsCarousel;
function startBloggerCarousel() {
	parentsCarousel = new UI.Carousel("parentBloggersContent");
		
	/** Setup parents carousel **/
	parentsCarousel.watchNextButton = function (e) {
		// Check if the next button is active
		var nextClassName = "next_button" + parentsCarousel.options.disabledButtonSuffix;
		if (!e.element().hasClassName(nextClassName)) {	
			// Enabled, get current indicator number, and advance it by one
			var currentIndicator = $$("div#parentBloggers div.indicator_bar div.indicator_active").first();
			parentsCarousel.setIndicator(parseInt(currentIndicator.identify().substr(currentIndicator.identify().length - 1, 1))+1);
			parentsCarousel.stopWatchingButtons();
		}
	}
	
	parentsCarousel.watchPreviousButton = function (e) {
		// Check if  the previous button is active
		var previousClassName = "previous_button" + parentsCarousel.options.disabledButtonSuffix;
		if (!e.element().hasClassName(previousClassName)) {		
			// Enabled, get current indicator number, and reverse it by one
			var currentIndicator = $$("div#parentBloggers div.indicator_bar div.indicator_active").first();
			parentsCarousel.setIndicator(parseInt(currentIndicator.identify().substr(currentIndicator.identify().length - 1, 1))-1);
			parentsCarousel.stopWatchingButtons();
		}
	}
	
	var watchPreviousParentBind = parentsCarousel.watchPreviousButton.bindAsEventListener();
	var watchNextParentBind = parentsCarousel.watchNextButton.bindAsEventListener();
	
	parentsCarousel.setIndicator = function (num) {
		var num = (num == null) ? 1 : num;
		
		// clear the indicators
		$$("div#parentBloggers div.indicator_bar").first().childElements().each(function (indicator) {
			indicator.className = "indicator";
		});
		
		$("parent_blogger_indicator_"+num).className = "indicator_active";
	}
	
	parentsCarousel.buildIndicators = function () {
		var indicators = ((parentsCarousel.container.childElements().length) / 3).ceil();
		var indicatorBar = $$("div#parentBloggers div.indicator_bar").first();
		
		indicators.times(function (index) {
			indicator = new Element("div", {'class': "indicator", id: "parent_blogger_indicator_"+(index+1)});
			indicator.style.cursor = "pointer";
			indicatorBar.appendChild(indicator.observe("click", function (e) {
				ind = e.element();
				num = ind.identify().substr(ind.identify().length - 1,1);
				parentsCarousel.setIndicator(num);
				parentsCarousel.scrollTo((num - 1 ) * 3);
			}));
		});
		
		parentsCarousel.setIndicator();
		parentsCarousel.watchButtons();
	}
	
	parentsCarousel.watchButtons = function () {
		$(parentsCarousel.nextButton).observe("click", watchNextParentBind);
		$(parentsCarousel.previousButton).observe("click", watchPreviousParentBind);
	}
	
	parentsCarousel.stopWatchingButtons = function() {
		$(parentsCarousel.nextButton).stopObserving("click", watchNextParentBind);
		$(parentsCarousel.previousButton).stopObserving("click", watchPreviousParentBind);
	}
	
	parentsCarousel.observe("scroll:ended", function (e) {
		parentsCarousel.updateSize();
		parentsCarousel.watchButtons();
	});
	
	
	parentsCarousel.buildIndicators();
	
	if (parentsCarousel.elements.size() < 3.5) {
		$(parentsCarousel.nextButton).addClassName("next_button"+parentsCarousel.options.disabledButtonSuffix);
	}
	
	// disable the previous button on start manually, some IE issue..
	$(parentsCarousel.previousButton).addClassName('previous_button'+parentsCarousel.options.disabledButtonSuffix);
}


function doParentBloggersCarousel() {
	
	new XmlBloggers();
}