var spConnect = null;
dojo.require("dojo.date.locale");
dojo.require("dojo.date.stamp");
dojo.require("uxebu.widget.EventList");

dojo.addOnLoad(function(){

	// connect to selectChild of the right tab container until the scrollPane
	// is shown for the first time, then call layout and disconnect the subscription
	spConnect = dojo.subscribe("index-tabs-right-selectChild",function(m){
		if(m == dijit.byId("spotlightTab")){
			dijit.byId("spotlightScroller").layout();
			dojo.unsubscribe(spConnect);					
		}
	});
	
	dojo.connect(dojo.byId("tutorial_scroller_button_up"), "onclick", function() { scrollerScrollUp("tutorial"); });
	dojo.connect(dojo.byId("tutorial_scroller_button_down"), "onclick", function() { scrollerScrollDown("tutorial"); });
	
	dojo.connect(dojo.byId("video_scroller_button_up"), "onclick", function() { scrollerScrollUp("video"); });
	dojo.connect(dojo.byId("video_scroller_button_down"), "onclick", function() { scrollerScrollDown("video"); });	

	// load content
	dojo.xhrGet({
		url: "/content/wp-json.php?type=frontpage", 
		handleAs: 'json',
		preventCache: true,
	
		timeout: 10000, // Time in milliseconds
		
		// The LOAD function will be called on a successful response.
		load: function(response, ioArgs){
console.log(response);
			//renderEvents(response.events);
			renderNews(response.news);
			renderCookie(response.cookie);
			//renderChallenge(response.challenge);
			renderMenu(response.menu);
			renderItems('tutorial', response.tutorials);
			renderItems('video', response.videos);
		},
		
		// The ERROR function will be called in an error case.
		error: function(response, ioArgs){ 
			console.error("HTTP status code: ", ioArgs.xhr.status);
			return response;
		}
	});	
});

spotlightData = [];
spotlightData.tutorial = [];
spotlightData.video = [];

renderNews = function(response) {
	var strNews = '<div style="padding-right: 20px;"><h3>Latest news</h3><p id="dojoc-news">'; 
	
	for (var i=0; i<response.length; i++) {
		var date = dojo.date.stamp.fromISOString(response[i].datetime.replace(/ /, "T"));
		date = dojo.date.locale.format(date, {formatLength:'full',selector:'date'});
		
		strNews += '<div dojoType="dojoc.sandbox.rounded.Rounded" style="margin-bottom: 15px;" bgImg="/images/sqr-bg.png" bgImgAlt="/images/sqr-bg.gif"> ';
		strNews += '<h4><span class="news-date">'+date+'</span> <br /><a href="/content/?p='+response[i].id+'">'+response[i].name+'</a></h4>';
		if (response[i].intro.length > 100) {
			response[i].intro = response[i].intro.substr(0, 100)+'...';	
		}
		strNews += '<p>'+response[i].intro+'</p></div>';
	}
	strNews += '</p></div>';
	
	var tabSubscribe = dojo.subscribe("mainTabContainer-selectChild",function(node){
	    // the tabContainer changed children, node is the new one
	    if (node.id == 'campus-news'){
		    dojo.unsubscribe(tabSubscribe);
	    	node.setContent(strNews);
		}
	});
};

renderEvents = function(response) {
	dojo.byId('dojoc-upcoming-events').innerHTML = '';
	for (var i=0; i<response.length; i++) {
		var event_item = document.createElement('div');
		event_header = document.createElement('h4');
		
		if (response[i].allday == 1) {
			var date = dojo.date.stamp.fromISOString(response[i].datetime.replace(/ /, "T"));
		}else{
			var date = dojo.date.stamp.fromISOString(response[i].datetime.replace(/ /, "T"));
		}
		date = dojo.date.locale.format(date, {formatLength:'full',selector:'date'});
		
		event_header.innerHTML = '<span class="news-date">'+date+'</span> <br /><a href="/content/?p='+response[i].id+'">'+response[i].name+'</a>';
		var event_content = document.createElement('p');
		if (response[i].intro.length > 100) {
			response[i].intro = response[i].intro.substr(0, 100)+'...';	
		}
		event_content.innerHTML = response[i].intro;
		event_item.appendChild(event_header);
		event_item.appendChild(event_content);
				
		dojo.byId('dojoc-upcoming-events').appendChild(event_item);
		
		var rounded = new dojoc.sandbox.rounded.Rounded({bgImg: "/images/sqr-bg-light.png", bgImgAlt: "/images/sqr-bg-light.gif"}, event_item);
	}	
};

