/*
*	Kubik
*	Utility functions for kubik.com
*
*	Requires jQuery library (http://www.jquery.com),
*	sIFR 3 (http://wiki.novemberborn.net/sifr3)
*
*	Taylan Pince (taylan at trapeze dot com) - August 5, 2008
*/

$.extend($.namespace("trapeze.Kubik"), {

    init_markers : function() {
		$("html").addClass("has-js");

		$("li:last-child").addClass("last-child");
		$("li:first-child").addClass("first-child");

		$("input[@type=text]").addClass("text");
		$("input[@type=submit], input[@type=button]").addClass("submit");
		$("input[@type=password]").addClass("text");
		$("input[@type=file]").addClass("file");
		$("input[@type=radio]").addClass("radio");
		$("input[@type=checkbox]").addClass("checkbox");
		$("input[@type=image]").addClass("image");

		$("hr").wrap('<div class="hr"></div>');
	},

	init_sifr : function() {
	    if (typeof sIFR == "function") {
	        sIFR.replaceElement(named({
	            sSelector : "h1.section-title",
	            sFlashSrc : this.media_path + "/swf/helvetica-neue-medium.swf",
	            sColor : "#FFFFFF",
	            sLinkColor : "#FFFFFF",
	            sBgColor : "#FFFFFF",
	            sHoverColor : "#FFFFFF",
	            sWmode : "transparent"
	        }));

	        sIFR.replaceElement(named({
	            sSelector : "h2.page-title, h2.project-title",
	            sFlashSrc : this.media_path + "/swf/helvetica-neue-light.swf",
	            sColor : "#90a8ae",
	            sLinkColor : "#90a8ae",
	            sBgColor : "#FFFFFF",
	            sHoverColor : "#90a8ae",
	            sWmode : "transparent"
	        }));
	    }
    },

    init_search_form : function() {
        $("#SearchForm > input.text").focus(function() {
            if ($(this).val() == "search") {
                $(this).val("");
            }
        }).blur(function() {
            if ($(this).val() == "") {
                $(this).val("search");
            }
        });
    },

    init_header_fix : function() {
        if (!$("#Content").hasClass("home")) {
            $("h1").each(function() {
                $(this).css("top", "-" + ($(this).height() - 10) + "px");
            });
        }
    },

    top_countries : ["Netherlands", "Canada", "United States"],

    init_contact_form : function() {
        $("select#country").each(function() {
            for (var i = 0; i < trapeze.Kubik.top_countries.length; i++) {
                $(this).find("option[@value='" + trapeze.Kubik.top_countries[i] + "']").prependTo(this);
            }
        });
    },

    render_template : function(template, values) {
        for (val in values) {
            template = template.replace("%(" + val + ")", values[val]);
        }

        return template;
    },

    active_project : null,

    project_spot_template : '<h1 class="section-title">%(client_name)</h1><p>%(teaser)</p><a href="%(path)" class="more">see more</a>',

    show_project : function(id, url) {
        $.get(url, {}, function(data) {
            $("#Project" + id + " > .wrapper").html(trapeze.Kubik.render_template(trapeze.Kubik.project_spot_template, {
                "name": data[0].name,
                "client_name": data[0].client_name,
                "teaser": data[0].teaser,
                "path": data[0].path
            }));

            $("#Project" + id).css("display", "none").removeClass("hidden").slideDown();
            $("#ProjectLink" + id).hide();

            $("#Project" + id + " > .wrapper > h1").css("top", "-" + ($("#Project" + id + " > .wrapper > h1").height() - 5) + "px");

            if (trapeze.Kubik.active_project != null) {
                $("#Project" + trapeze.Kubik.active_project).slideUp();
                $("#ProjectLink" + trapeze.Kubik.active_project).show();
            }

            if (data[0].background != "None") {
                $("#Container").css("background-image", "url('" + trapeze.Kubik.media_path + data[0].background + "')");
            }

            trapeze.Kubik.active_project = id;
        }, "json");
    },

    collapsed_height_class : null,
    expanded_height_class : null,

    collapse_project : function() {
    	if (trapeze.Kubik.collapsed_height_class) {
    	    if (trapeze.Kubik.collapsed_height_class == "height-one")
    		collapsed_height = "79px";
    	    else if (trapeze.Kubik.collapsed_height_class == "height-two")
    		collapsed_height = "179px";
    	    else if (trapeze.Kubik.collapsed_height_class == "height-three")
    		collapsed_height = "279px";
    	    else if (trapeze.Kubik.collapsed_height_class == "height-four")
    		collapsed_height = "379px";
    	    else
    		collapsed_height = "479px";
    	}
    	else
    	    collapsed_height = "179px";

        $("#Content > div > *").not("#CollapsedArea, h1.section-title, h2.project-title, #Breadcrumbs, #ProjectNav").add("h3.gallery-title").fadeOut();
        $("#Content > div").animate({
            height: collapsed_height
        }, 500).addClass("collapsed");

        $("#CollapseToggle").replaceWith('<a href="javascript:void(0);" onclick="trapeze.Kubik.expand_project();" id="ExpandToggle">expand</a>');

    	/* According to the ticket [D622002-272], we want to hide the "Our Work" portion of the breadcrumb when collapsed */
    	$("#Breadcrumbs > a:eq(1)").hide();
    	$("#Breadcrumbs > span:eq(1)").hide();
    },

    expand_project : function() {
        if (trapeze.Kubik.expanded_height_class) {
            if (trapeze.Kubik.expanded_height_class == "height-one")
        	expanded_height = "79px";
            else if (trapeze.Kubik.expanded_height_class == "height-two")
        	expanded_height = "179px";
            else if (trapeze.Kubik.expanded_height_class == "height-three")
        	expanded_height = "279px";
            else if (trapeze.Kubik.expanded_height_class == "height-four")
        	expanded_height = "379px";
            else
        	expanded_height = "479px";
        }
        else
    	    expanded_height = "479px";

        $("#Content > div").animate({
            height: expanded_height
        }, 500, null, function() {
            $("#Content > div > *").not("#CollapsedArea, h1.section-title, h2.project-title, #Breadcrumbs, #ProjectNav").add("h3.gallery-title").fadeIn();
        }).removeClass("collapsed");

        $("#ExpandToggle").replaceWith('<a href="javascript:void(0);" onclick="trapeze.Kubik.collapse_project();" id="CollapseToggle">collapse</a>');

        /* According to the ticket [D622002-272], we want to show the "Our Work" portion of the breadcrumb only when expanded */
        $("#Breadcrumbs > a:eq(1)").show();
        $("#Breadcrumbs > span:eq(1)").show();
        
        // Remove the duplicate 'general' expand/colapse button
        $("#CollapseToggle.toggle-general").remove();
    },

    collapse_general : function() {
        var total_height = $("#Content > div").height();
        $("#Content > div * ").not("script, hr, .do-not-toggle").fadeOut();
        $("#Content > div").animate({
            height: "79px"
        }, 500).addClass("colapsed");

        $("#CollapseToggle").replaceWith('<a href="javascript:void(0);" onclick="trapeze.Kubik.expand_general();" id="ExpandToggle" class="toggle-general" rel="'+ total_height + '">expand</a>');

        this.fix_toggle_position();
    },

    expand_general : function() {
        var total_height = parseInt($("a.toggle-general").attr('rel'));

        $("#Content > div").animate({
            height: total_height// "500px" // todo: change this value with the dinamic height;
        }, 500, null, function(){
            $("#Content > div *").not("script, hr, .do-not-toggle").fadeIn();
        }).removeClass("collapsed");

        $("#ExpandToggle").replaceWith('<a href="javascript:void(0);" onclick="trapeze.Kubik.collapse_general();" id="CollapseToggle" class="toggle-general">collapse</a>');

        this.fix_toggle_position();
    },

    setup_expand_collapse : function() {
        //$("#Breadcrumbs > a").addClass("do-not-toggle");
        $("#Breadcrumbs > a:contains('About Us')").parent().parent().parent().addClass('about');
        $("#Breadcrumbs > a:contains('What We Do')").parent().parent().parent().addClass('services');

        $("#CollapsedArea, h1.section-title, #SubNavigation, #Breadcrumbs, #TwoColumns, #LeftColumn").addClass("do-not-toggle");
        $("#RightColumn, h2.page-title:first, #Breadcrumbs > a, #Content.about #SubNavigation > li").addClass("do-not-toggle");
        $("#Content.about #SubNavigation > li > a, #Content.services #SubNavigation > li").addClass("do-not-toggle");
        $("#Content.services #SubNavigation > li > a, h1.section-title.sIFR-replaced:first > embed").addClass("do-not-toggle");
        $("h1.section-title.sIFR-replaced:first > span, h2.page-title.sIFR-replaced:first > embed").addClass("do-not-toggle");
        $("h2.page-title.sIFR-replaced:first > span, #Content.projects #SubNavigation > li").addClass("do-not-toggle");
        $("#Content.projects #SubNavigation > li > a, #Breadcrumbs > span").addClass("do-not-toggle");

        $("#Content.news #RSSLink").css('right','74px');
        $("#Content.jobs #RSSLink").css('right','74px');

        $("#Content").find("#Breadcrumbs").before('<a id="CollapseToggle" onclick="trapeze.Kubik.collapse_general();" href="javascript:void(0);" class="toggle-general">collapse</a>');

        this.fix_toggle_position();
    },

    fix_toggle_position : function() {
        if ($("#Content.services").size() > 0) {
            $("a.toggle-general").css('top', '40px');
	} else if ($("#Content.projects").size() > 0) {
            $("a.toggle-general").css('top', '40px');
        } else {
            $("a.toggle-general").css('top', '8px');
        }
    },

    init : function() {
        this.init_markers();
        this.init_sifr();
        this.init_header_fix();
        this.init_search_form();
        this.init_contact_form();
        this.setup_expand_collapse();
    }

});

$(function() {
    trapeze.Kubik.init();
});