// Fix background image flickering in IE
try {
  document.execCommand('BackgroundImageCache', false, true);
} catch(e) { }

/* Special search behavior */
var Subscribe = {
	prompt: "Email Address", // default value - should get real value from markup
	init: function() {
		Subscribe.prompt = $('#email').focus(Subscribe.focus).blur(Subscribe.blur).val();
	},
	focus: function() { if (this.value == Subscribe.prompt) { this.value = ''; $('#email').css("color", "#000"); } },
	blur: function() { if (this.value.length == 0) { this.value = Subscribe.prompt; $('#email').css("color", "#999"); } }
};
$(document).ready( Subscribe.init );

var DD_belatedPNG;
if (DD_belatedPNG) { // Only execute for IE6
	var $$ = $('body.home');
	if ($$.length > 0) {
		DD_belatedPNG.fix('ul#HomeMastCarousel a, #Content ul.carouselNav li span, #Content ul.quoteNav li a, p.logo img, p.videoThumb img');
	}
	// Selectors need to match what's in the CSS exactly
	DD_belatedPNG.fix('h1.graphicalHeader, #SiteId img, #NavigationPrimary a span, #NavigationSecondary, #NavigationSecondary li.active, a.contactButton:hover, #Footer, #Footer ul.socialMedia a, #Footer .contactBar input.submit');
	DD_belatedPNG.fix('#ContentChannel img.transparent, #ThumbnailMenu li a, #Content #ThumbnailMenu li.active');
	DD_belatedPNG.fix('#Content ul.resources li a.pdf, #Content ul.resources li a.faq, #Content ul.resources li a.video, #Content ul.resources li a.logo');
	DD_belatedPNG.fix('a.requestInfo,#Content .callToActions a#ContactSales, #Sidebar .callToActions a#ContactSales, #Sidebar .overcomeObstaclesWebinar a, #Sidebar .vmstoreDemo a, #Sidebar .videoFeature a');
	DD_belatedPNG.fix('#fancybox-bg-ne, #fancybox-bg-nw, #fancybox-bg-se, #fancybox-bg-sw, #fancybox-close');
}

/* begin - open new window for external links beginning with go and pdfs */
	$(function() {
		$('a[href^="http://go"],a[href^="https://go"],a[href$=".pdf"]')
			.not($('a.noPopup,a.contactButton,a#ContactSales'))
			.not($('#Footer .siteLinks a[href^="http://www.atre.net"]'))
			.popupwindow(); // Fully qualified links and PDF files		
	});
/* end - open new window for external links and pdfs */