renderChallenge = function(response) {
	dojo.byId('dojoc-challenge-title').innerHTML = response[0].name;
	dojo.byId('dojoc-challenge-content').innerHTML = '';
	ch_item = document.createElement('div');
	ch_item.innerHTML = response[0].intro;	
	dojo.byId('dojoc-challenge-content').appendChild(ch_item);
};

renderCookie = function(response) {
	var date = dojo.date.stamp.fromISOString(response[0].datetime.replace(/ /, "T"));
	
	date = dojo.date.locale.format(date, {formatLength:'full',selector:'date'});
	dojo.byId('dojoc-cookie-date').innerHTML = date;
	if (response[0].name) { dojo.byId('dojoc-cookie-title').innerHTML = '<a href="/content/?p='+response[0].id+'">'+response[0].name+'</a>, <span class="cookie-author">by '+response[0].author+'</span>'; }
	dojo.byId('dojoc-cookie-content').innerHTML = '';
	ch_item = document.createElement('div');
	ch_item.innerHTML = response[0].intro.split('<!--more-->')[0]+'... <p><a href="/content/?p='+response[0].id+'">Read this cookie</a></p>';	
	
	dojo.byId('dojoc-cookie-content').appendChild(ch_item);
	
	var rounded = new dojoc.sandbox.rounded.Rounded({bgImg: "/images/sqr-bg.png", bgImgAlt: "/images/sqr-bg.gif"}, ch_item);
};

renderMenu = function(response) {
	var str = '';
	var init = false;
	var is_open = false;
	var element_connect = [];

        str += '<div class="btn-teaser" id="btn-teaser-explorer">';
        str += '<div class="rndd-alert btn-std">';
        str += '<div class="rndd-alert-content">';
        str += '<div class="rndd-alert-top"></div>';
        str += '<a href="/bookcorner">Dojo - Book corner <span class="new">(new)</span></a>';
  	str += '</div>';
        str += '<div class="rndd-alert-bottom"><div></div></div>';
        str += '</div>';
        str += '</div>  ';

	
	str += '<div class="btn-teaser" id="btn-teaser-explorer">';
	str += '<div class="rndd-alert btn-std">';
	str += '<div class="rndd-alert-content">';
	str += '<div class="rndd-alert-top"></div>';
	str += '<a href="/podcast">Dojo.cast() - Podcast <span class="new">(new)</span></a>';
	str += '</div>';
	str += '<div class="rndd-alert-bottom"><div></div></div>';
	str += '</div>';
	str += '</div>  ';
	
	str += '<div class="btn-teaser" id="btn-teaser-explorer">';
	str += '<div class="rndd-alert btn-std">';
	str += '<div class="rndd-alert-content">';
	str += '<div class="rndd-alert-top"></div>';
	str += '<a href="/explorer">Dojo Explorer</a>';
	str += '</div>';
	str += '<div class="rndd-alert-bottom"><div></div></div>';
	str += '</div>';
	str += '</div>  ';
	
	for (entry in response) {
		if (response[entry].category_parent == 0) {
			if (is_open == true) {
				str += '</ul>';
	    		str += '</div> ';	
			}
			str += '<div class="btn-teaser" id="btn-teaser-'+response[entry].term_id+'">';
			str += '<div class="rndd-alert btn-std">';
			str += '<div class="rndd-alert-content">';
			str += '<div class="rndd-alert-top"></div>';
			str += response[entry].name;
			str += '</div>';
			str += '<div class="rndd-alert-bottom"><div></div></div>';
			str += '</div>';
			str += '</div>  ';
					
			current_id = response[entry].term_id;
			is_open = false;
			element_connect[element_connect.length] = current_id;
		}
		else {
			if (is_open == false) {
				str += '<div id="teaser-'+current_id+'" style="display: none;">';
				str += '<ul class="teaser-menu-ul">';
				is_open = true;
			}
		    str += '<li><a href="/content/?cat='+response[entry].term_id+'">'+response[entry].name+'</a></li>';
		}
	}
	if (is_open == true) {
		str += '</ul>';
		str += '</div> ';	
	}
	dojo.byId('teaser-menu-container').innerHTML = str;
	
	// connect events
	for (var i=0; i<element_connect.length; i++) {
		var callback = menuCallback(element_connect, i);
		dojo.connect(dojo.byId('btn-teaser-'+element_connect[i]), 'onclick', callback);
	}
};

menuCallback = function(element_conn, index) {
	return function(evt) {
		for (var j=0; j<element_conn.length; j++) {
			if (dojo.byId('teaser-'+element_conn[j])) {
				if (j == index) {
					dojo.fx.wipeIn({
						node: "teaser-"+element_conn[j], 
						duration: 200
					}).play();
				}
				else {
					dojo.style('teaser-'+element_conn[j], 'display', 'none');
				}
			}
		}
	};
};

current_scrollview = [];
current_scrollview.tutorial = 1;
current_scrollview.video = 1;

