import React from 'react';
import ReactDOM from 'react-dom';

import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';

class App extends React.Component {
    render () {
			let innerHtml =
				'<div style=\'margin: 10px;\'>' +
			        '<h3>Early History of the Internet</h3></div>' +
			    '<!--Content-->' +
			    '<div style=\'white-space: nowrap;\'>' +
			        '<ul>' +
			            '<li>1961 First packet-switching papers</li>' +
			            '<li>1966 Merit Network founded</li>' +
			            '<li>1966 ARPANET planning starts</li>' +
			            '<li>1969 ARPANET carries its first packets</li>' +
			            '<li>1970 Mark I network at NPL (UK)</li>' +
			            '<li>1970 Network Information Center (NIC)</li>' +
			            '<li>1971 Merit Network\'s packet-switched network operational</li>' +
			            '<li>1971 Tymnet packet-switched network</li>' +
			            '<li>1972 Internet Assigned Numbers Authority (IANA) established</li>' +
			            '<li>1973 CYCLADES network demonstrated</li>' +
			            '<li>1974 Telenet packet-switched network</li>' +
			            '<li>1976 X.25 protocol approved</li>' +
			            '<li>1979 Internet Activities Board (IAB)</li>' +
			            '<li>1980 USENET news using UUCP</li>' +
			            '<li>1980 Ethernet standard introduced</li>' +
			            '<li>1981 BITNET established</li>' +
			        '</ul>' +
			    '</div>' +
			    '<!--Header-->' +
			    '<div style=\'margin: 10px;\'>' +
			        '<h3>Merging the networks and creating the Internet</h3></div>' +
			    '<!--Content-->' +
			    '<div>' +
			        '<ul>' +
			            '<li>1981 Computer Science Network (CSNET)</li>' +
			            '<li>1982 TCP/IP protocol suite formalized</li>' +
			            '<li>1982 Simple Mail Transfer Protocol (SMTP)</li>' +
			            '<li>1983 Domain Name System (DNS)</li>' +
			            '<li>1983 MILNET split off from ARPANET</li>' +
			            '<li>1986 NSFNET with 56 kbit/s links</li>' +
			            '<li>1986 Internet Engineering Task Force (IETF)</li>' +
			            '<li>1987 UUNET founded</li>' +
			            '<li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>' +
			            '<li>1988 OSI Reference Model released</li>' +
			            '<li>1988 Morris worm</li>' +
			            '<li>1989 Border Gateway Protocol (BGP)</li>' +
			            '<li>1989 PSINet founded, allows commercial traffic</li>' +
			            '<li>1989 Federal Internet Exchanges (FIXes)</li>' +
			            '<li>1990 GOSIP (without TCP/IP)</li>' +
			            '<li>1990 ARPANET decommissioned</li>' +
			        '</ul>' +
			    '</div>' +
			    '<!--Header-->' +
			    '<div style=\'margin: 10px;\'>' +
			        '<h3>Popular Internet services</h3></div>' +
			    '<!--Content-->' +
			    '<div>' +
			        '<ul>' +
			            '<li>1990 IMDb Internet movie database</li>' +
			            '<li>1995 Amazon.com online retailer</li>' +
			            '<li>1995 eBay online auction and shopping</li>' +
			            '<li>1995 Craigslist classified advertisements</li>' +
			            '<li>1996 Hotmail free web-based e-mail</li>' +
			            '<li>1997 Babel Fish automatic translation</li>' +
			            '<li>1998 Google Search</li>' +
			            '<li>1999 Napster peer-to-peer file sharing</li>' +
			            '<li>2001 Wikipedia, the free encyclopedia</li>' +
			            '<li>2003 LinkedIn business networking</li>' +
			            '<li>2003 Myspace social networking site</li>' +
			            '<li>2003 Skype Internet voice calls</li>' +
			            '<li>2003 iTunes Store</li>' +
			            '<li>2004 Facebook social networking site</li>' +
			            '<li>2004 Podcast media file series</li>' +
			            '<li>2004 Flickr image hosting</li>' +
			            '<li>2005 YouTube video sharing</li>' +
			            '<li>2005 Google Earth virtual globe</li>' +
			        '</ul>' +
			    '</div>';
        return (
          <JqxPanel template={innerHtml}
						width={350} height={350}
					/>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));