'use strict';

var React = require('react-native');
var NavigationBar = require('../Components/NavigationBar');

var {
  StyleSheet,
  Text,
  ScrollView,
  View,
  StatusBarIOS,
  LinkingIOS,
  TouchableOpacity,
} = React;

var Help = React.createClass({
  _sendEmail() {
    LinkingIOS.openURL('mailto:info@rnplay.org');
  },

  render() {
    StatusBarIOS.setStyle(StatusBarIOS.Style.lightContent);
    return (
      <View style={{flex: 1}}>
        <NavigationBar title={'About'} />
        <ScrollView style={styles.contentContainer}>
            <Text style={styles.aboutTitle}>What is this app for?</Text>
            <Text style={styles.aboutText}>Running React Native apps from rnplay.org directly on your device.</Text>
            <View style={styles.separator} />
            <Text style={styles.aboutTitle}>How do I exit a loaded app?</Text>
            <Text style={styles.aboutText}>Tap and hold the screen with two fingers simultaneously for 1.5 seconds.</Text>
            <View style={styles.separator} />
            <Text style={styles.aboutTitle}>What does target mean?</Text>
            <Text style={styles.aboutText}>Target refers to the React Native build version that a given play is intended for.</Text>
            <View style={styles.separator} />
            <Text style={styles.aboutTitle} numberOfLines={2}>
              What React Native version is this app built with?
            </Text>
            <Text style={styles.aboutText} numberOfLines={2}>
              This app is currently built against React Native
              <Text style={styles.buildVersionText}> 0.5.0</Text>, released Friday, June 5th, 2015.
            </Text>
            <View style={styles.separator} />
            <View style={styles.otherQuestions}>
              <Text style={styles.otherQuestionsText}>
                More questions? Pleaes get in touch with us by email.
              </Text>
              <View style={{paddingTop: 5}}>
                <TouchableOpacity onPress={this._sendEmail}>
                  <Text style={styles.sendEmailText}>info@rnplay.org</Text>
                </TouchableOpacity>
              </View>
            </View>
        </ScrollView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  contentContainer: {
    marginTop: -10,
    paddingBottom: 20,
    flex: 1,
  },
  sendEmailText: {
    color: '#712FA9',
    fontSize: 13,
    marginTop: -2,
  },
  aboutTitle: {
    fontSize: 18,
    marginBottom: 4,
    lineHeight: 20,
    fontFamily: 'Avenir Next',
    paddingLeft: 15,
    paddingRight: 20,
  },
  aboutText: {
    paddingRight: 15,
    paddingLeft: 15,
    marginBottom: 12,
    fontSize: 13,
    textAlign: 'left',
    color: '#3a3638',
    opacity: 0.5,
  },
  separator: {
    flex: 1,
    height: 1,
    backgroundColor: "rgba(0,0,0,0.07)",
    marginBottom: 14,
  },
  buildVersionText: {
    fontWeight: 'bold',
  },
  otherQuestionsText: {
    opacity: 0.4,
    fontSize: 13,
  },
  otherQuestions: {
    paddingTop: 0,
    paddingLeft: 15,
    paddingRight: 15,
    paddingBottom: 23,
  }
});

module.exports = Help;

@@ -322,16 +322,69 @@
 ;%0A  %7D,%0A%0A
+  _loadURL(url) %7B%0A    LinkingIOS.openURL(url);%0A  %7D,%0A%0A
   render
@@ -384,24 +384,24 @@
  render() %7B%0A
-
     StatusBa
@@ -623,133 +623,182 @@
 les.
-aboutTitle%7D%3EWhat is this
+firstText%7D%3ERun React Native
  app
+s
  f
-or?%3C/Text%3E%0A            %3CText style=%7Bstyles.aboutText%7D%3ERunning React Native apps from rnplay.org
+rom %3CTouchableOpacity onPress=%7B() =%3E this._loadWebsite('https://rnplay.org')%7D%3E%3CText style=%7Bstyles.link%7D%3Ernplay.org%3C/Text%3E%3C/TouchableOpacity%3E
  dir
@@ -1988,91 +1988,8 @@
 ail.
-%0A              %3C/Text%3E%0A              %3CView style=%7B%7BpaddingTop: 5%7D%7D%3E%0A               
  %3CTo
@@ -2142,16 +2142,98 @@
 pacity%3E%0A
+%0A              %3C/Text%3E%0A              %3CView style=%7B%7BpaddingTop: 5%7D%7D%3E%0A              
         
@@ -2238,32 +2238,32 @@
         %3C/View%3E%0A
-
             %3C/Vi
@@ -2513,24 +2513,187 @@
 p: -2,%0A  %7D,%0A
+  link: %7B%0A    color: %22#712FA9%22%0A  %7D,%0A%0A  firstText: %7B%0A    paddingRight: 15,%0A    paddingLeft: 15,%0A    marginBottom: 30,%0A    fontSize: 16,%0A    textAlign: 'left',%0A  %7D,%0A
   aboutTitle
@@ -3203,11 +3203,9 @@
 ty: 
-0.4
+1
 ,%0A  

tweak some wording and styles