var offerings;

function initAboutSection() {
    positionAboutNav();
    
    $("#toggle_offering").toggle(function() {
        $("#about_process_offerings_nav").animate({
            left: 328
        });
        $(this).addClass('selected');
    }, function() {
        $("#about_process_offerings_nav").animate({
            left: 623
        });
        $(this).removeClass('selected');
    });
    
    $("#about_process_offerings_nav .offering_link").hover(function() {
        $(this).find("img").attr("src", "/static/images/icon_offerings_play_hover.png");
    }, function() {
        $(this).find("img").attr("src", "/static/images/icon_offerings_play.png");
    });
    
    $("#people .pen_holster").toggle(function() {
        $(this).find("img.top").attr("src", "/static/images/company_bear_claw_no_pen_top.png");
        $(this).find("img.bottom").attr("src", "/static/images/company_bear_claw_no_pen_bottom.png");
        $("#person_canvas").addClass("drawable");
    }, function() {
        $(this).find("img.top").attr("src", "/static/images/company_bear_claw_pen_top.png");
        $(this).find("img.bottom").attr("src", "/static/images/company_bear_claw_pen_bottom.png");
        $("#person_canvas").removeClass("drawable");
        clearCanvas();
    });
    
    $("#about_process .offering_item").click(function() {
        $("#about_process .offering_item").removeClass("selected");
        $(this).addClass("selected");
        $("#about_process_offering_detail .title").html($(this).find(".content").html());
        $("#about_process_offering_detail .detail").html($(this).find(".detail").html());
        $("#about_process_offering_detail").show();
        if(isMobile) {
            $("#company_video_wrapper").hide();
        }
    });
    
    // Vertical-align the offerings; unforutnately this can't be done with pure CSS
    $.each($(".offering_item div.content"), function() {
        if($(this).height() < 20) {
            $(this).css("line-height", "33px");
        }
    });
    
    loadCompanyVideo();
}

function clearCanvas() {
    var canvas = document.getElementById("person_canvas");
    // check to see if canvas is supported
    if(canvas.getContext) {
        canvas.getContext('2d').clearRect(0,0,canvas.width,canvas.height);
    }
}

// Handles fixed vs absolute positioning of the sidebar, based on where we are in main page
function positionAboutNav() {
    var pos = $(window).scrollTop();
    var aboutTop = $("#about").offset().top;
    var sidebar = $("#about_nav");
    var scrollThreshold = aboutTop + $("#about_wrapper").height() - sidebar.height() - 180;
    if(pos < aboutTop - 250 || pos > scrollThreshold ) {
        if(sidebar.is(":visible")) {
            sidebar.slideUp();
        }
    } else {
        if(isMobile) {
            sidebar.css("position", "absolute");
            sidebar.css("top", (pos - aboutTop + 44) + "px");
            sidebar.show();
        } else {
            if(!sidebar.is(":visible")) {
                sidebar.slideDown();
            }
            sidebar.css("position", "fixed");
            sidebar.css("top", 44);
        }
    }
    
    highlightInAboutNav();
}

// highlights the current section in the sidebar when scrolling through about section
function highlightInAboutNav() {
    var pos = $(window).scrollTop();
    var sections = ["#about_us", "#about_process", "#about_clients", "#people", "#recognition"];

    for(var i = 0; i < sections.length; i++) {
        var section = $(sections[i]);
	    var sidebarElement = $("#company_link_" + section.attr("id"));
	    if(i == sections.length - 1) {
	        highlightNavSection(sidebarElement);
	        break;
	    }
	    
	    var scrollThreshold = section.offset().top + section.height() - $(window).height() / 2 + 100;
		if(pos < scrollThreshold) {
			highlightNavSection(sidebarElement);
			break;
		}
	}
}

function aboutSectionClicked(clicked, scrollTo) {
    scrollWindow(scrollTo, {'offset': -52});
    return false;
}

function highlightNavSection(section) {
    $("#about_nav .content a").removeClass("selected");
    $(section).find("a").addClass("selected");
}

function showAboutOverlay() {
    clickOffOverlay($('#about_made_of_overlay'), 400, null);
    return false;
}

function showPerson(personTile) {
    var source = $(personTile).next().attr("imgsrc");
    $("#person_image img").attr("src", source);
    $("#person_canvas").click(function(event) {
        event.stopPropagation(); 
    });
    clickOffOverlay($(personTile).next(), 400, function() {
        $("#person_image img").attr("src", "/static/images/company_bear.gif");
        clearCanvas();
        $("#person_canvas").unbind('click');
    });
    clearCanvas();
    return false;
}

