import QtQuick 2.0
import Sailfish.Silica 1.0

ApplicationWindow {
  initialPage: page

  Page {
    id: page
    Column {
    PageHeader {
      title: "Useless keyboard"
    }

    Row {
	BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "À" : "A" : fn.highlighted ? "à" : "a"; id: "kbd_a" }
               onClicked: { test.text += kbd_a.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "Z" : "z"; id: "kbd_z" }
               onClicked: { test.text += kbd_z.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "É" : "E" : fn.highlighted ? "é" : "e"; id: "kbd_e" }
               onClicked: { test.text += kbd_e.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "È" : "R" : fn.highlighted ? "è" : "r"; id: "kbd_r" }
               onClicked: { test.text += kbd_r.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ê" : "T" : fn.highlighted ? "ê" : "t"; id: "kbd_t" }
               onClicked: { test.text += kbd_t.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "Y" : "y"; id: "kbd_y" }
               onClicked: { test.text += kbd_y.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ù" : "U" : fn.highlighted ? "ù" : "u"; id: "kbd_u" }
               onClicked: { test.text += kbd_u.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Î" : "I" : fn.highlighted ? "î" : "i"; id: "kbd_i" }
               onClicked: { test.text += kbd_i.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ô" : "O" : fn.highlighted ? "ô" : "o"; id: "kbd_o" }
               onClicked: { test.text += kbd_o.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "P" : "p"; id: "kbd_p" }
               onClicked: { test.text += kbd_p.text; caps.highlighted = false; fn.highlighted = false } }
    }
    Row {
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "Q" : "q"; id: "kbd_q" }
               onClicked: { test.text += kbd_q.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "S" : "s"; id: "kbd_s" }
               onClicked: { test.text += kbd_s.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ë" : "D" : fn.highlighted ? "ë" : "d"; id: "kbd_d" }
               onClicked: { test.text += kbd_d.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "F" : "f"; id: "kbd_f" }
               onClicked: { test.text += kbd_f.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "G" : "g"; id: "kbd_g" }
               onClicked: { test.text += kbd_g.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "H" : "h"; id: "kbd_h" }
               onClicked: { test.text += kbd_h.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "J" : "j"; id: "kbd_j" }
               onClicked: { test.text += kbd_j.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ï" : "K" : fn.highlighted ? "ï" : "k"; id: "kbd_k" }
               onClicked: { test.text += kbd_k.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "L" : "l"; id: "kbd_l" }
               onClicked: { test.text += kbd_l.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "M" : "m"; id: "kbd_m" }
               onClicked: { test.text += kbd_m.text; caps.highlighted = false; fn.highlighted = false } }
    }
    Row {
        IconButton { width: page.width / 10.; icon.source: "image://theme/icon-m-capslock"; id: "caps"
	             onClicked: { highlighted = !highlighted } }
	IconButton { width: page.width / 10.; icon.source: "image://theme/icon-m-up"; id: "fn"
	             onClicked: { highlighted = !highlighted} }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "W" : "w"; id: "kbd_w" }
               onClicked: { test.text += kbd_w.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "X" : "x"; id: "kbd_x" }
               onClicked: { test.text += kbd_x.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ç" : "C" : fn.highlighted ? "ç" : "c"; id: "kbd_c" }
               onClicked: { test.text += kbd_c.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "V" : "v"; id: "kbd_v" }
               onClicked: { test.text += kbd_v.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "B" : "b"; id: "kbd_b" }
               onClicked: { test.text += kbd_b.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "N" : "n"; id: "kbd_n" }
               onClicked: { test.text += kbd_n.text; caps.highlighted = false; fn.highlighted = false } }
        IconButton { width: page.width / 5.; icon.source: "image://theme/icon-m-backspace"; id: "kbd_back" }
    }
	Label {
	  id: test
	  font.pixelSize: Theme.fontSizeLarge
          color: Theme.highlightColor
	  anchors.horizontalCenter: parent.horizontalCenter
	}
        Label {
	  text: "please type on the useless keyboard"
        }
    }
  }
}