$(document).ready(function() {
	$("a.viewLarger").fancybox();
	$("area.viewLarger").fancybox();
	/* Disable the sales contact popup modal*/
	$("a#ContactSalesDisable").click(function(e) {
	/*$("a#ContactSales").click(function(e) {*/
		e.preventDefault();
		var markup = '<h1 class="graphicalHeader" id="ContactSales">Contact Sales</h1>\n';
		markup += '<form action="http://go.pardot.com/l/6022/2011-03-18/TTX" method="post" id="ContactSalesForm">\n';
		markup += ' 	<fieldset>\n';
		markup += '		<div class="twoColumns selfClear">\n';
		markup += '			<div class="leftColumn">\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="first_name" class="required">First Name *</label>\n';
		markup += '					<input type="text" class="text required" id="first_name" name="first_name" tabindex="1" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="title">Job Title</label>\n';
		markup += '					<input type="text" class="text" id="title" name="title" tabindex="3" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="email" class="required">Email *</label>\n';
		markup += '					<input type="text" class="text required email email_domain email_domain_too" id="email" name="email" tabindex="5" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="state">State *</label>\n';
		markup += '					<input type="text" class="text" id="state" name="state" tabindex="7" />\n';
		markup += '				</div>\n';
		markup += '			</div>\n';
		markup += '			<div class="rightColumn">\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="last_name" class="required">Last Name *</label>\n';
		markup += '					<input type="text" class="text required" id="last_name" name="last_name" tabindex="2" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="company" class="required">Company *</label>\n';
		markup += '					<input type="text" class="text required" id="company" name="company" tabindex="4" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="city">City *</label>\n';
		markup += '					<input type="text" class="text" id="city" name="city" tabindex="6" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="city">Country</label>\n';
		markup += '					<input type="text" class="text" id="country" name="country" tabindex="8" />\n';
		markup += '				</div>\n';
		markup += '			</div>\n';
		markup += '		</div>\n';
		markup += '	</fieldset>\n';
		markup += '	<fieldset>\n';
		markup += '		<input type="submit" value="Submit" class="submit" />\n';
		markup += '	</fieldset>\n';
		markup += '</form>\n';

		$.fancybox(markup, {
       		'autoDimensions': false,
			'titleShow'     : false,
			'padding'		: 18,
			'overlayColor'	: '#656565',
			'transitionIn'  : 'elastic',
			'transitionOut' : 'elastic',
			'width'			: 550
		});

		$('#ContactSalesForm').validate();
	});
	$("a#RequestInformation").click(function(e) {
		e.preventDefault();
		var markup = '<h1 class="graphicalHeader" id="RequestInfo">Request Information</h1>\n';
		markup += '<form action="http://go.pardot.com/l/6022/2011-03-18/TRZ" method="post" id="PartnerForm">\n';
		markup += '	<fieldset>\n';
		markup += '		<div class="twoColumns selfClear">\n';
		markup += '			<div class="leftColumn">\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="first_name" class="required">First Name *</label>\n';
		markup += '					<input type="text" class="text required" id="first_name" name="first_name" tabindex="1" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="title">Job Title</label>\n';
		markup += '					<input type="text" class="text" id="title" name="title" tabindex="3" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="employees">No. of Employees</label>\n';
		markup += '					<input type="text" class="text" id="employees" name="employees" tabindex="5" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="phone">Phone</label>\n';
		markup += '					<input type="text" class="text" id="phone" name="phone" tabindex="7" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="state">State *</label>\n';
		markup += '					<input type="text" class="text" id="state" name="state" tabindex="9" />\n';
		markup += '				</div>\n';
		markup += '			</div>\n';
		markup += '			<div class="rightColumn">\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="last_name" class="required">Last Name *</label>\n';
		markup += '					<input type="text" class="text required" id="last_name" name="last_name" tabindex="2" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="company" class="required">Company *</label>\n';
		markup += '					<input type="text" class="text required" id="company" name="company" tabindex="4" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="email" class="required">Email *</label>\n';
		markup += '					<input type="text" class="text required email email_domain email_domain_too" id="email" name="email" tabindex="6" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="state">City *</label>\n';
		markup += '					<input type="text" class="text" id="city" name="city" tabindex="8" />\n';
		markup += '				</div>\n';
		markup += '				<div class="field selfClear">\n';
		markup += '					<label for="state">Country</label>\n';
		markup += '					<input type="text" class="text" id="country" name="country" tabindex="10" />\n';
		markup += '				</div>\n';
		markup += '			</div>\n';
		markup += '		</div>\n';
		markup += '	</fieldset>\n';
		markup += '	<fieldset>\n';
		markup += '		<input type="submit" value="Submit" class="submit" />\n';
		markup += '	</fieldset>\n';
		markup += '</form>\n';

		$.fancybox(markup, {
       		'autoDimensions': false,
			'titleShow'     : false,
			'padding'		: 18,
			'overlayColor'	: '#656565',
			'transitionIn'  : 'elastic',
			'transitionOut' : 'elastic',
			'width'			: 550
		});

		$('#PartnerForm').validate();
	});
	
//	$("a.aboutTintri").click(function(e) {
//		e.preventDefault();
//		var markup = '<a href="/downloads/videos/about-tintri.mp4" style="display:block;width:600px;height:338px" id="VideoPlayer"></a>';

//		$.fancybox(markup, {
//       		'autoDimensions': false,
//			'titleShow'     : false,
//			'padding'		: 18,
//			'overlayColor'	: '#656565',
//			'transitionIn'  : 'elastic',
//			'transitionOut' : 'elastic',
//			'height'		: 350,
//			'width'			: 610
//		});

//		flowplayer("VideoPlayer", "/downloads/videos/flowplayer-3.2.7.swf");
//		return false;
//	});
	
		$("a.aboutTintri").fancybox({
						'width'				: 853,
						'height'			: 480,
						'autoScale'			: true,
						'transitionIn'		: 'none',
						'transitionOut'		: 'none',
						'type'				: 'iframe'
					});
			
	
	$("a.demo").click(function(e) {
		e.preventDefault();
		var markup = '<a href="/downloads/videos/tintri-demo.mp4" style="display:block;width:600px;height:338px" id="VideoPlayer"></a>';

		$.fancybox(markup, {
       		'autoDimensions': false,
			'titleShow'     : false,
			'padding'		: 18,
			'overlayColor'	: '#656565',
			'transitionIn'  : 'elastic',
			'transitionOut' : 'elastic',
			'height'		: 350,
			'width'			: 610
		});

		flowplayer("VideoPlayer", "/downloads/videos/flowplayer-3.2.7.swf");
		return false;
	});
});

