/*******************************************************************************

	CSS on Sails Framework
	Title: Gliffy.com
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: November 2010

*******************************************************************************/


var PreviewScroll = function(){
	
	var base;
	var holder;
	var checkpoint;
	var checkpointLeft;
	var checkpointRight;
	var widthItem = 153;
	
	var self = {
		init: function (scrollEl){
				base = $(scrollEl);
				holder = base.find('.preview-scroll-holder');
				
				var UL = base.find('ul');
				var TotalWidth = base.find('li').length * widthItem;
				
				checkpoint = TotalWidth*-1;
				checkpointLeft = checkpoint + TotalWidth;
				checkpointRight = checkpoint - TotalWidth;
				
				UL
					.removeClass('first')
					.width(TotalWidth)
					.before(UL.clone())
					.after(UL.clone());
				
				base.find('ul:first').addClass('first');
				
				holder
					.width((TotalWidth*3)+4)
					.css('left',checkpoint);
					
				base.parent().find('.preview-prev').click(self.handlePrev);
				base.parent().find('.preview-next').click(self.handleNext);
				if (typeof DD_belatedPNG !== 'undefined') {
					DD_belatedPNG.fix('.preview-scroll a span.bg-overlay');
					$('.preview-scroll a').hover(
					   function(){ 
						   DD_belatedPNG.handlePseudoHover($('span.bg-overlay',$(this))[0]);
					   },
					   function(){ 
						   DD_belatedPNG.handlePseudoHover($('span.bg-overlay',$(this))[0]);
					   }
				   );
				}
			},
		handlePrev: function(){
				var holder = $(this).parent().find('.preview-scroll-holder');
				holder
					.stop(true,true)
					.animate({
						left: holder.position().left + widthItem
					}, 400, function(){
						if(holder.position().left == checkpointLeft){
							holder.css('left',checkpoint);
						}
					});
				return false;
			},
		handleNext: function(){
				var holder = $(this).parent().find('.preview-scroll-holder');
				holder
					.stop(true,true)
					.animate({
						left: holder.position().left - widthItem
					}, 400, function(){
						if(holder.position().left == checkpointRight){
							holder.css('left',checkpoint);
						}
					});
				return false;
			}
	};
	return self;
	
}();



$(document).ready(function() {

	// Add hover class
	$('#navigation > ul > li').hover(function() { 
		$(this).addClass('hover');
	}, function() { 
		$(this).removeClass('hover');
	});

	// Add press class
	$('.sub-nav li').mousedown(function() { 
		$(this).addClass('press');
	}).mouseup(function(){
		$(this).removeClass('press');
	});
	
	$('.preview-scroll').each(function(){
		PreviewScroll.init(this);
	});
	
	// Custom checkbox
	$('#popup-signup input[type="checkbox"]').JSizedFormCheckbox();

	// Custom radio
	$('.purchase-form input[type="radio"]').JSizedFormRadio();
	
	// Account popups
	$('.account-popup .popup-close').click(function(){
		$('.show-account-popup').removeClass('show-account-popup');
		return false;
	});
	$('#header .btn-login').click(function(){
		$('.show-account-popup').removeClass('show-account-popup');
		$('#popup-login').addClass('show-account-popup');
		//focus on the enter email
		$('#login-email').focus();
		return false;
	});
	$('#popup-login a.forgot').click(function(){
		$('.show-account-popup').removeClass('show-account-popup');
		$('#popup-forgot').addClass('show-account-popup');
		return false;
	});
//	$('#header .btn-signup').click(function(){
//		$('.show-account-popup').removeClass('show-account-popup');
//		$('#popup-signup').addClass('show-account-popup');
//		return false;
//	});

    $('#popup-forgot .btn-cancel').click(function(){
        $('#popup-forgot').removeClass('show-account-popup');
        $('#popup-login').addClass('show-account-popup');
        return false;
    });

	// About Us
	$('.about-content .more-link').click(function(){
		var morelink = this;
		$(morelink).hide('slow');
		$(this).parent().find('.more-content').slideDown();
		return false;
	});
	
	// Examples popup
	$.fn.colorbox.settings.opacity = 0
	$('.examples a, .preview-scroll a').colorbox({
		transition: "none",
		close: "close",
		onComplete:function(){
			// DD_belatedPNG fix for IE6
			if (typeof DD_belatedPNG !== 'undefined') {
				DD_belatedPNG.fix('.example-popup, #cboxClose');	
			}
		}
	});
	

// Cufon
	//var Cufon_selectors = [
		//'#content h1'
	//];
	//Cufon.replace(Cufon_selectors.join(','));
    
	Cufon.replace('#content h1', { fontFamily: 'HelveticaNeue' });
	Cufon.replace('.balloon-content p', { fontFamily: 'Helvetica Neue' });
	Cufon.now();
    
    //do this at the end b/c it could block loading of the page otherwise
    if( typeof(NewsBanner) == 'object' ) { 
	    NewsBanner.init('.box-overview .headlines');
    }
    

});