currentItem = [];
currentItem.video = 0;
currentItem.tutorial = 0;

container_height = [];
container_height.tutorial = 135;//box.height;	
container_height.video = 135;//box.height;	

container_width = [];
container_width.tutorial = 209;//box.height;
container_width.video = 209;//box.height;			

max_elements = [];
max_elements.tutorial = 1;
max_elements.video = 1;

element_height = [];
element_height.tutorial = Math.floor(container_height.tutorial/max_elements.tutorial);
element_height.video = Math.floor(container_height.video/max_elements.video);

renderedItems = [];
renderedItems.video = [];
renderedItems.tutorial = [];

renderScrollStatus = function(name) {
	current_scrollview.tutorial = 1;
	current_scrollview.questions = 1;
	current_scrollview.overview = 1;

	while(dojo.byId(name+"_scroller_status").hasChildNodes()){ dojo.dom.destroyNode(dojo.byId(name+"_scroller_status").firstChild); }

	count = dojo.byId(name+"_scroll_container").childNodes.length;

	if (count == 1) {
		dojo.html.setDisplay(dojo.byId(name+'_scroller_status_container'), 'none');
		dojo.html.setDisplay(dojo.byId(name+'_scroller_button_up'), 'none');
		dojo.html.setDisplay(dojo.byId(name+'_scroller_button_down'), 'none');
		return;
	}
	dojo.html.setDisplay(dojo.byId(name+'_scroller_status_container'), '');
	dojo.html.setDisplay(dojo.byId(name+'_scroller_button_up'), '');
	dojo.html.setDisplay(dojo.byId(name+'_scroller_button_down'), '');

	height = (422/2)-((count*11)/2);
	dojo.byId(name+"_scroller_status").style.top = height+'px';

	for (var i=1;i<=count;i++) {
		if (i == 1) {
			color = '#ad2c31';
		} 
		else {
			color = '#490202';
		}

		statusElement = document.createElement('div');
		statusElement.innerHTML = '';

		dojo.html.setStyle(statusElement,'position', 'relative');
		dojo.html.setStyle(statusElement,'top','-50%');
		dojo.html.setStyle(statusElement,'width','10px');
		dojo.html.setStyle(statusElement,'height','9px');
		dojo.html.setStyle(statusElement,'background-color',color);
		dojo.html.setStyle(statusElement,'margin-bottom','2px');
		dojo.html.setStyle(statusElement,'font-size','1px');

		statusElement.setAttribute('id', name+"_scroller_status_"+i);
		dojo.byId(name+"_scroller_status").appendChild(statusElement);

		dojo.byId(name+"_scroller_status_"+i).i = i;
		dojo.event.connect(dojo.byId(name+"_scroller_status_"+i), 'onclick', dojo.lang.hitch(dojo.byId(name+"_scroller_status_"+i),function(e){skipScroller(this.i, name);}));
	}
};

skipScroller = function(moveTo, name) {
	if (current_scrollview[name] < moveTo) {
		for (i=current_scrollview[name]; i<moveTo; i++) {
			scrollerScrollDown(name);
		}
	}
	else if (current_scrollview[name] > moveTo) {
		for (i=current_scrollview[name]; i>moveTo; i--) {
			scrollerScrollUp(name);
		}				
	}
};

updateScrollview = function(name) {
	count = dojo.byId(name+"_scroll_container").childNodes.length;

	for (var i=1;i<=count;i++) {
		if (i == current_scrollview[name]) {
			color = '#ad2c31';
		} 
		else {
			color = '#490202';
		}
		dojo.byId(name+"_scroller_status_"+i).style.backgroundColor = color;
	}
};

scrollerScrollUp = function(name) {
	scrollerView = current_scrollview[name];

	if (current_scrollview[name] == 1) {
		current_scrollview[name] = dojo.byId(name+"_scroll_container").childNodes.length;
		nextView = current_scrollview[name];
	}
	else {
		current_scrollview[name]--;
		nextView = current_scrollview[name];
	}
	
	if (dojo.byId(name+"_scroll_container").childNodes.length <= 1) { return; }

	for (var i=1; i<=dojo.byId(name+"_scroll_container").childNodes.length; i++) {
		if (i != nextView && i != scrollerView) {
			dojo.byId(name+'_view_'+i).style.visibility = 'hidden';
		}
	}	
	
	currentItem[name] = nextView-1;
	
	dojo.byId(name+'_view_'+nextView).style.left = container_width[name]+'px';
	dojo.byId(name+'_view_'+nextView).style.visibility = '';
	dojo.byId(name+'_view_'+nextView).style.top = 0+'px';

	dojo.byId(name+'_view_'+scrollerView).style.top = 0+'px';
	dojo.byId(name+'_view_'+scrollerView).style.visibility = '';
	dojo.byId(name+'_view_'+scrollerView).style.left = 0+'px';	
			
	
	dojox.fx.slideBy({node: name+'_view_'+nextView, top: 0, left: -container_width[name], duration: 200}).play();	
	dojox.fx.slideBy({node: name+'_view_'+scrollerView, left: -container_width[name], top: 0, duration: 200}).play();
		
	//updateScrollview(name);	
};

		