$(document).ready(function() {
		var $$ = $('body.company #MapCanvas');
		if ($$.length == 0)
			return;
		var zoom = 12;
		var office = new google.maps.LatLng(37.40099806610471, -122.11147899999999);
		var mapCenter = new google.maps.LatLng(37.417584, -122.105935);
		var myOptions = {
			zoom: zoom,
			zoomControl: true,
			zoomControlOptions: {
			    style: google.maps.ZoomControlStyle.SMALL
		    },
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			navigationControl: false,
			center: mapCenter,
			mapTypeControl: false
		};

		var map = new google.maps.Map($$.get(0), myOptions);
		var marker = new google.maps.Marker({
			position: office,
			map: map
		});
		var infowindow = new google.maps.InfoWindow({ content: '<div style="height: 70px; width: 165px;"><b>Address:</b><br />2570 W. El Camino Real<br /> Mountain View, CA 94040<br /><a href="http://maps.google.com/maps?q=2570+W.+El+Camino+Real+Mountain+View,+CA+94040&oe=utf-8&um=1&ie=UTF-8&hq=&hnear=2570+W+El+Camino+Real,+Mountain+View,+CA+94040,+USA&ei=jzE3Tf7WHcf1gAeYj-3aAw&sa=X&oi=geocode_result&ct=title&resnum=1&ved=0CBUQ8gEwAA&f=d" target="_blank">Directions</a></div>' });
		infowindow.open(map,marker);
		google.maps.event.addListener(marker, 'click', function() {
		  infowindow.open(map,marker);
		  return false;
		});
		google.maps.event.addListener( infowindow, 'closeclick', function () { return false; } );
});