// gliffy confluence tabs 
// NOTE:
// These tabs are setup so that you can have multiple tab sets on a single page.
// When you select tab 2 on one of the tabs sets ALL the tabs 2 versions will be selected throughout the page 
// This is used effectively on the user manual
// If you need 2 independant tabs on a page, best look elsewhere  

function showGliffyTabContent(activeTab) { 

    //hide all unselected tab content and deactivate the tabs on the entire page
	$(".gliffy-tabs-content").hide();
    $(".gliffy-tabs-nav li").removeClass('active');


    //make all tabs on the page with this class name active

    
    if(  typeof $(activeTab).attr('class') != 'undefined' ) {
        $( "." + $(activeTab).attr('class') ).addClass("active"); 
        var tabNumber =  $(activeTab).attr('class').substring(11,12);      
        var selector = ".gliffy-tabs-content-wrapper .gliffy-tabs-content:nth-child(" + tabNumber + ")"; 
        $(selector).show(); 
    }
}

//select the activ tabs
var activeTab = $(".gliffy-tabs-nav").find('.active'); 
showGliffyTabContent(activeTab); 

$(".gliffy-tabs-nav li").click(function() { 
    showGliffyTabContent(this); 
	return false;
});


// DD_belatedPNG fix for IE6
if (typeof DD_belatedPNG !== 'undefined') {
	var PNG_fix_selectors = [
		'#navigation .sub-nav',
		'#footer',
		'.btn-login',
		'.btn-login span',
		'.btn-signup',
		'.btn-signup span',
		'.btn-popup',
		'.btn-popup span',
		'.btn-drawing',
		'.btn-drawing span',
		'.btn-common',
		'.btn-common span',
		'.btn-trial em',
		'.btn-sandbox em',
		'.sb-support-search button',
		'.sb-support-search .custom-input',
		'.sb-support-search .custom-input span',
		'.advantage-list img',
		'.cust-logo a',
		'.gliffy-magical',
		'.gliffy-overview',
		'.gliffy-support',
		'.extras-wrapper-1',
		'.extras-wrapper-2',
        '.box-premium .extras-wrapper-3 h3 img',
		'.more-box-wrapper-1',
		'.more-box-wrapper-2',
		'.gliffy-blog',
		'#sidebar .blue-box .box-title',
		'#sidebar .blue-box .box-content',
		'#sidebar .grey-box .box-title',
		'#sidebar .grey-box .box-content',
		'.support-main',
		'.examples .bg-overlay',
		'.banners .bg-overlay',
		'.preview-scroll img',
		'.account-popup',
		'.popup-header',
		'.popup-content-wrapper',
		'.popup-content',
		'.preview-wrapper-1',
		'.preview-wrapper-2',
		'.questions img',
		'.ir-wordpress-small span',
		'.preview img',
		'.box-plugin .video',
		'.box-online .video'
	];
	DD_belatedPNG.fix(PNG_fix_selectors.join(','));
	
	// fix the png on Sliding Doors
	$('.btn-common, .btn-drawing, .btn-login, .btn-signup').bind('mouseenter mouseleave',function(){
		DD_belatedPNG.handlePseudoHover($('span',$(this))[0]);
	});

 	$('.examples li a, .banners li a').hover(
       function(){ 
           DD_belatedPNG.handlePseudoHover($('span.bg-overlay',$(this))[0]);
       },
       function(){ 
           DD_belatedPNG.handlePseudoHover($('span.bg-overlay',$(this))[0]);
       }
   );

	// fix button hover
	$('.btn-popup').hover(
		function(){ 
			$(this).addClass('btn-popup-hover'); 
			DD_belatedPNG.handlePseudoHover(this);
			DD_belatedPNG.handlePseudoHover($('span',$(this))[0]);
		},
		function(){ 
			$(this).removeClass('btn-popup-hover');
			DD_belatedPNG.handlePseudoHover(this);
			DD_belatedPNG.handlePseudoHover($('span',$(this))[0]);
		}
	);
	
	try { document.execCommand("BackgroundImageCache", false, true); } catch(e) {}

}

// Input focus 
var active_color = '#333'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
 
$(document).ready(function() {
  $(".custom-input span input").css("color", inactive_color);
  var default_values = new Array();
  $(".custom-input span input").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    $(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
  
    // Image rollovers for footer
    $("img.social-icon").hover( function() {
        $(this).attr("src", $(this).attr("src").replace(".gif", "_over.gif"));
    }, function() {
        $(this).attr("src", $(this).attr("src").replace("_over.gif", ".gif"));
    });
});