////////////////////////////////////////////////////////////////////////////////////////
// ABIL plugin for jQuery 
// Custom jQuery functionality for ABIL web site
// Proprietary -- not for general distribution
// Values are stored in two objects:  abil (page-wide handling) and hero (hero display)
// Methods extend jQuery
// Karl Jones : September 2010
////////////////////////////////////////////////////////////////////////////////////////

(function($){

var abil = new Object;			// ABIL, the client

abil.page = '';		// get this from ColdFusion, defines server-side page template
abil.pageCss = null;	// TODO, rename abil.css

var hero = new Object;			// Hero is the big splashy display, the main impressive thing on the page

hero.id = "hero";		// name of hero selector, caller must provide, thus "hero" for the element having id="hero"

hero.test = '';    // [{ name: 'foo'}, { name: 'foo2'}];

hero.test = 'function () { alert("test");} );'   
hero.test = 'var foo = "Hello World"; alert(foo);'   

hero.name = 'anonymous';

hero.css = '';

hero.elementRoot = null;

hero.chapters = [];

hero.chapter_current = null;

// END configuration parameters //////////////////////////////////////////////////

// Functions


$.fn.setPageCss = function (rules) {
	abil.pageCss = rules;
	return this;	
}

$.fn.getPageCss = function () {
//	abil.pageCss = rules;
//	return this;	

	if (abil.pageCss) {
		return this.each( function() {
			var out = '<style>';
			
			out += '.test { color:red }';
			out += '</style>';
			$(this).html = out;
		});
	} else {
		return this;	
	}

}

$.fn.setHeroElementRoot = function () {
//	initialize the Hero content
	hero.elementRoot = this;			// TODO: test
}

$.fn.setHeroCss = function (str) {
//	initialize the Hero content
	hero.css = str;			
	return this;
}

$.fn.runHero = function () {
	//	initialize the Hero content
	// evaluate css
//	$('#hero').css({'background-color':'#112299', 'height':'300px'});
	if (hero.css) {
		//eval ();
		//alert('hero.css: ' + hero.css);
//		eval ( "jQuery('#" + hero.id + "').css({'background-color':'#1122cc', 'height':'200px'});");
		eval ( "jQuery('#" + hero.id + "').css({" + hero.css + "});");

	}	

//	eval ( "jQuery('#" + hero.id + "').html('<p style=\"color:gray\">Evaluation: ID successful *</p>');");
//	eval ( "jQuery('#" + hero.id + "').css({'background-color':'#1122cc', 'height':'300px'});");

	switch (abil.page) {
	case 'HOME':
//		$().initHeroHome();
		return this;
		break;
	case 'GALLERY':
//		$().initHeroGallery();
		return this;
		break;
	case 'ABOUT':
		break;
	default:
		//
	}
	return this;	
}

$.fn.initHeroGallery = function (options) {
//	initialize the Hero content
//	alert('initHeroHome 1 ');
	var $kids = $('#hero ul li.chapter a');		// TODO: convert this hardcoded selector to caller-config
	var len = $kids.length;
	//var len = $kids.addClass("hilite").length;
	var out = '';
	var chapterCount = 0;
	$kids.each(
		function(intIndex) {
			// TODO: define an class for Chapter objects ... for now, use this object literal:
			hero.chapters.push( { index: intIndex, html: $(this).html(), href : $(this).attr('href'), title : $(this).attr('title') } );
		}		 
	);
	
//	alert('initHeroHome 2 ');
	out += '<div id="hero-nav">';
//	out += '<div style="height:30px" class="hero-nav-chapter-color"></div>';	// padding at top of column
	out += '<div class="hero-nav-chapter-color"><img src="/images/abil-gallery-sidebar-proto.jpg" alt="TEST sidebar" /></div>';
	out += '</div>';

//	out += '<div style="height:10px" class="hero-nav-chapter-color"></div>';	// padding at top of column
	out += '<div id="hero-main"></div>';	// main Hero content
	
	out += '<div id="thumbnails">';

	// terrible hack for testing, TODO write generalized handler
	for (var i = 0; i < hero.chapters.length; i++){ 
		var img;
		switch (i) {
		case 0:
			img = 'abil-gallery-hero-thumb.jpg';
			break;
		case 1:
			img = 'abil-gallery-hero-thumb2.jpg';
			break;
		case 2:
			img = 'abil-gallery-hero-thumb3.jpg';
			break;
		default:
			//
			img = 'abil-hero-gallery-hero-thumb.jpg';
		}

out += '<div id="thumbdiv-' + i + '" class="thumb"><a id="thumblink-' + i + '" href="' + hero.chapters[i].href + '" class="thumb"><img id="thumbimg-' + i + '" src="/images/' + img + '" class="thumb" /></a></div>'; 
	}

	out += '...</div>';
//	alert('initHeroHome: ' + out);
	$(hero.elementRoot).html(out);
//	$(hero.elementRoot).html($('<div>HERO GALLERY TEST!</div>'));


	return this;	
}





$.fn.dumpProps = function (obj, parent) {
   // Go through all the properties of the passed-in object
   for (var i in obj) {
      // if a parent (2nd parameter) was passed in, then use that to
      // build the message. Message includes i (the object's property name)
      // then the object's property value on a new line
      if (parent) { var msg = parent + "." + i + "\n" + obj[i]; } else { var msg = i + "\n" + obj[i]; }
      // Display the message. If the user clicks "OK", then continue. If they
      // click "CANCEL" then quit this level of recursion
      if (!confirm(msg)) { return; }
      // If this property (i) is an object, then recursively process the object
      if (typeof obj[i] == "object") {
         if (parent) { dumpProps(obj[i], parent + "." + i); } else { dumpProps(obj[i], i); }
      }
   }
   return this;
}

$.fn.initHeroHome = function (options) {
//	initialize the Hero content
//	alert('initHeroHome 1 ');
	var $kids = $('#hero ul li.chapter a');
	var len = $kids.length;
	//var len = $kids.addClass("hilite").length;
	var out = '';
	var chapterCount = 0;
	$kids.each(
		function(intIndex) {
			// TODO: define an class for Chapter objects ... for now, use this object literal:
			hero.chapters.push( { index: intIndex, html: $(this).html(), href : $(this).attr('href') } );
		}		 
	);
	
//	alert('initHeroHome 2 ');
	out += '<div id="hero-nav">';
	out += '<div style="height:30px" class="hero-nav-chapter-color"></div>';	// padding at top of column
	for (var i = 0; i < hero.chapters.length; i++){ 
		out += '<div id="hero-nav-chapter-' + i + '" class="hero-nav-chapter"><a href="' + hero.chapters[i].href + '">' + hero.chapters[i].html + '</a></div>'; 

/*
		$('#hero-nav-chapter-' + i).hover(
			function () {
				// over
				$(this).css('background-color','white');
			}, 
			function () {
				// out	
				$(this).css('background-color','#aaaaaa');	// TODO: class handling instead
			}
		);
*/		
		
	}
//	out += '<div style="height:10px" class="hero-nav-chapter-color"></div>';	// padding at top of column
	out += '</div>';
	out += '<div id="hero-main"></div>';	// main Hero content
//	alert('initHeroHome: ' + out);
	$(hero.elementRoot).html(out);


	for (var i = 0; i < hero.chapters.length; i++){ 
//		var message = i;
		$('#hero-nav-chapter-' + i).bind('mouseenter', {msg: i}, function(event) {
//		  alert(event.data.msg);
			var i2 = +event.data.msg;
			i2++;
			//alert(i2);
				$(this).css('background-color','white');
				$(this).css('text-decoration','underline');

			$("#hero-main").css('background-image','url(/images/hero-home-test' + i2 + '.jpg)');
		});
		message = 'mouseleave: ' + i;
		$('#hero-nav-chapter-' + i).bind('mouseleave', function(event) {
				$(this).css('background-color','#aaaaaa');	// TODO: class handling instead
				$(this).css('text-decoration','none');

//		  alert(event.data.msg);
		});


/*
		$('#hero-nav-chapter-' + i).hover(
			function (i) {
				// over
				//$().dumpProps(i);
				
				$(this).css('background-color','white');
				$(this).css('text-decoration','underline');
				$("#hero-main").css('background-image','url(../images/hero-home-test' + i2 + '.jpg)');
			}, 
			function (i) {
				// out	
				$(this).css('background-color','#aaaaaa');	// TODO: class handling instead
				$(this).css('text-decoration','none');
//				$("#hero-main").css('background-image','url(../images/hero-home-test' + i2 + '.jpg)');
			}
		);
*/

	}
	
	// TODO, abstract this to generalized handler:
	
	
	return this;	
}



$.fn.doNothing = function () {
	alert('DO NOTHING, HUH?');
	return this;
}

$.fn.doNothing2 = function () {
	alert('DO NOTHING, HUH? 2');
	return this;
}


$.fn.testAbil= function () {
	alert ('abil: ' + abil.page );
	// return $;		// TODO: experiments
}


$.fn.initAbil = function (abil_page) {
	abil.page = abil_page;
}


$.fn.testInit = function (js) {
//	debug tool, call this on a link, click link to eval a test string
	hero.test = js;	
	return this.each( function() {
		var obj = $(this);
		obj.click( function(event) {
			eval(hero.test);
			event.preventDefault();			
		});
	});
}

$.fn.testSet = function (js) {
//	testing/debug variable, for use with eval
	hero.test = js;	
	return this;
}

$.fn.testGet = function () {
//	testing/debug variable, for use with eval
	return hero.test;	
}

$.fn.testEval = function (evalString) {
//	alert ('testEval: ' + evalString);
	eval(evalString);
	return this;
}

$.fn.heroNavSetButtonState = function (options) {
	return this.each(function() {
		var obj = $(this);
		var ordinal;
		if (options.ordinal) { ordinal = options.ordinal; config.heroNavImageCurrent = options.ordinal; } else { ordinal = 1; config.heroNavImageCurrent = 1; }
		//alert(ordinal + ' : ' + config.heroNavImageCurrent );
		var html = '<span class="text">Change Image:</span> ';
			for (var i = 1; i<= config.heroData.length; i++) {
			if (i == config.heroNavImageCurrent) {
				html += ' <img src="'+ config.heroNavImageSelected +'" alt="" height="" width="" />';		
			} else {
//				html += ' <img src="'+ heroNavImageUnselected +'" alt="" height="" width="" />';		
				html += ' <a href="" id="heroImageLink' + i + '" class="heroImageLink"><img src="'+ config.heroNavImageUnselected +'" alt="" height="" width="" /></a>';		
			}
		}
		obj.html(html);			
	});
}


$.fn.test = function (options) {
	var defaults = {
		ellipsisText: "..."
	};

	var options = $.extend(defaults, options);
	//return '<span style="color:red">Greer/Bing jQuery Plugin</span>';
    
	return this.each(function() {
		var obj = $(this);
		var body = obj.html('<span style="color:green;font-weight:bold;">Greer/Bing jQuery Plugin</span>');	
		
	});
}


$.fn.log = function (message) {
	return this.each(function() {

		if (window.console) {
			console.debug( '' + ': ' + message);
			alert( '' + ':: ' + message);
		} else {
			alert( '' + ': ' + message);
		}
	})
};



$.fn.testInit2 = function (arg) {
//	TODO: move this to some generic utilities object
	if (arg) {
		if (typeof( arg ) == 'function') {} else { 
			alert ('2 NOT null: ' + arg + ' ... ' + typeof( arg ) + ' ... ' + arg.title );
//			alert ('init = ' + $(abil_page).html() );
			return this;
		}
	} else {
		alert ('2 null');	
	}
	return this;
}


})(jQuery);