scrollerScrollDown = function(name) {	
	scrollerView = current_scrollview[name];

	if (current_scrollview[name] == dojo.byId(name+"_scroll_container").childNodes.length) {
		current_scrollview[name] = 1;
		nextView = current_scrollview[name];
	}
	else {
		current_scrollview[name]++;
		nextView = current_scrollview[name];
	}	

	if (dojo.byId(name+"_scroll_container").childNodes.length <= 1) { return; }
	
	for (var i=1; i<=dojo.byId(name+"_scroll_container").childNodes.length; i++) {
		if (i != nextView && i != scrollerView) {
			dojo.byId(name+'_view_'+i).style.visibility = 'hidden';
		}
	}
	
	currentItem[name] = nextView-1;

	dojo.byId(name+'_view_'+nextView).style.left = -container_width[name]+'px';
	dojo.byId(name+'_view_'+nextView).style.visibility = '';
	dojo.byId(name+'_view_'+nextView).style.top = 0+'px';

	dojo.byId(name+'_view_'+scrollerView).style.top = 0+'px';
	dojo.byId(name+'_view_'+scrollerView).style.visibility = '';
	dojo.byId(name+'_view_'+scrollerView).style.left = 0+'px';
	
	dojox.fx.slideBy({node: name+'_view_'+nextView, top: 0, left: container_width[name], duration: 200}).play();
	dojox.fx.slideBy({node: name+'_view_'+scrollerView, top:0, left: container_width[name], duration: 200}).play();
	//updateScrollview(name);	
};

renderItems = function(name, data) {
	spotlightData[name] = data;
			
	super_container = dojo.byId(name+'_scroll_container');

	while (dojo.byId(name+"_scroll_container").hasChildNodes()) {
		dojo.byId(name+"_scroll_container").removeChild(dojo.byId(name+"_scroll_container").firstChild);
	}
	while (dojo.byId(name+"_scroll_header").hasChildNodes()) {
		dojo.byId(name+"_scroll_header").removeChild(dojo.byId(name+"_scroll_header").firstChild);
	}
	
	// get the actual container height

	element_space = max_elements[name];			
	view = 1;
	element_container = document.createElement('div');
	dojo.style(element_container, 'height', container_height[name]+'px');
	dojo.style(element_container, 'width', container_width[name]+'px');
	element_container.setAttribute('id',name+'_view_'+view);
	dojo.addClass(element_container, 'scroller_view');	
	super_container.appendChild(element_container);

	for (i=1; i<=data.length; i++) {
		j = i-1;

		tutorialId = data[j].id;
		renderedItems[name][tutorialId] = true;		
		scrollField = document.createElement('div');

		dojo.style(scrollField, 'height', element_height[name]+'px');
		//field.style.backgroundColor = '';

		header = document.createElement('h4');	
		if (data[j].name.length > 29) {
			data[j].name =data[j].name.substr(0, 30)+'...';	
		}
		header.innerHTML = data[j].name;
		scrollField.appendChild(header);
	
 		if (data[j].img) {
			img = document.createElement('img');
		        img.setAttribute('src', data[j].img);
                	scrollField.appendChild(img);
		}else{
			// FIXME: With WP upgrade to 2.8 we lost all article images, grrr
			// Need to find better plugin
			data[j].img = '/images/article-noimg.gif';
		}
		
		var text_node = document.createElement('p');
		if (data[j].intro.length > 100) {
			data[j].intro = data[j].intro.substr(0,100)+'...';	
		}
		
		text_node.innerHTML = data[j].intro.split('<!--more-->')[0];

		scrollField.appendChild(text_node);
		
		element_container.appendChild(scrollField); 

		if (i%element_space === 0) {		
			view++;
			if (view <= data.length) {
				element_container = document.createElement('div');
							
				dojo.style(element_container, 'height', container_height[name]+'px');
				dojo.style(element_container, 'width', container_width[name]+'px');
				dojo.style(element_container, 'visibility', 'hidden');
				element_container.setAttribute('id',name+'_view_'+view);
				dojo.addClass(element_container, 'scroller_view');		
				super_container.appendChild(element_container);		
			}								
		}
	}

	if (data.length%element_space !== 0) {
		super_container.appendChild(element_container);
	}

};