let React = require("react");
let electron = eRequire("electron");
let ipc = electron.ipcRenderer;

class ViewToolbar extends React.Component {
    constructor(props) {
        super(props);
        this.clickTutorButton = this.clickTutorButton.bind(this);
        this.clickCourseButton = this.clickCourseButton.bind(this);
        this.clickViewButton = this.props.clickViewButton.bind(this);
    }

    clickTutorButton() {
        let card1 = document.getElementById("card1");
        let card2 = document.getElementById("card2");
        card1.style.backgroundColor = "#A9A9A9";
        card2.style.backgroundColor = "#D3D3D3";

        this.clickViewButton("tutor");
    }


    clickCourseButton() {
        let card1 = document.getElementById("card1");
        let card2 = document.getElementById("card2");
        card1.style.backgroundColor = "#D3D3D3";
        card2.style.backgroundColor = "#A9A9A9";

        this.clickViewButton("course");
    }
    render(){
        return (
            <div id="toolbar" className="card">
                <h3 className="card-header">
                    Information
                </h3>

                <div id = "card1" type = "button" className = "card-body" onClick={this.clickTutorButton} style = {{backgroundColor: "#A9A9A9"}}>
                    <h5>
                        <i className="fa fa-user" aria-hidden="true"></i>  Tutor
                    </h5>
                </div> {/*tool bar */}
                <div id = "card2" type = "button" className = "card-body" onClick={this.clickCourseButton} style = {{backgroundColor: "#D3D3D3"}}>
                    <h5>
                        <i className="fa fa-book" aria-hidden="true"></i>  Course
                    </h5>
                </div>
            </div>
            )
    }
}

module.exports = ViewToolbar;
@@ -424,37 +424,41 @@
 ) %7B%0A        let 
-c
+tutorC
 ard
-1
  = document.getE
@@ -461,37 +461,41 @@
 getElementById(%22
-c
+tutorC
 ard
-1
 %22);%0A        let 
@@ -487,36 +487,41 @@
 );%0A        let c
+ourseC
 ard
-2
  = document.getE
@@ -533,37 +533,164 @@
 tById(%22c
-ard2%22);%0A        c
+ourseCard%22);%0A        let text1 = document.getElementById(%22tutorText%22);%0A        let text2 = document.getElementById(%22courseText%22);%0A%0A        tutorC
 ard
-1
 .style.b
@@ -708,22 +708,22 @@
 lor = %22#
-A9A9A9
+d9edf7
 %22;%0A     
@@ -718,36 +718,41 @@
 edf7%22;%0A        c
+ourseC
 ard
-2
 .style.backgroun
@@ -762,22 +762,101 @@
 lor = %22#
-D3D3D3
+5bc0de%22;%0A%0A        text1.style.color = %22#0055cc%22;%0A        text2.style.color = %22#f7f7f7
 %22;%0A%0A    
@@ -936,21 +936,25 @@
     let 
-c
+tutorC
 ard
-1
  = docum
@@ -973,21 +973,25 @@
 ntById(%22
-c
+tutorC
 ard
-1
 %22);%0A    
@@ -999,20 +999,25 @@
    let c
+ourseC
 ard
-2
  = docum
@@ -1037,20 +1037,25 @@
 tById(%22c
+ourseC
 ard
-2
 %22);%0A    
@@ -1058,21 +1058,25 @@
         
-c
+tutorC
 ard
-1
 .style.b
@@ -1094,22 +1094,22 @@
 lor = %22#
-D3D3D3
+5bc0de
 %22;%0A     
@@ -1112,20 +1112,25 @@
        c
+ourseC
 ard
-2
 .style.b
@@ -1148,22 +1148,218 @@
 lor = %22#
-A9A9A9
+d9edf7%22;%0A%0A        let text1 = document.getElementById(%22tutorText%22);%0A        let text2 = document.getElementById(%22courseText%22);%0A        text1.style.color = %22#f7f7f7%22;%0A        text2.style.color = %22#0055cc
 %22;%0A%0A    
@@ -1610,29 +1610,17 @@
  = %22
-card1%22 type = %22button
+tutorCard
 %22 cl
@@ -1706,14 +1706,14 @@
 : %22#
-A9A9A9
+d9edf7
 %22%7D%7D%3E
@@ -1728,32 +1728,73 @@
              %3Ch5
+ id=%22tutorText%22 style=%7B%7Bcolor:%22#0055cc%22%7D%7D
 %3E%0A              
@@ -1957,28 +1957,17 @@
 = %22c
-ard2%22 type = %22button
+ourseCard
 %22 cl
@@ -2054,14 +2054,14 @@
 : %22#
-D3D3D3
+5bc0de
 %22%7D%7D%3E
@@ -2084,16 +2084,58 @@
      %3Ch5
+ id=%22courseText%22 style=%7B%7Bcolor:%22#f7f7f7%22%7D%7D
 %3E%0A      

Change the color of view tool bar