///////////////////////////////////////////////////////////////////////////////
// The Specimen | Gallery tabs |More Fonts

//	to get jQuery to play nice with prototype, change $ to jQuery
jQuery.noConflict();

function getRenderCtlHTML( jQuery ){
	var renderCtlHTML = jQuery('#render_controls').html();
	return renderCtlHTML;
}

function checkRenderCtlHTML( jQuery ){
	pattern = /\/fonts\/(singles|downloads)/i;
	// only do this for the singles/similarity feature
	// /fonts/singles/fontfont/ff_din_ce_light_italic/
	if(! pattern.test(window.location.pathname) ){
		return;
	}
	ss = document.getElementById('sample_size').value;
	st = document.getElementById('sample_text').value;
	renderCtlHTML = getRenderCtlHTML( jQuery );
	/*
	// TODO: remove this if-else block. related to ticket #5569
	if((jQuery("li#galleryTab").length) && (jQuery('li#galleryTab').hasClass('inactive') == false)) {
		// more tab is active
		jQuery('#render_controls').hide();
	} else {
        jQuery('#render_controls').show();
    }
    */
	updateRenderedImages();
	document.getElementById('sample_size').value = ss;
	document.getElementById('sample_text').value = st;
}

jQuery(document).ready(function(){
	checkRenderCtlHTML( jQuery );
	
	jQuery("li#specimenTab").click(function() {
		jQuery("li#galleryTab").addClass("inactive");
		jQuery("li#moreTab").addClass("inactive");
		jQuery("li#specimenTab").removeClass("inactive");
		jQuery("li#galleryTab").removeClass("leftCorner");
		jQuery("li#moreTab").removeClass("leftCorner");
		jQuery("div#specimenContent").show();
		jQuery("div#galleryContent").hide();
		jQuery("div#moreContent").hide();

		checkRenderCtlHTML( jQuery );
		
		jQuery.post("/service/setSessionVar.php", {activeTab: "specimenTab"});
	});

	jQuery("li#moreTab").click(function() {
		jQuery("li#specimenTab").addClass("inactive");
		jQuery("li#galleryTab").addClass("inactive");
		jQuery("li#galleryTab").removeClass("leftCorner");
		jQuery("li#moreTab").removeClass("inactive");		
		jQuery("li#moreTab").addClass("leftCorner");			
		jQuery("div#moreContent").show();
		jQuery("div#specimenContent").hide();
		jQuery("div#galleryContent").hide();
		
		checkRenderCtlHTML( jQuery );
		
		jQuery.post("/service/setSessionVar.php", {activeTab: "moreTab"});
		
		getTabContents('moreTab');
	});
		
		jQuery("li#galleryTab").click(function() {
		jQuery("li#specimenTab").addClass("inactive");
		jQuery("li#moreTab").addClass("inactive");
		jQuery("li#galleryTab").addClass("leftCorner");
		jQuery("li#moreTab").removeClass("leftCorner");
		jQuery("li#galleryTab").removeClass("inactive");
		jQuery("div#galleryContent").show();
		jQuery("div#specimenContent").hide();
		jQuery("div#moreContent").hide();

        checkRenderCtlHTML( jQuery );

        jQuery.post("/service/setSessionVar.php", {activeTab: "galleryTab"});
        
        getTabContents('galleryTab');
	});
		
	// we loaded the page on the FLT tab - load the flt
	if (jQuery("#moreContent").is(":visible")) { getTabContents('moreTab');	}
	if (jQuery("#galleryContent").is(":visible")) { getTabContents('galleryTab');	}
	
	function getTabContents(tab) {
		if (tab === 'moreTab') {
			if (jQuery("#moreContent").children().length == 1) {
				jQuery(".tab_loader_icon").show();
				jQuery.get("/service/get_tab_contents.php?" + jQuery("#tab_info_form form").serialize() + "&tab=" + tab,
						function(data) {
							jQuery("#moreContent").append(data);
							jQuery(".tab_loader_icon").hide();
						}
				);
			}
		} else if (tab === 'galleryTab') {
			
			if (jQuery("#galleryContent").children().length == 1) {
				jQuery(".tab_loader_icon").show();
				jQuery.get("/service/get_tab_contents.php?" + jQuery("#tab_info_form form").serialize() + "&tab=" + tab,
						function(data) {
							jQuery("#galleryContent").append(data);
							jQuery(".tab_loader_icon").hide();
							
							// attach Fancy-Zoom-jQuery event listeners
							j.fn.fancyzoom.defaultsOptions.imgDir = '/images/fancyzoom/';
							j('.gallery-images a.fancyzoom').fancyzoom({overlay:0.01, Speed:250}); 
							
						}
				);
			}
		}
	}

///////////////////////////////////////////////////////////////////////////////
// The inline format info mouseovers
	jQuery("span.format_tooltip").hover(function() {
		this.tip = this.title;
		this.title = '';

		switch (this.id) {
			case 'format_ot':
				this.formatTitle = 'OpenType';
				this.formatText = 'The most convenient and full-featured font format. Compatible with all modern '
					+ 'screen and print workflows. OT-savvy apps are required to access extra glyphs.';
				break;
			case 'format_maps':
				this.formatTitle = 'Mac PostScript';
				this.formatText = 'Made for Mac. A basic font format, compatible with all modern screen and print workflows.';
				break;
			case 'format_pcps':
				this.formatTitle = 'PC PostScript';
				this.formatText = 'Made for Windows. A basic font format, compatible with all modern screen and print workflows.';
				break;
			case 'format_pctt':
				this.formatTitle = 'PC TrueType';
				this.formatText = 'Made for Windows. May also work in Mac OS X. A basic font format, compatible with all modern screen and print workflows. One font file per style for ease of use.';
				break;
			case 'format_pstt':
				this.formatTitle = 'PostScript or TrueType';
				this.formatText = 'Basic font formats compatible with all modern screen and print workflows. TrueType offers one font file per style for ease of use.';
				break;
			case 'format_webfont':
				this.formatTitle = 'Web Fonts';
				this.formatText = 'Web fonts are optimized for use exclusively on web pages. They are delivered in WOFF and EOT formats which cannot be installed on a desktop operating system.';
				break;
			case 'format_ottt':
				this.formatTitle = 'OpenType with TrueType outlines';
				this.formatText = 'OpenType  font with TrueType (.ttf) extension and outlines. The most universally compatible font format. May include enhanced screen rendering, style-linking, and other features. Click to learn more.';
				break;
		}

	jQuery(this).append('<span id="format_ot_info" class="format_info_hover">'
		+ '<div class="bottomShadow">'
		+		'<div class="outerShell">'
		+			'<div class="leftShadow">'
		+				'<div class="rightShadow">'
		+					'<div class="content">'
		+						'<span class="formatName">' + this.formatTitle + '</span>'
		+							this.formatText + ' <span class="grey">Click to learn more.</span>'
		+					'</div>'
		+				'</div>'
		+			'</div>'
		+		'</div>'
		+	'</div>'
		+ '</span>');

		this.leftAdjust = (-(jQuery(this).find('.format_info_hover').width() / 2) + 18);
		jQuery(this).find('.format_info_hover').css({left:this.leftAdjust});
		jQuery(this).find('.format_info_hover').css({top:10});
		jQuery("span.format_info_hover").fadeIn("fast");
	}, function() {
		jQuery("span.format_info_hover").fadeOut("fast");
		jQuery(this).children('.format_info_hover').remove();
		this.title = this.tip;
	});

///////////////////////////////////////////////////////////////////////////////
// OT Features links
	jQuery("a.tooltip_trigger").click(function() {
		jQuery(this).css("font-weight", "bold");
		jQuery(this).css("text-decoration", "none");

		jQuery("a.tooltip_trigger").not(this).css("font-weight", "normal");
		jQuery("a.tooltip_trigger").not(this).css("text-decoration", "underline");
	});


    jQuery("#familyDescriptionReadMore").click(function() {
        jQuery("#familyDescriptionReadMore").hide();
        jQuery("#familyDescriptionMore").show();
    });

});