// FRAMEWORK

// GUIDE
// 1 - container/parent modifier classes
// 2 - first
// 3 - last
// 4 - link styles
// 5 - ODD/EVEN/ALT
// 6 - wrap elements
// 7 - forms
//		b - add title fields to cforms
//		c - form field hints
//		d - texarea hint
// 8 - Tabbed panels and menus
// 9 - image swap gallery
// 10 - home page slider
// 11 - parent area clickable
// 12 - comments
// 13 - jQuery lightbox
// 14 - gallery at foot of article
// 15 - equal height

// console.log(this); // show events in firebug's console log
// var $this = $(this); // set $this to speed things up


// When the document loads do everything inside here ...
jQuery(document).ready(function($){
$("article.summary img").addClass("imgLeft");
	$("#articleDescription").addClass("col5 column clearfix");
	$("#articleInfo").addClass("col3 column clearfix");
	$(".articleMeta, #articleList li, #articleList li article header").addClass("clearfix");

	$("#content").each(function(){

		var myClass = $(this).attr("class");

		if( myClass !== "fullWidth") {
			$(this).addClass("col8 column clearfix");
			} else {
				$(this).addClass("w12 column clearfix");
		}
	});

	$("#footerPage").addClass("clearfix");
		$("#navFooterPage").addClass("clearfix");
			$("#navFooterPage ul").addClass("hMenu discreet clearfix");

	$("#navCategory").addClass("col4 column clearfix");
		$("#navCategory ul").addClass("vMenu");

	$("#navHeaderPage").addClass("clearfix");
		$("#navHeaderPage ul").addClass("w2");
		//when counting n, finding the last item in a row is consistent. Finding the first results in n+1 being selected.
		//$("#articleGallery li:nth-child(4n)").addClass("last");
		$("#navHeaderPage ul:first").addClass("first");
		$("#navHeaderPage ul:last").addClass("last");
	
		$(".vMenu li a img").parents("li").addClass("thumb clearfix");
			$(".thumb img").addClass("imgLeft");

	$("#navGallery ul").addClass("hMenu tabbed clearfix");
	$("#pageBody").addClass("clearfix");

	$("ul.postNavigation li a").addClass("linkAsButton linkStyle2");
	$("ul.postNavigation li:first-child").addClass("first");
	$("ul.postNavigation li:last-child").addClass("last");

	$("ul#content li, #articleInfo dl").addClass("clearfix");

	$("#pageBody .column:last-child").addClass("lastCol");

// 2 - add class 'first' -------------------------------------------------------

	$(".withIntro p:first, #articleInfo dd:first, #articleInfo dt:first, .siteMap h2:first, .vMenu li:first-child").addClass("first");


// 3 - add class 'last' --------------------------------------------------------

	$("#articleInfo dd:last, #articleInfo dt:last, ul.discreet li:last-child").addClass("last");
	$(".articleMeta dd:last-child").addClass("last");
	$("#navFooterPage ul li:last-child").addClass("last");
	$(".moreLink li:last-child").addClass("last");


// 4 - add link styles ---------------------------------------------------------


	$("h1 a").each(function(){

		var parentId = $(this).parents("div").attr("class");

		if( parentId !== "infoPanel") {
			$(this).addClass("linkStyle2");
		}
	});

	$("#homeContent a, #navHeaderPage ul a, #navCategory ul a, #navFooterPage ul a, .siteMap a").addClass("linkStyle2");

	$("a.skip").addClass("linkStyle1");


// 5 - odd/even/alt ------------------------------------------------------------


// 6 - Wrap elements -----------------------------------------------------------

	$("#headerPage h1 a").wrapInner(document.createElement("span"));


// 7 - forms -------------------------------------------------------------------


	$(".cform fieldset, .neatForm fieldset, .cform legend, .neatForm legend").addClass("w8");
	$("label:contains('Name'), label:contains('Email'), label:contains('Message'), label:contains('Your comment'), label:contains('Captcha')").append("<abbr title=\"Required field\">*</abbr>");
	$(".cform label, .cform label span, .cform #sendbutton, .neatForm button, .neatForm label, .neatForm li span:nth-child(3)").addClass("w2");
		$(".cform li span:nth-child(3)").addClass("w3");

	$(".cform textarea, .neatForm textarea").addClass("w6p");
	
	// for chrome
	$("#searchform input[type='text'], .cform input[type='text'], .neatForm input[type='text'], .cform input[type='email'], .neatForm input[type='email'], .cform input[type='url'], .neatForm input[type='url']").addClass("w2");

//	7b - add title fields to cforms

	$("#cformsform label:contains('Email')").next("input").attr("title","Your email address");
	$("#cformsform label:contains('Captcha')").next("input").attr("title","Enter the letters on the right");


// 7c - form hint --------------------------------------------------------------

	// http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

	$.fn.hint = function (blurClass) {
  		if (!blurClass) { 
   			blurClass = 'blur';
 		}

		return this.each(function () {
			// get jQuery version of 'this'
			var $input = $(this),
			// capture the rest of the variable to allow for reuse
			title = $input.attr('title'),
			$form = $(this.form),
			$win = $(window);

			function remove() {
				if ($input.val() === title && $input.hasClass(blurClass)) {
					$input.val('').removeClass(blurClass);
				}
			}

			// only apply logic if the element has the attribute

			if (title) { 
				// on blur, set value to title attr if text is blank
				$input.blur(function () {
					if (this.value === '') {
						$input.val(title).addClass(blurClass);
					}

				}).focus(remove).blur(); // now change all inputs to title

				// clear the pre-defined text when form is submitted
				$form.submit(remove);
				$win.unload(remove); // handles Firefox's autocomplete
			}
		});
	};

$("input:text").hint();


// 7d - texarea hint --------------------------------------------------------------

	// http://blog.amnuts.com/2009/02/17/text-box-hint-values-with-jquery/

    $.fn.textboxhint = function(userOptions) {
        var options = $.extend({}, $.fn.textboxhint.defaults, userOptions);
        var $this = $(this);
        return $this.filter(':text,textarea').each(function(){
            if ($this.val() == '') {
                $this.focus(function(){
                    if ($this.attr('typedValue') == '') {
                        $this.removeClass(options.classname).val('');
                    }
                }).blur(function(){
                    $this.attr('typedValue', $(this).val());
                    if ($this.val() == '') {
                        $this.addClass(options.classname).val(options.hint);
                    }
                }).blur();
            }
        });
    };

    $.fn.textboxhint.defaults = {
        // hint: 'Please enter a value',
        classname: 'hint'
    };

	$(".neatForm label:contains('Your comment')").next("textarea").textboxhint({
		hint: 'Your comment'
	});	

	$("#cformsform label:contains('Message')").next("textarea").textboxhint({
       hint: 'Your message'
    });


// 8 - Tabbed panels and menus  ----------------------------------------------------

	// very neat tutorial to follow http://webcloud.se/article/Building_jQuery_plugins/

	// set the classes

	$("#navGallery ul li").addClass("tabs");
		$("#navGallery ul li a").addClass("tabbedLink");

	$("#tabGallery section").addClass("panelGallery tabbedContent");
		$(".panelGallery").find("header:first").addClass("panelHeader");
		$(".panelGallery").children("div").addClass("row clearfix");
			$(".panelGallery article:first-child").addClass("firstCol");
			$(".panelGallery article").addClass("col4 column clearfix");
				$(".panelGallery article div").addClass("infoPanel");
					$("#tabGallery .row article:last-child").addClass("lastCol");

	$("#navGallery ul li a").each(function(){
		var $this = $(this);
		var parentId = $this.parent("li").attr("class");
		if( parentId == "tabs") {
			$this.addClass("linkStyle1");
			} else {
				$this.addClass("linkStyle2");
		}
	});


 // function create IDs with incremental values

	$.fn.menuId = function(options) {
		var defaults = { classname: 'tab' };
		var options = $.extend(defaults, options); 

		// traverse all nodes
		this.each(function(i) {
			i = i+1;
			$(this).attr("id" , options.classname + i);
		});

		// allow jQuery chaining
		return this;
	};

	$("#navGallery ul li a").menuId();

	$("#tabGallery section").menuId();
	
	$("#galleryContainer img").menuId();
	
	$("#articleGallery ul li a").menuId();

	// When a link is clicked change class of parent list item

	$(".tabs").click(function () {
		// switch all tabs off
		$(".selected a").removeClass("linkStyle2").addClass("linkStyle1");
		$(".selected").removeClass("selected");

		// switch this tab on
		$(this).addClass("selected");
		$(".selected a").removeClass("linkStyle1").addClass("linkStyle2");
	});

	// When a link is clicked slide content in and out

	$("a.tabbedLink").click(function () {
		var content_show = $(this).attr("id");
		// slide all elements with the class 'content' up
		$(".tabbedContent").hide();

		// Find the ID of the link display the div with the same ID
		$("#tabGallery").find("#"+content_show).show();
	});

	// info slider - used for home page slider and gallery page thumbnails

	$.fn.infoContainerFunction = function(options) {
		var defaults = { finishTop: 100, startTop: 184 };
		var options = $.extend(defaults, options);
		//CANNOT SET var $this = $(this);

		$(this).hover(function(){
			$(this).find(".infoPanel").stop().animate({top: options.finishTop , opacity: "0.8"} , {queue:false,duration:300});
			}, function() {
				$(this).find(".infoPanel").stop().animate({top: options.startTop , opacity: "0"} , {queue:false,duration:300});
		});
	};
$("#tabGallery .infoContainer").infoContainerFunction();

$("#slides .infoContainer").infoContainerFunction({finishTop: 184 , startTop: 300 });

 

// 9 - Image swap gallery  ----------------------------------------------------


	$("#galleryContainer img:first").show();
	
	$("#articleGallery ul li a").click(function (e) {
		e.preventDefault();	
		var content_show = $(this).attr("id");
		$("#galleryContainer img").hide();
		$("#galleryContainer").find("#"+content_show).show();
	});
	

	$("#gallerySlider").addClass("clearfix");


// 10 - home page slider -------------------------------------------------------

	$.fn.slidePanelFunction = (function() {

		var $this = $(this);
		var a = $("<div><a class=\"linkAsButton linkStyle2\" href=\"#\">Show details</a></div>").addClass("slideButton");

		//$(this).find("a").attr('href','#')

		$this.hide().addClass("clearfix").after(a);
		$(".slideButton a").bind("click", (function(b){
			b.preventDefault();
			if ($("#slidePanel").is(":hidden")) {
				$("#slidePanel").slideDown("slow");
				$(".slideButton a").text("Hide details").addClass("back");
				} else {
					$("#slidePanel").slideUp("slow");
					$(".slideButton a").text("Show details").removeClass("back");
				}
			}
		));
	});

	$("#slidePanel").slidePanelFunction();
	$("#slides").addClass("clearfix");

	$("#navSlider").jFlow({
		slides: "#slides",
		controller: ".jFlowControl",													// must be class, use . sign
		slideWrapper : "#jFlowSlide",													// must be id, use # sign
		selectedWrapper: "jFlowSelected",												// just pure text, no sign
		auto: true,																		// auto change slide, default true
		width: "930px",
		height: "283px",
		duration: 400,
		prev: ".jFlowPrev",																// NOT USING. must be class, use . sign
		next: ".jFlowNext"																// NOT USING. must be class, use . sign
	});

	$("#navSlider li:last a").addClass("linkAsButton linkStyle2");

// 11 - parent area clickable -------------------------------------------------------

	$.fn.clickable = function() {
		//var $this = $(this);
	 	
	return this.each(function() { 
	 var myHrefEle = $(this).find('a').attr('href');
	  	$(this).hover(function(){
 		$(this).css("cursor","pointer");
		});

	 	$(this).click(function(){
			location.href = myHrefEle;
		});
		});
	 };

$("#slides li article header, #articleList li article header, .moreLink li.last").clickable();


// 12 - comments --------------------------------------------------------------------


$("header#commentsHeader nav a, ol#commentList .reply a").addClass("linkAsButton linkStyle2");
	$("section#comments ol:first li").each(function(){

		// fetch the class of the parent ol of the comment
		var parentId = $(this).parent("ol").attr("class");

		// if comment is not a child add the following classes to the comment header
		if( parentId != "children") {
			$(this).find("article:first header:first").addClass("col2 firstCol clearfix");
		}
	});

	$("section#comments ol li article div").each(function(){

		// fetch the class of the parent ol of the comment
		var parentId = $(this).parents("ol").attr("class");

		// if comment is not a child add the following classes to the comment body containing div
		if( parentId != "children") {
			$(this).addClass("col6 column clearfix");
		}
	});

		$("section#comments li, .children li, .children ul li ul li, .children header").addClass("clearfix");
		$(".comment-author img").addClass("imgLeft");


// 13 - jQuery lightbox --------------------------------------------------------------


		$(".wp-caption a").each(function(){
			var lightboxClass = $(this).attr("rel");
			//var oldClass = $(this).child("img").attr("class");
			
			if ( lightboxClass == "lightbox") {
				$(this).addClass("lightbox");
				$(this).children("img").removeAttr("class");
			}

//			if ( oldClass == "imgLeft") {
//				$(this).child("img").removeClass("imgLeft");
//			}

		});

        $("a.lightbox").lightBox();

// 14 - gallery at foot of article --------------------------------------------------------------

	$("#imageGallery li").addClass("col4 column clearfix");
	$("#imageGallery li:odd").addClass("last");

// 15 - equal height ------------------------------------------------------------------

var max_height = 0;

$("#imageGallery li").each(function(){
   if ($(this).height() > max_height) { max_height = $(this).height(); }
});

$("#imageGallery li").height(max_height);


//	close document ready function		

});