var HomeMastCarousel = {
    carousel: null,
    paused: false,
    clicked: 0,
    init: function() {
        $('#HomeMastCarousel').each(function(i) {
            $(this).find('li.hideOnLoad').removeClass('hideOnLoad').css({opacity: .001});
            $(this).jcarousel({
                // auto: 2,
                wrap: 'last',
                visible: 1,
                scroll: 1,
                itemVisibleInCallback: HomeMastCarousel.itemVisibleInCallback,
                initCallback: HomeMastCarousel.initCallback,
                animation: 0
            }).after('<ul class="carouselNav"><li class="one"><span class="active">1</span></li><li class="two"><span>2</span></li><li class="three"><span>3</span></li></ul>');
            $('ul.carouselNav li')    .live('click', HomeMastCarousel.navClick)
                                    .live('mouseover', HomeMastCarousel.navMouseover)
                                    .live('mouseout', HomeMastCarousel.navMouseout);
        });
        $('body.home #Mast').live('mouseover', HomeMastCarousel.mastMouseover)
                            .live('mouseout', HomeMastCarousel.mastMouseout);
    },
    /* Called when the image/slide loads. First it fades in the new image, then
        it uses jQuery's animate function to delay before fading out the image.
        Once the image has faded out there is a callback to tell the carousel
        to transition to the next slide/image and the process starts over again.
    */
    itemVisibleInCallback: function(c, el, i, state) {
        $('ul.carouselNav').find('li span.active').removeClass('active').end().find('li:eq(' + (i - 1) + ') > span').addClass('active');
        $(el).fadeTo('slow', 1.0, function() { HomeMastCarousel.fadeInCallback(c, el, i, state); });
    },
    fadeInCallback: function(c, el, i, state) {
        if (HomeMastCarousel.paused) {
            setTimeout(function() { HomeMastCarousel.fadeInCallback(c, el, i, state); }, 500);
            return;
        }
        setTimeout(function() {
            if (HomeMastCarousel.paused) {
                setTimeout(function() { HomeMastCarousel.fadeInCallback(c, el, i, state); }, 500);
                return;
            }
            $(el)
                     // Must animate almost to 0, cause if we go to 0, then the element
                    // gets display="none" and it auto switches to the next slide
                    .fadeTo('slow', 0.001, function() {
                        if (HomeMastCarousel.clicked == 0)
                            c.next();
                        else
                            HomeMastCarousel.clicked--;
                    } );
        }, 8000);
    },
    mastMouseover: function(e) { HomeMastCarousel.paused = true; },
    mastMouseout: function(e) { HomeMastCarousel.paused = false; },
    initCallback: function(carousel) { HomeMastCarousel.carousel = carousel; },
    navClick: function(e) {
        HomeMastCarousel.clicked++;
        HomeMastCarousel.carousel.scroll($.jcarousel.intval($(this).text()));
    },
    navMouseover: function(e) { $(this).addClass('hover'); },
    navMouseout: function(e) { $(this).removeClass('hover'); }
};
$(document).ready(HomeMastCarousel.init);

var QuoteCarousel = {
    carousel: null,
    paused: false,
    clicked: 0,
    init: function() {
        $('#QuoteCarousel').each(function(i) {
            $(this).find('li.hideOnLoad').removeClass('hideOnLoad').css({opacity: .001});
            $(this).jcarousel({
                // auto: 2,
                wrap: 'circular',
                visible: 1,
                scroll: 1,
                itemVisibleInCallback: QuoteCarousel.itemVisibleInCallback,
                initCallback: QuoteCarousel.initCallback,
                animation: 0
            }).after('<ul class="quoteNav"><li class="previous"><a href="#Previous" class="active">Previous</a></li><li class="next"><a href="#Next">Next</a></li></ul>');
            $('ul.quoteNav li.previous').live('click', QuoteCarousel.previousClick)
                                    .live('mouseover', QuoteCarousel.navMouseover)
                                    .live('mouseout', QuoteCarousel.navMouseout);
            $('ul.quoteNav li.next').live('click', QuoteCarousel.nextClick)
                                    .live('mouseover', QuoteCarousel.navMouseover)
                                    .live('mouseout', QuoteCarousel.navMouseout);
        });
        $('#QuoteCarousel').live('mouseover', QuoteCarousel.mastMouseover)
                            .live('mouseout', QuoteCarousel.mastMouseout);
    },
    /* Called when the image/slide loads. First it fades in the new image, then
        it uses jQuery's animate function to delay before fading out the image.
        Once the image has faded out there is a callback to tell the carousel
        to transition to the next slide/image and the process starts over again.
    */
    itemVisibleInCallback: function(c, el, i, state) {
        $('ul.quoteNav').find('li span.active').removeClass('active').end().find('li:eq(' + (i - 1) + ') > span').addClass('active');
        $(el).filter(':visible').fadeTo('slow', 1.0, function() { 
				QuoteCarousel.fadeInCallback(c, el, i, state); 
				 if ($.browser.msie)
					 this.style.removeAttribute('filter'); 
			 });

    },
    fadeInCallback: function(c, el, i, state) {
//        if (QuoteCarousel.paused) {
//            setTimeout(function() { QuoteCarousel.fadeInCallback(c, el, i, state); }, 500);
//            return;
//        }
//        setTimeout(function() {
//            if (QuoteCarousel.paused) {
//                setTimeout(function() { QuoteCarousel.fadeInCallback(c, el, i, state); }, 500);
//                return;
//            }
//            $(el).filter(':visible')
//                     // Must animate almost to 0, cause if we go to 0, then the element
//                    // gets display="none" and it auto switches to the next slide
//                    .fadeTo('slow', 0.001, function() {
//                        if (QuoteCarousel.clicked == 0){
//                            c.next();			 
//							if ($.browser.msie)
//								 this.style.removeAttribute('filter'); 
//						}
//                        else
//                            QuoteCarousel.clicked--;
//                    } );
//        }, 10000);
    },
    mastMouseover: function(e) { QuoteCarousel.paused = true; },
    mastMouseout: function(e) { QuoteCarousel.paused = false; },
    initCallback: function(carousel) { QuoteCarousel.carousel = carousel; },
    nextClick: function(e) {
        QuoteCarousel.clicked++;
        QuoteCarousel.carousel.next();
		QuoteCarousel.paused = true;
		setTimeout(function() { QuoteCarousel.paused = false; }, 500);
		return false;
    },
    previousClick: function(e) {
        QuoteCarousel.clicked++;
        QuoteCarousel.carousel.prev();
		QuoteCarousel.paused = true;
		setTimeout(function() { QuoteCarousel.paused = false; }, 500);
		return false;
    },
    navMouseover: function(e) { $(this).addClass('hover'); },
    navMouseout: function(e) { $(this).removeClass('hover'); }
};
$(document).ready(QuoteCarousel.init);

