$(document).ready(function() {

    $('#content .box a').click(function(e) {
        e.preventDefault();

        window.open($(this).attr('href'));
        
    });
    
    var colors = new Array("bg1","bg2","bg3","bg4","bg5","bg6","bg7");
    
	$("#logo").click(function(e) {
        e.preventDefault();
        var randno = Math.floor(Math.random() * colors.length); 
        $("body").removeAttr("class").addClass(colors[randno]);
	});
    
    
    // provided by Paul Irish
    window.requestAnimFrame = (function(callback){
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
    })();
    
	var canvas = $("#groups");
	var canvasHeight;
	var canvasWidth;
	var ctx;
	var dt = 0.1;
	
	var pointCollection;
	
	function init() {
		updateCanvasDimensions();
		
        var words = [ 
            //new Word("CSS", 50, 50, 0, 10,"#fff"),
            new Word("SVG", 159, 160, 0, 10,"#fff"),
            new Word("SEO", 229, 82, 0, 10,"#fff"),
            new Word("CSS3", 279, 58, 0, 10,"#fff"),
            new Word("XHTML", 337, 38, 0, 10,"#fff"),
            new Word("JAVASCRIPT", 397, 90, 0, 10,"#fff"),
            new Word("HTML5", 325, 107, 0, 10,"#fff"),
            new Word("HTML5", 325, 107, 0, 10,"#fff"),
            new Word("TAG", 423, 143, 0, 10,"#fff"),
            new Word("JQUERY", 478, 62, 0, 10,"#fff"),
            new Word("PHP", 430, 210, 0, 10,"#fff"),
            new Word("FONTFACE", 550, 148, 0, 10,"#fff"),
            new Word("HREF", 629, 62, 0, 10,"#fff"),
            new Word("WOFF", 627, 189, 0, 10,"#fff"),
            new Word("DIV", 668, 231, 0, 10,"#fff"),
            new Word("WWW", 47, 250, 0, 10,"#fff"),
            new Word("WIN", 547, 261, 0, 10,"#fff"),
            new Word("CZ", 139, 262, 0, 10,"#fff"),
            new Word("EU", 99, 310, 0, 10,"#fff"),
            new Word("COM", 161, 299, 0, 10,"#fff"),
            new Word("HOST", 103, 368, 0, 10,"#fff"),
            new Word("GB", 90, 402, 0, 10,"#fff"),
            new Word("KB", 66, 435, 0, 10,"#fff"),
            new Word("FOXX", 163, 476, 0, 10,"#fff"),
            new Word("TERA", 126, 419, 0, 10,"#fff"),
            new Word("CMS", 243, 389, 0, 10,"#fff"),
            new Word("IE", 458, 323, 0, 10,"#fff"),
            new Word("FB", 517, 321, 0, 10,"#fff"),
            new Word("MAC", 555, 356, 0, 10,"#fff"),
            new Word("PC", 504, 379, 0, 10,"#fff"),
            new Word("FEED", 535, 407, 0, 10,"#fff"),
            new Word("EMAIL", 365, 442, 0, 10,"#fff"),
            new Word("TWEET", 566, 440, 0, 10,"#fff"),
            new Word("ESHOP", 377, 482, 0, 10,"#fff"),
            new Word("RGB", 490, 576, 0, 10,"#fff"),
            new Word("INDD", 562, 576, 0, 10,"#fff"),
            new Word("AI", 628, 588, 0, 10,"#fff"),
            new Word("EPS", 578, 649, 0, 10,"#fff"),
            new Word("TTF", 400, 652, 0, 10,"#fff"),
            new Word("PNG", 438, 692, 0, 10,"#fff"),
            new Word("PSD", 493, 683, 0, 10,"#fff"),
            new Word("JPG", 456, 733, 0, 10,"#fff")
        
        ];

		var baseWidth = 720;
        var baseheight = 730;
        
        var browserWidth = $(window).width()-240; // minus right column
        var browserHeight = $(window).height()-50; // bottom padding
    
        var scalePercentWidth = baseWidth / browserWidth;
        var scalePercentHeight = baseheight / browserHeight;
        
		gLength = words.length;
        
		for (var i = 0; i < gLength; i++) {
            if (browserWidth > baseWidth) {
                words[i].originalPos.x = words[i].originalPos.x/scalePercentWidth;  
            }
            
            if (browserHeight > baseheight) {
                
                words[i].originalPos.y = words[i].originalPos.y/scalePercentHeight; 
                
            } else {
                words[i].originalPos.y = words[i].originalPos.y/scalePercentHeight; 
                
            }
            
             
		};
    
    

		
		pointCollection = new PointCollection();
		pointCollection.points = words;
		
        
		initEventListeners();
		timeout();
	};
	
	function initEventListeners() {
		$(window).bind('resize', updateCanvasDimensions).bind('mousemove', onMove);

	};
	
	function updateCanvasDimensions() {
		canvas.attr({height: $(window).height(), width: $(window).width()});
		canvasWidth = canvas.width();
		canvasHeight = canvas.height();

		draw();
	};
	
	function onMove(e) {
		if (pointCollection)
			pointCollection.mousePos.set(e.pageX, e.pageY);
	};

	
	function timeout() {
		draw();
		update();
		
		requestAnimFrame(function() { timeout() }, 25);
	};
	
	function draw() {
		var tmpCanvas = canvas.get(0);

		if (tmpCanvas.getContext == null) {
			return; 
		};
		
		ctx = tmpCanvas.getContext('2d');
		ctx.clearRect(0, 0, canvasWidth, canvasHeight);
		
		if (pointCollection)
			pointCollection.draw();
	};
	
	function update() {		
		if (pointCollection)
			pointCollection.update();
	};
	
	function Vector(x, y, z) {
		this.x = x;
		this.y = y;
        this.z = z;

		this.set = function(x, y, z) {
			this.x = x; 
			this.y = y;
            this.z = z;
		};
	};
	
	function PointCollection() {
		this.mousePos = new Vector(0, 0);
		this.points = new Array();
		
		this.update = function() {		
		  
			var pointsLength = this.points.length;
			
			for (var i = 0; i < pointsLength; i++) {
				var point = this.points[i];
				
				if (point == null)
					continue;
				
				var dx = this.mousePos.x - point.curPos.x;
				var dy = this.mousePos.y - point.curPos.y;
				var dd = (dx * dx) + (dy * dy);
				var d = Math.sqrt(dd);
                
				if (d < 100) {
					point.targetPos.x = (this.mousePos.x < point.curPos.x) ? point.curPos.x + dx : point.curPos.x + dx;
					point.targetPos.y = (this.mousePos.y < point.curPos.y) ? point.curPos.y + dy : point.curPos.y + dy;
				} else {
					point.targetPos.x = point.originalPos.x;
					point.targetPos.y = point.originalPos.y;
				};
				
				point.update();
			};
		};
		
		this.draw = function() {
			var pointsLength = this.points.length;
			for (var i = 0; i < pointsLength; i++) {
				var point = this.points[i];
				
				if (point == null)
					continue;

				point.draw();
			};
		};
	};
	
    
    function Word(text, x, y, z, size, color) {
		this.text = text;
        this.color = color;
		this.curPos = new Vector(x, y, z);
		this.friction = 0.8;
		this.originalPos = new Vector(x, y, z);
		this.size = size;
		this.springStrength = 0.08;
		this.targetPos = new Vector(x, y, z);
		this.velocity = new Vector(0.0, 0.0, 0.0);
        
        
		this.update = function() {
			var dx = this.targetPos.x - this.curPos.x;
			var ax = dx * this.springStrength;
			this.velocity.x += ax;
			this.velocity.x *= this.friction;
			this.curPos.x += this.velocity.x;
			
			var dy = this.targetPos.y - this.curPos.y;
			var ay = dy * this.springStrength;
			this.velocity.y += ay;
			this.velocity.y *= this.friction;
			this.curPos.y += this.velocity.y;
			
			var dox = this.originalPos.x - this.curPos.x;
			var doy = this.originalPos.y - this.curPos.y;
			var dd = (dox * dox) + (doy * doy);
			var d = Math.sqrt(dd);
			
		};
        
		
		this.draw = function() {
			ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.font = "22px PlatformMedium";
			//ctx.arc(this.curPos.x, this.curPos.y, this.size, 0, Math.PI*2, true);
            ctx.fillText(this.text, this.curPos.x, this.curPos.y);
			ctx.fill();
		};
        
    }
    
    
	init();
    
});