function initPager() {

    if ($("#content-area hr").length > 0) {
        //
        // Since we have javascript enforce limits
        //

        if ($.browser.msie) {
            $("#content").css({height: "510px", overflow: "hidden"});
        }
        $("#content-area").css({height: "435px"});
        var content = createContentBox();
        var children = $("#content-area div.content").children();
        var i = 1;
        ContentBoxes = new ContentBoxes();
        $("#content-area div.content").html("");
        $("#content-area div.content").append('<div id="content-boxes"></div>');
        children.each(function() {
            if (this.tagName.toLowerCase() == "hr") {
                ContentBoxes.add(content);
                content = createContentBox();
            }else if (children.length == i) {
                content.appendChild(this);
                ContentBoxes.add(content);
            } else {
                content.appendChild(this);
            }
            i++;
        });
        ContentBoxes.addNavigation();

        //
        // If has is already set, go to that section
        //
        if (document.location.hash.indexOf("#") > -1) {
            var page = document.location.hash.substring(1);
            ContentBoxes.page = page;
            ContentBoxes.updateNav(page);
            ContentBoxes.slideViewTo(page);
        }

    }
    $("#content-area").css({display: "block"});
}

var ContentBoxes = function() {
    this.count = 0;
    this.page = 1;
}

ContentBoxes.prototype.setPage = function(val) {
    this.page = val;
}

ContentBoxes.prototype.add = function(content) {
    $("div#content-boxes").append(content);
    this.count++;
}

ContentBoxes.prototype.addNavigation = function() {
    var navigationContainer = document.createElement('div');
    $(navigationContainer).addClass("navigation-container");
    var navigation = document.createElement('div');
    $(navigation).addClass("navigation-box");
    var combined = createNavLink("Combined View", false);
    var leftArrow = createNavLink("back", false);
    var rightArrow = createNavLink("next", false);
    var pages = document.createElement('div');
    $(pages).addClass("page-box");

    navigation.appendChild(combined);
    navigation.appendChild(leftArrow);
    for(i = 1; i <= this.count; i++) {
        var pager = createNavLink(i, true);
        pages.appendChild(pager);
    }
    navigation.appendChild(pages);
    navigation.appendChild(rightArrow);
    navigationContainer.appendChild(navigation);
    $("#content-area div.content").append(navigationContainer);
    this.attachNavActions();
}

ContentBoxes.prototype.attachNavActions = function() {
    var obj = this;
    $("div.navigation-box a").each(function() {
        $(this).click(function() {
            if ($(this).attr("value") != "next" && $(this).attr("value") != "back" && $(this).attr("value") != "Combined View") {
                obj.page = $(this).attr("value");
			} else {
                if ($(this).attr("value") == "next") {
                    if (($("div.navigation-box a").length - 3) > obj.page) {
                        obj.page++;
                    }
                } else if ($(this).attr("value") == "back") {
                    if (obj.page > 1) {
                        obj.page--;
                    }
		} else {
		    obj.page = 0;
                }
            }
	    if (obj.page != 0) {
                obj.slideViewTo(obj.page);
	    } else {
                var combined = function() {
                    $("div.content-box").css({yfloat: "none", paddingTop: "0px", paddingBottom: "0px"});
                    $("div#content-boxes").css({height: "auto", overflow: "visible", width: "600px"});
		    $("div#content-area").css({height: "auto", zoom: "1"})
		    $("div#content").css({overflow: "visible", height: "auto"});
                    $("div.navigation-container").append('<a href="#" id="redo-pager"><img src="/sites/all/themes/appatureinc/images/view_pager.gif" alt="Return to paged view." title="Return to paged view."></a>');
		    $("div.navigation-box").css("display", "none");

                    $("a#redo-pager").click(function() {
                        $("div.content-box").css({float: "left"});
                        if ($.browser.msie) {
                            if ($.browser.version < 7) {
                                $("div#content-boxes").css({ height: "415px", overflow: "hidden", width: "99999px"});
                            } else if ($.browser.version < 9) {
                                $("div#content-boxes").css({ height: "400px", overflow: "hidden", width: "99999px"});
                            }
                        } else {
                            $("div#content-boxes").css({ height: "410px", overflow: "hidden", width: "99999px"});
                        }
   		        $("div#content-area").css({height: "435px", zoom: "1"})
                                                if ($.browser.msie) {
		                                    $("div#content").css({overflow: "hidden", height: "510px"});
                                                }
                        $("a#redo-pager").remove()
		        $("div.navigation-box").css("display", "block");
                        return false;
                    });
                }
		if ($("div#content-boxes").css("left") == "0px") {
		    combined();
	        } else {
	            $("div#content-boxes").animate({left: "0px"}, { duration: 500, easing: "easeInOutQuad" });
                    $("div.navigation-box .page-box a").css({textDecoration: "none", color: "#4D4D4F"});
                    obj.updateNav(1, this.count);
		    setTimeout(combined, 500);
	        }
	    }

            return false;
        });
    });
}

