var MenustripDemo = React.createClass({
    render: function() {
        return (
            <div className="md-navigation">

                <mobiscroll.Menustrip
                    type="options"
                    select="single"
                    theme=" " 
                    themeVariant=" "
                    lang=" "
                    onItemTap={function (event, inst) {
                        document.querySelector('.md-tab-sel').classList.remove('md-tab-sel');
                        document.getElementById(event.target.getAttribute('data-tab')).classList.add('md-tab-sel');
                    }}
                >
                    <li data-tab="md-tab-iphone" data-icon="empty micons icon-iphone_6" data-selected="true">iPhone 6</li>
                    <li data-tab="md-tab-acc" data-icon="empty micons icon-iphone_accessories">Accessories</li>
                    <li data-tab="md-tab-comp" data-icon="empty micons icon-compare_iphone_models">Compare</li>
                    <li data-tab="md-tab-ios" data-icon="empty micons icon-ios_8">iOS 8</li>
                    <li data-tab="md-tab-icloud" data-icon="empty micons icon-icloud">iCloud</li>
                </mobiscroll.Menustrip>

                <div id="md-tab-iphone" className="md-tab md-tab-sel">
                    <h1 className="md-title">iPhone 6</h1>
                    <h2 className="md-title">Bigger than bigger</h2>
                    <div className="md-img-cont"><img src="/content/img/demos/iphone.jpg" /></div>
                </div>
                <div id="md-tab-acc" className="md-tab">
                    <div>Accessories</div>
                    <h1 className="md-title">The perfect fit.<br></br> And finish</h1>
                    <p>Make a statement. Cover every curve. Get fully charged. See all the essential Apple-designed accessories and more for iPhone&nbsp;6 and iPhone&nbsp;6&nbsp;Plus.</p>
                    <div className="md-img-cont"><img src="/content/img/demos/iphoneaccs.png" /></div>
                </div>
                <div id="md-tab-comp" className="md-tab">
                    <h1 className="md-title md-comp-title">Compare iPhone</h1>
                    <div className="md-title md-comp-subtitle">Compare iPhone 6 Plus with iPhone 6</div>
                    <div className="md-comp-table">
                        <div className="md-comp-cell">iPhone 6 Plus</div>
                        <div className="md-comp-cell">iPhone 6 </div>
                    </div>
                    <div className="md-comp-c">
                        <div className="md-comp-table">
                            <div className="md-comp-cell"><img src="/content/img/demos/6plus.png" /></div>
                            <div className="md-comp-cell"><img src="/content/img/demos/6.png" /></div>
                        </div>
                    </div>
                    <div className="md-title md-comp-sub">Overview</div>
                    <div className="md-comp-table">
                        <div className="md-comp-cell md-comp-desc">Available in silver, gold, and space gray, iPhone 6 Plus features an A8 chip, Touch ID, faster LTE wireless, a new 8MP iSight camera with Focus Pixels, and iOS 8.</div>
                        <div className="md-comp-cell md-comp-desc">Available in silver, gold, and space gray, iPhone 6 features an A8 chip, Touch ID, faster LTE wireless, a new 8MP iSight camera with Focus Pixels, and iOS 8.</div>
                    </div>
                </div>
                <div id="md-tab-ios" className="md-tab">
                    <div className="md-img-cont"><img src="/content/img/demos/ios8.png" /></div>
                    <h2 className="md-title">The biggest iOS release ever.</h2>
                    <div className="md-img-cont"><img src="/content/img/demos/ios.jpg" /></div>
                </div>
                <div id="md-tab-icloud" className="md-tab">
                    <div className="md-img-cont"><img src="/content/img/demos/icloud.png" /></div>
                    <h1 className="md-title">iCloud</h1>
                    <div className="md-title md-cloud-desc">iCloud connects you and your Apple devices in amazing ways. It makes sure you always have the latest versions of your most important things — like documents, apps, notes, and contacts — on whatever device you are using. It lets you easily share
                        photos, calendars, locations, and more with friends and family. It even helps you find your device if you lose it. And iCloud does it all automatically. Just like that.</div>
                    <div className="md-img-cont"><img src="/content/img/demos/icloudp.png" /></div>
                </div>

            </div>
        );
    }
});