/**
 * Created by JetBrains PhpStorm.
 * User: Phil
 * Date: 15/08/11
 * Time: 20:13
 * To change this template use File | Settings | File Templates.
 */

    $(document).ready(function() {
        console.log("DOM Loaded");
        $("#icons div").bind("click", function(){toggleButton($(this));});
        positionIcons();
    });

    $(window).resize(function() {
        positionIcons();
    })

    function positionIcons() {
        divw = 120; $('#icons').find('img').each(function() {divw += $(this).width();});
        docw = $(window).width(); mard = (docw-divw)/2;
        console.log("document width: " + docw + "; divs width: " + divw + "; first div margin: " + mard);
        $("#icons").first().css("margin-left", mard);
    }

    function toggleButton(x) {
        // Toggle the buttons
        w = parseInt($(x).css("margin-top"), 10);z=$(x).attr("rel");
        if(w>0){$(x).animate({marginTop:0,marginLeft:0,paddingRight:z}, 200);}
        $(x).addClass("keepme");
        //$("#icons div").not(".keepme").animate({marginTop: 70, marginLeft: $(this).attr("rel")}, 1000);
        $("#icons div").not(".keepme").each(function() {
            z=$(this).attr("rel");$(this).animate({marginTop:40,marginLeft:z,paddingRight:0}, 200);
        });
        $(x).removeClass("keepme");

        // Load the text
        cs = "text-" + $(x).attr("id") + ".html";
        $("#content").fadeOut("fast",function(){$("#content").load(cs,function(){$("#content").fadeIn("fast");});});
    }