$(document).ready(function(){
	/* Based on: http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/ */
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#Slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#Slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */
	
	
	$('#ThumbnailMenu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */
			
			// effects above arrow -flb
			$('#ThumbnailMenu ul li').removeClass('active').addClass('inactive');
			$(this).parent().removeClass('inactive').addClass('active');
			
			// effects blue outline of thumbnail
			$('#ThumbnailMenu ul li a').removeClass('active').addClass('inactive');
			$(this).removeClass('inactive').addClass('active');
			
			var pos = $(this).parent().prevAll('#ThumbnailMenu ul li').length;
			
			$('#Slides').stop().animate({marginLeft:-positions[pos]+'px'},0);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
	});
	
	$('#ThumbnailMenu ul li:first').addClass('active').siblings().addClass('inactive');
	$('#ThumbnailMenu ul li:first a').addClass('active').siblings().addClass('inactive');

// archived #thumbnail code 07/30/2011
	//$('#ThumbnailMenu ul li a').click(function(e,keepScroll){
//
//			/* On a thumbnail click */
//
//			$('#ThumbnailMenu ul li').removeClass('active').addClass('inactive');
//			$(this).parent().removeClass('inactive').addClass('active');
//			
//			var pos = $(this).parent().prevAll('#ThumbnailMenu ul li').length;
//			
//			$('#Slides').stop().animate({marginLeft:-positions[pos]+'px'},0);
//			/* Start the sliding animation */
//			
//			e.preventDefault();
//			/* Prevent the default action of the link */
//			
//	});
	
//	$('#ThumbnailMenu ul li:first').addClass('active').siblings().addClass('inactive');
	
	
	/* On page load, mark the first thumbnail as active */

//	/*****
//	 *
//	 *	Enabling auto-advance.
//	 *
//	 ****/
//	 
//	var current=1;
//	function autoAdvance()
//	{
//		if(current==-1) return false;
//		
//		$('#ThumbnailMenu ul li a').eq(current%$('#ThumbnailMenu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
//		current++;
//	}
//
//	// The number of seconds that the slider will auto-advance in:	
//	var changeEvery = 10;
//
//	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
//	/* End of customizations */
});