function showOffering(offeringLink) {
    //first, copy the HTML to a parent since it is trapped inside the video frame with overflow: hidden
    var cloned = $(offeringLink).next().clone();
    cloned.attr("class", "offering_overlay");
    $(offeringLink).parents().slice(4,5).prepend(cloned);
    clickOffOverlay(cloned, 400, function() {
        cloned.remove();
    });
    return false;
}

function closeOffering(element) {
    $("#about_process .offering_item").removeClass("selected");
    $(element).parent().hide(); 
    if(isMobile) {
        $("#company_video_wrapper").show();
    }
    return false;
}

/**
 *  Calculates the number of awards per shelf as well as the height of each shelf.
 */
function parseRecognitions(json) {
    awards = $.parseJSON(json);
    
    var shelfWidth = 737;
    var html = '';
    var maxHeight = 0;      //for each shelf
    var left = 0;           //to be set on each award
    var rowHeights = [];    //an array of the max award height for each shelf
    var rowNum = 0;
    
    $.each(awards, function(index, value) {
        var award = value["fields"];
        var trophy = award["trophy"]["fields"];
        var title = award["title"];
        if(title === null || title === "") {
            title = trophy["title"];
        }
        if(index === 0 || left + trophy["shelf_img_width"] > shelfWidth) {
            if(index > 0) {
                html += '</div>';
                rowHeights.push(maxHeight + 102);
                maxHeight = 0;
            }
            left = 0;
            html += '<div class="trophy_shelf" rowid="' + rowNum + '">';
            rowNum += 1;
        }
        
        if(trophy["shelf_img_height"] > maxHeight) {
            maxHeight = trophy["shelf_img_height"];
        }
        html += '<div class="trophy" style="left: ' + left + 'px">';
        html += '<img src="/static/' + trophy['shelf_image'] + '" alt="" title="' + award['title'] + '" class="on_shelf">';
        html += '<div class="trophy_overlay" style="display: none">';
        html += '<img class="top" src="/static/images/company_award_overlay_top.png" alt="">';
        html += '<div class="trophy_content"><div class="middle">';
        html += '<img src="/static/images/icon_company_overlay_close.png" alt="Close" class="close"/>';
        html += '<div class="trophy_large"><img src="/static/' + trophy['image'] + '" alt="' + award['title'] + '"></div>';
        html += '<div class="trophy_name">' + title + '</div><div class="trophy_project">' + award['project'] + '</div>';
        html += '</div></div>';
        html += '<img class="bottom" src="/static/images/company_award_overlay_bottom.png" alt="">';
        html += '</div></div>';
        left += trophy["shelf_img_width"] + 25;
    });
    rowHeights.push(maxHeight + 102);
    html += '</div>';
    
    //set the heights after the shelves are in the DOM
    $("#recognition_content").html(html);
    $.each(rowHeights, function(index, value) {        
        $(".trophy_shelf[rowid=" + index + "]").height(value);
    });
    
    //now, set the height of the entire company section, as long as there's more than one trophy shelf
    if(rowNum > 0) {
        $("#about_wrapper").height(2700 + $("#recognition_content").height());
    }
    
    //add onclick handlers
    $("#recognition_content .trophy").click(function() {
        var overlay = $(this).find(".trophy_overlay");
        overlay.css("margin-left", overlay.width() / -2);
        overlay.css("margin-top", overlay.height() / -2);
        clickOffOverlay(overlay, 1, null);
    });
}

function loadCompanyVideo() {
    videos['aboutpodplayer'] = {
        "yt_id": "BiFFWYagK9M",
        "wrapperSelector": "#company_video_wrapper",
        "embed": "aboutPodPlayer"
    };
    
    // Lets Flash from another domain call JavaScript
    var params = { allowScriptAccess: "always", wmode: 'transparent' };
    // The element id of the Flash embed
    var atts = { id: "aboutPodPlayer" };
    
    // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=aboutpodplayer", "company_video_div", 623, 350, "8", null, null, params, atts, function(e) {
        if(!e.success) {
            jwplayer("company_video_div").setup({
                file: "http://www.youtube.com/watch?v=" + videos['aboutpodplayer']['yt_id'],
                width: 623,
                height: 350,
                modes: [{ type: "html5" }],
                controlbar: 'bottom'
            });
            $("#company_video_wrapper .hover").hide();
        }
    });    
    return false;
}