// 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();
}

$(function(){
	$('ul.sf-menu').superfish(); 
	$('#btn-join').click(function(){
		$('#fd_joinup').slideDown();
		return false;
	});
	$('.btn-join').click(function(){
		$('#fd_joinup').slideDown();
		return false;
	});
	$('.btn-close').click(function(){
		$('#fd_joinup').slideUp();
		return false;
	});
	$('.r_more').click(function(){
		$(this).parents('p').next('.r_more_content').slideToggle();
		return false;
	});
	if ($('#hasError').length) {
		$('#fd_joinup').slideDown();
	}
	$('#joinup_form').validate({
	   invalidHandler: function(form, validator) {
		  var errors = validator.numberOfInvalids();
		  if (errors) {
			$('#fd_joinup').slideDown();
		  }
		},
		 errorElement: "span"
	});
	$(".submit").live("click",function(){$(this).fadeOut("fast").parents("form").submit();setTimeout('$(".submit").show();',2000);return false;});

	// Fade in images so there isn't a color "pop" document load and then on window load
	//$(".item img").animate({opacity:1},500);
	
	// clone image
	$('.canvas .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":"10"}).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 
	$('.canvas .item img').hover(function(){
//		$(this).parent().find('img:first').stop().animate({opacity:0}, 1000);
		$(this).stop().animate({opacity:0}, 500);
	},
	function(){
		$(this).stop().animate({opacity:1}, 500);
	});		
        var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body'),
        $win = $(window),
        showTip;
        var tip = {
            title: '',
            offset: 12,
            delay: 300,
            position: function(event) {
                var positions = {
                    x: event.pageX,
                    y: event.pageY
                };
                var dimensions = {
                    x: [$win.width(), $liveTip.outerWidth()],
                    y: [$win.scrollTop() + $win.height(), $liveTip.outerHeight()]
                };
                for (var axis in dimensions) {
                    if (dimensions[axis][0] < dimensions[axis][1] + positions[axis] + this.offset) {
                        positions[axis] -= dimensions[axis][1] + this.offset;
                    } else {
                        positions[axis] += this.offset;
                    }
                }
                $liveTip.css({
                    top: positions.y,
                    left: positions.x
                });
            }
        };
        $('body #collage').delegate('img', 'mouseover mouseout mousemove',
        function(event) {
            var link = this,
            $link = $(this);
            if (event.type == 'mouseover') {
                tip.title = link.title;
                link.title = '';
                if (tip.title.length > 1) {
                    showTip = setTimeout(function() {
                        $link.data('tipActive', true);
                        tip.position(event);
                        $liveTip.html('<div class="qtip-content">' + tip.title + '</div>').fadeOut(0).fadeIn(200);
                    },
                    tip.delay);
                }
            }
            if (event.type == 'mouseout') {
                link.title = tip.title || link.title;
                if ($link.data('tipActive')) {
                    $link.removeData('tipActive');
                    $liveTip.hide();
                } else {
                    clearTimeout(showTip);
                }
            }
            if (event.type == 'mousemove' && $link.data('tipActive')) {
                tip.position(event);
            }
        });
});