ContentBoxes.prototype.slideViewTo = function(page) {
    var position = (page - 1) * 615;
    $("div.navigation-box .page-box a").css({textDecoration: "none", color: "#4D4D4F"});
    ContentBoxes.updateNav(page, $("div.navigation-box a").length - 3);
    $("div#content-boxes").animate({left: "-" + position + "px"}, { duration: 500, easing: "easeInOutQuad" });
}

ContentBoxes.prototype.updateNav = function (num, length) {
    $("div.navigation-box a[value=" + num + "]").css({color: "#F58025"});


    $("div.navigation-box .back-arrow").attr("href", "#" + (num > 1 ? num - 1 : 1));
    $("div.navigation-box .next-arrow").attr("href", "#" + (num < this.count ? num + 1 : this.count));
    document.location.hash = num;
    if (num == 1) {
        $("div.navigation-box .back-arrow").css({cursor: "default", backgroundPosition: "0px 0px"});
        $("div.navigation-box .back-arrow").fadeTo('fast', .3);
        $("div.navigation-box .back-arrow").hover(function() {
                                                      $(this).css({cursor: "default", backgroundPosition: "0px 0px"});
                                                  },
                                                  function() {
                                                      $(this).css({cursor: "default", backgroundPosition: "0px 0px"});
                                                  });
    } else {
        $("div.navigation-box .back-arrow").fadeTo('fast', 1);
        $("div.navigation-box .back-arrow").hover(function() {
                                                      $(this).css({backgroundPosition: "0px -15px", cursor: "pointer"});
                                                  },
                                                  function() {
                                                      $(this).css({backgroundPosition: "0px 0px", cursor: "pointer"});
                                                  });
    }

    if (num == length) {
        $("div.navigation-box .next-arrow").css({cursor: "default", backgroundPosition: "-12px 0px"});
        $("div.navigation-box .next-arrow").fadeTo('fast', .3);
        $("div.navigation-box .next-arrow").hover(function() {
                                                      $(this).css({cursor: "default", backgroundPosition: "-12px 0px"});
                                                  },
                                                  function() {
                                                      $(this).css({cursor: "default", backgroundPosition: "-12px 0px"});
                                                  });
    } else {
        $("div.navigation-box .next-arrow").fadeTo('fast', 1);
        $("div.navigation-box .next-arrow").hover(function() {
                                                      $(this).css({backgroundPosition: "-12px -15px", cursor: "pointer"});
                                                  },
                                                  function() {
                                                      $(this).css({backgroundPosition: "-12px 0px", cursor: "pointer"});
                                                  });
    }
}


function createContentBox() {
    var content = document.createElement('div');
    $(content).addClass("content-box");
    return content;
}

function createNavLink(name, numeric) {
    var link = document.createElement('a');
    if (typeof name != "number") {
	if(name=="Combined View") {
            $(link).addClass("combined-view");
            var txt = document.createElement('img');
            $(txt).attr({src: "/sites/all/themes/appatureinc/images/view_full_small.gif", alt: "View as one page.", title: "View as one page."});
	} else {
	    $(link).addClass(name + "-arrow");
            var txt = document.createTextNode(name);
	}
    } else {
        $(link).addClass("nav-link");
        var txt = document.createTextNode(name);
    }
    link.appendChild(txt);
    $(link).attr("href", "#");
    $(link).attr("value", name);
    if(name == 1) {
        $(link).attr("style", "color: #F58025;");
    }
    return link;
}

