$(document).ready(function() {
	var curr_url = window.location.href,
		mobile_analytics_match = /mobile-analytics/gi
		soc_analytics_match = /social-analytics/gi
		solutions_match = /solutions/gi
		$top_menu_nav = $('nav.main > ul > li');

	// see if this is social-analytics page
	// if so, hide #social-analytics
	if(curr_url.match(soc_analytics_match)) {
		$('#social-analytics').hide();
	} else if (curr_url.match(mobile_analytics_match)) {
		$('#mobile-analytics').hide();
	} else if (curr_url.match(solutions_match)) {
		$('#social-analytics').hide();
	}
	
	$top_menu_nav.hover(function(){
		var $this = $(this);

		$this.find('ul')
		.removeClass('noJS')
		.stop(true, true)
		.slideDown('fast');
	}, function() {
		var $this = $(this);

		$this.find('ul')
		.addClass('noJS')
		.stop(true, true)
		.slideUp('fast');
	});

	$top_menu_nav.each(function() {
		var $this = $(this),
			currText,
	    	hasChild = $this.find('ul').length ? true : false;

		if(hasChild) {
			currText = $this.find('> a').html();
			$this.find('> a').html(currText + ' <span class="arrow">v</span>');
		}
	});
	
    function filterPath(string) {
        return string
            .replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,'');
    }
    var locationPath = filterPath(location.pathname),
        scrollElem = scrollableElement('html', 'body');

    $('a[href*=#]').each(function() {
        var thisPath = filterPath(this.pathname) || locationPath;
    
        if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) {
            var $target = $(this.hash), target = this.hash;
      
            if (target) {
                var targetOffset = $target.offset().top;
        
                $(this).click(function(event) {
                    event.preventDefault();
                    $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
                        location.hash = target;
                    });
                });
            }
        }
    });

	$('.tip').tipTip({
		defaultPosition: 'top'
	});

    // use the first element that is "scrollable"
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
            var el = arguments[i],
                $scrollElement = $(el);
      
            if ($scrollElement.scrollTop()> 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop()> 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }

    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){

        // Fade in images so there isn't a color "pop" document load and then on window load
        $(".item img").fadeIn(500);

        // clone image
        $('.item img').each(function(){
            var el = $(this);
            el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
                var el = $(this);
                el.parent().css({"width":this.width,"height":this.height});
                el.dequeue();
            });
            this.src = grayscale(this.src);
        });

        // Fade image
        $('.item img').mouseover(function(){
            $(this).parent().find('img:first').stop().animate({opacity:1}, 500);
        })
        $('.img_grayscale').mouseout(function(){
            $(this).stop().animate({opacity:0}, 500);
        });
    });

    // Grayscale w canvas method
    function grayscale(src){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }
});