Ext.onReady(function() {
	
	function getLogoHtml() {
		
		var img = new marknote.Element("img");
		img.setAttribute("src", "image/jbulb-logo.png");
		img.setAttribute("class", "logo");
		
		var logoHtml = img.toString();
		
		return logoHtml;

	}
	
	function getIntroHtml() {
		
		var introDiv = new marknote.Element("div");

		introDiv.setAttribute("class", "intro");
		introDiv.setText("jbulb is an incubator for open source software.");
		
		var introHtml = introDiv.toString();
		
		return introHtml;
		
	}
	
	function getContentHtml() {
		
		var contentTable = new marknote.Element("table");
		var tr = new marknote.Element("tr");		
		var leftTd = new marknote.Element("td");	
		var marknoteContentDiv = new marknote.Element("div");
		var middleTd = new marknote.Element("td");
		var middleDiv = new marknote.Element("div");
		var rightTd = new marknote.Element("td");
		var screamdocsContentDiv = new marknote.Element("screamdocs");
		
		contentTable.setAttribute("align", "center");
		contentTable.setAttribute("cellpadding", "15");
		contentTable.setAttribute("cellspacing", "15");
		contentTable.setAttribute("border", "0");
		
		marknoteContentDiv.setAttribute("id", "marknoteContent");

		leftTd.addChildElement(new marknote.Element("br"));
		leftTd.addChildElement(marknoteContentDiv);
		
		middleDiv.setAttribute("style", "padding-right: 15px;");
		middleTd.addChildElement(middleDiv);
		
		screamdocsContentDiv.setAttribute("id", "screamdocsContent");
		
		rightTd.addChildElement(new marknote.Element("br"));
		rightTd.addChildElement(screamdocsContentDiv);
		
		contentTable.addChildElement(tr);
		tr.addChildElement(leftTd);
		tr.addChildElement(middleTd);
		tr.addChildElement(rightTd);
		
		var contentHtml = contentTable.toString();
		
		return contentHtml;

	}
	
	var logoHtml = getLogoHtml();
	var introHtml = getIntroHtml();
	var contentHtml = getContentHtml();
		
	var marknoteHtml = 
		'<div style="padding: 10px 10px 10px 10px">' +
		'marknote is a super-fast, super-intuitive, lightweight Javascript XML library. ' +
		'<br><br>Use it to quickly and easily read XML from a URL, ' +
		'parse XML from a string, ' +
		'build XML from scratch, ' +
		'traverse and edit XML, ' +
		'generate XML, build dynamic XHTML, ' +
		'and convert from XML to JSON or JSON to XML, using a natural, intuitive API. ' +
		'<br><br>marknote also works as an Ext JS extension.' +
		'</div>';
	
	var screamdocsHtml = 
		'<div style="padding: 10px 10px 10px 10px">' +
		'screamdocs is a ridiculously easy-to-use, screaming-fast ' +
		'command-line API documentation generator ' +
		'for any non-Java programming langugage. ' +
		"<br><br>Written in Java so that it's completely platform independent, " +
		'it generates Javadoc-style API documentation from ' +
		'familiar Javadoc-like annotations. ' +
		'</div>';

	var copyrightHtml = 
 		'<div style="background-image: url(\'image/footer.jpg\');' +
 		'font-size: .85em; color: white;text-align:right; padding: 5px">' +
		'Copyright &copy; 2011 jbulb.org. All rights reserved.' +
		'</div>';
	
	var northPanelHtml = 
		'jbulb is an incubator for open source software.';	
	
    var cw;
    
    var marknoteMenu = Ext.create('Ext.menu.Menu', {
        id: 'marknoteMenu',
    	items: [
        	    {
        		    text: 'Code Project Page',
        		    icon: 'image/silk/cup.png',
        		    handler: function() {
        	    		window.open('http://code.google.com/p/marknote', '_blank');
        	    	}
        	    }, {
        		    text: 'Wiki',
            		icon: 'image/silk/book_open.png',
            		handler: function() {
        	    	    window.open('http://code.google.com/p/marknote/wiki/DevelopersGuide', '_blank');
        	    	}
        	    }, {
        		    text: 'Download',
            		icon: 'image/silk/arrow_down.png',
            		handler: function() {
        	    		window.open('http://code.google.com/p/marknote/downloads/list', '_blank');
    	    		}
        	    }, {
        		    text: 'API Docs',
        		    icon: 'image/silk/information.png',
        		    handler: function() {
    	    			window.open('http://jbulb.org/marknote/doc/', '_blank');
	    			}
        	    }, {
        	    	text: 'License',
        	    	ico: 'image/silk/scroll.png',
        		    icon: 'image/silk/script.png',
        		    handler: function() {
    	    			window.open('http://www.apache.org/licenses/LICENSE-2.0', '_blank');
	    			}
        	    }
        ]
    });
    
    var screamdocsMenu = Ext.create('Ext.menu.Menu', {
        id: 'screamdocsMenu',
    	items: [
        	    {
        		    text: 'Code Project Page',
        		    icon: 'image/silk/cup.png',
        		    handler: function() {
        	    		window.open('http://code.google.com/p/screamdocs', '_blank');
        	    	}
        	    }, {
        		    text: 'Wiki',
            		icon: 'image/silk/book_open.png',
            		handler: function() {
        	    	    window.open('http://code.google.com/p/screamdocs/wiki', '_blank');
        	    	}
        	    }, {
        		    text: 'Download',
            		icon: 'image/silk/arrow_down.png',
            		handler: function() {
        	    		window.open('http://code.google.com/p/screamdocs/downloads/list', '_blank');
    	    		}
        	    }, {
        	    	text: 'License',
        	    	ico: 'image/silk/scroll.png',
        		    icon: 'image/silk/script.png',
        		    handler: function() {
    	    			window.open('http://www.apache.org/licenses/LICENSE-2.0', '_blank');
	    			}
        	    }
        ]
    });
    
    Ext.create('Ext.Viewport', {
        layout: {
            type: 'border',
            padding: 0
        },
        defaults: {
            split: false
        },
        items: [{
            region: 'north',
            collapsible: false,
            split: false,
            autoHeight: true,
            border: 0,
            items: [{
            	border: false,
            	height: 125,
            	autoWidth: true,
            	html: logoHtml
            }, {
            	xtype: 'toolbar',
            	items: [
            	    {
            		    text: 'Marknote',
            		    icon: 'image/marknote.ico',
            		    menu: marknoteMenu
            	    }, {
            		    text: 'ScreamDocs',
                		icon: 'image/screamdocs.ico',
            		    menu: screamdocsMenu
            	    }
            	]
            }]
        }, {
            region: 'center',
            layout: 'border',
            border: 0,
            items: [{
            	region: 'north',
            	collapsible: false,
        		bodyStyle: 'background: #F8F8F8;',
        		html: introHtml
            }, {
                region: 'center',
                height: 'auto',
                html: contentHtml,
                collapsible: false
            }]
        }, {
            region: 'south',
            border: 0,
            collapsible: false,
            autoHeight: true,
            split: false,
            layout: {
                type: 'border',
                padding: 0
            },
            items: [{
            	collapsible: false,
                region: 'center',
                html: copyrightHtml
            }]
        }]
    });
    
    var contentWidth = 300;
    var contentHeight = 237;
    
    new Ext.Panel({
    	renderTo: 'marknoteContent',
    	width: contentWidth,
    	height: contentHeight,
    	title: 'marknote',
    	html: marknoteHtml,
    	frame: true
    });

    new Ext.Panel({
    	renderTo: 'screamdocsContent',
    	width: contentWidth,
    	height: contentHeight,
    	title: 'screamdocs',
    	html: screamdocsHtml,
    	frame: true
    });
    
});