/*
 * ImgCarousel is an experiment using YUI Carousel Control to
 * implement a list of youtube videos I especially like...  It
 * was really just a learning exercise, JavaScript, XML, YUI,
 * and more...
 */

var carousel;  // global to hold pointer to Carousel object

var carouselItems = {};  // container for html text needed to access
                         // video clips, indexed by clip identifier

var myLogReader;

/* called from SAXEventHandler to add item to carousel */
function addCarouselItem( id, videoHTML ) {
    carouselItems[ id ] = videoHTML;
    var htmlText = '<img src="' + id + '.jpg" height="128" width="128"></img><p><b>' + id + '</b></p>';
    var retVal = carousel.addItem( htmlText );
    //YAHOO.log("addCarouselItem: " + retVal + " '" + htmlText + "'");
    carousel.render();
}

/* called when the xml data has been returned */
function xmlLoadCallback( xmlString ) {
    //YAHOO.log(xmlString);
	var saxParser = new SAXDriver();
	var eventHandler = new SAXEventHandler();
	saxParser.setDocumentHandler( eventHandler );
	saxParser.setErrorHandler( eventHandler );
	saxParser.setLexicalHandler( eventHandler );
	//carousel.hide();
	saxParser.parse( xmlString );
	//var items = carousel.getItems();
	//if ( items == null ) {
	//	YAHOO.log("xmlLoadCallback: getItems() returned null!");
	//} else {
	//	YAHOO.log("xmlLoadCallback: numItems=" + items.length);
	//	YAHOO.log("xmlLoadCallback: item[0]='" + items[0] + "'");
	//	//dumpProps(items[0]);
	//}
	carousel.show();
	carousel.on("itemSelected", itemSelectedCallback );
	carousel.focus();
	//var elem = document.getElementById("imgCarousel");
    //YAHOO.log(elem.innerHTML );
}

/* called when carousel item is selected */
function itemSelectedCallback( idx ) {
	//YAHOO.log("itemSelectedCallback: idx=" + idx);
    var elem = carousel.getElementForItem(idx);
    if ( elem == null ) {
    	alert("itemSelectedCallback: NULL element for idx=" + idx);
    	return;
    }
    var clipId = elem.innerHTML;
    //YAHOO.log("itemSelectedCallback: clipId='" + clipId + "'");
    clipId = clipId.substring(0, clipId.indexOf('.jpg"'));
    var chIdx = clipId.length - 1;
    while ( chIdx >= 0 ) {
    	var ch = clipId.charAt( chIdx );
    	if ( ch == '/' || ch == '"' ) {
    		chIdx++;
    		break;
    	}
    	chIdx--;
    }
    clipId = clipId.substring( chIdx );
    //YAHOO.log("itemSelectedCallback: clipId='" + clipId + "'");
    elem = document.getElementById("video");
    elem.innerHTML = carouselItems[clipId];
}

/*
 * MAIN
 */

//alert('MAIN: got here!');
var loader = new YAHOO.util.YUILoader({
	base: "",
	require: ["carousel","logger"],  // components i'm going to use
	loadOptional: false, 
	combine: true,
	filter: "MIN",
	allowRollup: true,
	timeout: 10000,

	//onSuccess is the function that YUI Loader should
	// call when all components are successfully loaded. 
	onSuccess: function() {
		//YAHOO.log("YUILoader: success");
		var carouselCfgObj = {
			isCircular: true,
			numVisible: 3
		};
		//myLogReader = new YAHOO.widget.LogReader();
		//YAHOO.widget.Logger.enableBrowserConsole();
		carousel = new YAHOO.widget.Carousel("imgCarousel", carouselCfgObj);
		xmlIOLoadLocalData("clipList.xml.htm", "xmlLoadCallback");
	}, 
	 
	// should a failure occur, the onFailure function will be executed 
	onFailure: function(o) { 
        alert("YUILoader: failure, dump=" + YAHOO.lang.dump(o)); 
    } 
}); 
	 
// Calculate the dependencies and insert the required 
// scripts and css resources into the document 
loader.insert();