package org.sagebionetworks.web.client.widget.entity.renderer;

import org.sagebionetworks.web.client.DisplayConstants;
import org.sagebionetworks.web.shared.WidgetConstants;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.inject.Inject;

public class TableOfContentsWidgetViewImpl extends FlowPanel implements TableOfContentsWidgetView {

	private Presenter presenter;
	private boolean hasLoaded;
	
	@Inject
	public TableOfContentsWidgetViewImpl() {
	}
	@Override
	protected void onAttach() {
		super.onAttach();
		if (!hasLoaded) {
			hasLoaded = true;
			FlowPanel linkContainer = new FlowPanel();
			HTMLPanel parentPanel = (HTMLPanel)this.getParent();
			//look for these special header ids (that were added by the markdown processor for us), and create links to them
			String id = WidgetConstants.MARKDOWN_HEADING_ID_PREFIX;
			int i = 0;
			Element heading = parentPanel.getElementById(id + i);
			if (heading == null) {
				//no entries.  add an informative message
				linkContainer.add(new HTML("<p class=\"smallGreyText\">"+DisplayConstants.NO_HEADERS_FOUND+"</p>"));
			}
			
			while (heading != null) {
				String text = heading.getInnerHTML();
				//create links to all headers in the page
				final Element scrollToElement = heading;
				SimplePanel wrapper = new SimplePanel();
				Anchor a = new Anchor();
				a.setHTML(text);
				a.addStyleName("link");
				a.addStyleName(heading.getAttribute("toc-style"));
				
				a.addClickHandler(new ClickHandler() {
					@Override
					public void onClick(ClickEvent event) {
						Window.scrollTo(0, scrollToElement.getOffsetTop());
					}
				});
				wrapper.add(a);
				linkContainer.add(wrapper);
				i++;
				heading = parentPanel.getElementById(id + i);
			}
			
			add(linkContainer);
		}
	}
	
	@Override
	public void configure() {
		this.clear();
		hasLoaded = false;
	}	
	
	@Override
	public Widget asWidget() {
		return this;
	}	

	@Override 
	public void setPresenter(Presenter presenter) {
		this.presenter = presenter;
	}
		
	
	/*
	 * Private Methods
	 */

}

@@ -169,16 +169,199 @@
 tants;%0A%0A
+import com.google.gwt.core.client.JavaScriptObject;%0Aimport com.google.gwt.core.client.JsArray;%0Aimport com.google.gwt.core.shared.GWT;%0Aimport com.google.gwt.dom.client.HeadingElement;%0A
 import c
@@ -1272,16 +1272,97 @@
 rent();%0A
+%09%09%09JsArray%3CElement%3E headingElements = _allHeaderElements(this.getElement());%0A%09%09%09%0A
 %09%09%09//loo
@@ -1476,157 +1476,45 @@
 %0A%09%09%09
-String id = WidgetConstants.MARKDOWN_HEADING_ID_PREFIX;%0A%09%09%09int i = 0;%0A%09%09%09Element heading = parentPanel.getElementById(id + i);%0A%09%09%09if (heading == null
+%0A%09%09%09if (headingElements.length() == 0
 ) %7B%0A
@@ -1676,27 +1676,81 @@
 %0A%09%09%09
-%0A%09%09%09while (
+for (int j = 0; j %3C headingElements.length(); j++) %7B%0A%09%09%09%09Element 
 heading 
 != n
@@ -1749,18 +1749,33 @@
 ing 
-!
 = 
-null) %7B
+headingElements.get(j);
 %0A%09%09%09
@@ -2322,104 +2322,461 @@
 %0A%09%09%09
-%09i++;%0A%09%09%09%09heading = parentPanel.getElementById(id + i);%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09add(linkContainer);%0A%09%09%7D%0A%09%7D%0A%09
+%7D%0A%09%09%09%0A%09%09%09add(linkContainer);%0A%09%09%7D%0A%09%7D%0A%09%0A%09private static native JsArray%3CElement%3E _allHeaderElements(Element el) /*-%7B%0A%09%09//find all header elements in the DOM%0A%09%09var allHeaderElements = $wnd.jQuery(%22:header%22);%0A%09%09//filter all header elements down to the collection of header elements that are descendents of the local markdown element%0A%09%09var markdownEl = $wnd.jQuery(el).closest(%22div.markdown%22);%0A%09%09return $wnd.jQuery(markdownEl).find(allHeaderElements);%0A%09%7D-*/;%0A
 %0A%09@O

use jquery to find all headers, then filter down to the local headers by looking only at the children of the local div.markdown element