├── LICENSE
├── css
    ├── base.css
    ├── base.scss
    ├── fb.css
    ├── fb.scss
    ├── grid.css
    ├── plus.css
    ├── plus.scss
    └── reset.css
├── images
    ├── 10kapart.png
    ├── facebook.png
    ├── googleplus.png
    ├── loading.gif
    ├── play.png
    ├── rdio_expanded.png
    ├── rdio_item.png
    └── yammer.png
├── index.html
├── js
    ├── config.js
    ├── ext-core.js
    ├── jsonp.js
    └── preview.js
└── readme.rest


/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011, Embed.ly, Inc.
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without modification,
 5 | are permitted provided that the following conditions are met:
 6 | 
 7 |     1. Redistributions of source code must retain the above copyright notice, 
 8 |        this list of conditions and the following disclaimer.
 9 |     
10 |     2. Redistributions in binary form must reproduce the above copyright 
11 |        notice, this list of conditions and the following disclaimer in the
12 |        documentation and/or other materials provided with the distribution.
13 | 
14 |     3. Neither the name of Embed.ly nor the names of its contributors may be used
15 |        to endorse or promote products derived from this software without
16 |        specific prior written permission.
17 | 
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 | 


--------------------------------------------------------------------------------
/css/base.css:
--------------------------------------------------------------------------------
  1 | #container {
  2 |   width: 600px;
  3 |   margin: 50px auto; }
  4 | 
  5 | body {
  6 |   background-color: #fff; }
  7 | 
  8 | div.preview_form {
  9 |   margin: 1em 0; }
 10 | 
 11 | #link {
 12 |   width: 490px;
 13 |   margin: 10px auto; }
 14 |   #link textarea {
 15 |     width: 400px;
 16 |     padding: 5px;
 17 |     font-size: 1.1em; }
 18 | 
 19 | #loading {
 20 |   background-image: url(../images/loading.gif);
 21 |   width: 200px;
 22 |   height: 15px;
 23 |   margin: 50px auto;
 24 |   background-repeat: no-repeat;
 25 |   display: none; }
 26 | 
 27 | #images {
 28 |   position: absolute;
 29 |   width: 300em;
 30 |   margin: 0px;
 31 |   padding: 0px;
 32 |   left: 0px; }
 33 |   #images li {
 34 |     list-style: none;
 35 |     float: left;
 36 |     margin: 0px;
 37 |     padding: 0px; }
 38 |   #images img {
 39 |     width: 100px; }
 40 | 
 41 | #left, #right {
 42 |   display: block;
 43 |   position: absolute;
 44 |   top: 0; }
 45 | 
 46 | #left {
 47 |   left: 0px; }
 48 | 
 49 | #right {
 50 |   right: 0; }
 51 | 
 52 | #display {
 53 |   width: 490px;
 54 |   margin: 10px auto;
 55 |   display: none; }
 56 |   #display .items {
 57 |     position: relative;
 58 |     overflow: hidden;
 59 |     height: 100px;
 60 |     padding: 0px;
 61 |     margin: -19px 0 0 0px;
 62 |     width: 100px; }
 63 |   #display .controls {
 64 |     margin: 0 0 3px 0;
 65 |     position: relative;
 66 |     height: 16px;
 67 |     z-index: 10000; }
 68 |   #display .wrap {
 69 |     width: 100px;
 70 |     float: left;
 71 |     margin: 0 10px 0 0; }
 72 |   #display input[type="text"] {
 73 |     width: 400px;
 74 |     padding: 3px;
 75 |     border: 1px solid #999; }
 76 |   #display textarea {
 77 |     border: 1px solid #999;
 78 |     width: 400px;
 79 |     height: 100px;
 80 |     padding: 3px; }
 81 | 
 82 | #attributes {
 83 |   width: 400px;
 84 |   margin: 0 0 0 110px; }
 85 |   #attributes p {
 86 |     line-height: 1.2em; }
 87 |   #attributes a {
 88 |     color: #111;
 89 |     text-decoration: none; }
 90 |     #attributes a:hover {
 91 |       background-color: #FF9; }
 92 | 
 93 | img.favicon, .favicon img {
 94 |   width: 16px;
 95 |   height: 16px; }
 96 | 
 97 | /*
 98 | Feed Styles
 99 | */
100 | #feed {
101 |   background-color: white;
102 |   padding: 0 10px; }
103 | 
104 | .item {
105 |   padding: 10px 0 0 0;
106 |   margin: 0 0 10px 0;
107 |   border-top: 1px solid #DDD; }
108 |   .item.first {
109 |     border-top: none; }
110 | 
111 | .container_12 .no_thumbnail {
112 |   float: left;
113 |   border-right: 2px solid #DDD;
114 |   height: 75px; }
115 | .container_12 .thumbnail {
116 |   margin: 5px 10px 10px 0;
117 |   width: 105px; }
118 |   .container_12 .thumbnail a {
119 |     display: table-cell;
120 |     width: 100px;
121 |     height: 75px;
122 |     overflow: hidden;
123 |     background-color: black;
124 |     vertical-align: middle;
125 |     position: relative;
126 |     text-align: center; }
127 |   .container_12 .thumbnail img {
128 |     max-width: 100px;
129 |     vertical-align: middle; }
130 | 
131 | .video .player_overlay, .rich .player_overlay {
132 |   background-image: url(../images/play.png);
133 |   width: 25px;
134 |   height: 25px;
135 |   position: absolute;
136 |   left: 3px;
137 |   bottom: 3px; }
138 | 
139 | .info {
140 |   font-size: 12px;
141 |   line-height: 15px;
142 |   position: relative; }
143 |   .info a {
144 |     display: block;
145 |     text-decoration: none; }
146 |     .info a:hover {
147 |       text-decoration: underline; }
148 |     .info a.title {
149 |       margin: 5px 0 0;
150 |       max-width: 400px; }
151 |     .info a.provider {
152 |       font-size: 11px; }
153 |   .info p {
154 |     color: #666;
155 |     margin: 5px 0; }
156 |   .info .close {
157 |     position: absolute;
158 |     top: 3px;
159 |     right: 3px;
160 |     font-size: 13px;
161 |     display: none; }
162 | 


--------------------------------------------------------------------------------
/css/base.scss:
--------------------------------------------------------------------------------
  1 | #container {
  2 |   width:600px;
  3 |   margin : 50px auto;
  4 | }
  5 | body {
  6 |   background-color: #fff;
  7 | }
  8 | div.main {
  9 | }
 10 | 
 11 | div.preview_form {
 12 |   margin:1em 0;
 13 | }
 14 | 
 15 | #link {
 16 |   width: 490px;
 17 |   margin: 10px auto;
 18 |   textarea {
 19 |     width: 400px;
 20 |     padding: 5px;
 21 |     font-size: 1.1em;
 22 |   }
 23 | }
 24 | 
 25 | #loading {
 26 |   background-image:url(../images/loading.gif);
 27 |   width: 200px;
 28 |   height: 15px;
 29 |   margin: 50px auto;
 30 |   background-repeat: no-repeat;
 31 |   display: none;
 32 | }
 33 | 
 34 | 
 35 | #images {
 36 |   position:absolute;
 37 |   width:300em;
 38 |   margin: 0px;
 39 |   padding: 0px;
 40 |   left:0px;
 41 |   li{
 42 |     list-style:none;
 43 |     float:left;
 44 |     margin: 0px;
 45 |     padding: 0px;
 46 |   }
 47 |   img{
 48 |     width:100px;
 49 |   }
 50 | }
 51 | 
 52 | 
 53 | #left, #right {
 54 |   display:block;
 55 |   position:absolute;
 56 |   top:0;
 57 | }
 58 | 
 59 | #left {
 60 |   left:0px;
 61 | }
 62 | 
 63 | #right{
 64 |   right:0;
 65 | }
 66 | 
 67 | #display {
 68 |   width:490px;
 69 |   margin: 10px auto;
 70 |   display: none;
 71 |   
 72 |   .items{
 73 |     position: relative;
 74 |     overflow:hidden;
 75 |     height:100px;
 76 |     padding: 0px;
 77 |     margin: -19px 0 0 0px;
 78 |     width: 100px;
 79 |   }
 80 |   .controls {
 81 |     margin: 0 0 3px 0;
 82 |     position: relative;
 83 |     height: 16px;
 84 |     z-index: 10000;
 85 |   }
 86 |   .wrap{
 87 |     width:100px;
 88 |     float: left;
 89 |     margin:0 10px 0 0;
 90 |   }
 91 |   input[type="text"] {
 92 |     width: 400px;
 93 |     padding: 3px;
 94 |     border: 1px solid #999;
 95 |   }
 96 |   textarea {
 97 |     border: 1px solid #999;
 98 |     width: 400px;
 99 |     height: 100px;
100 |     padding: 3px;
101 |   }
102 | }
103 | 
104 | #attributes {
105 |   width: 400px;
106 |   margin: 0 0 0 110px;
107 |   p {
108 |     line-height: 1.2em;
109 |   }
110 |   a {
111 |     color: #111;
112 |     text-decoration: none;
113 |     &:hover{
114 |       background-color: #FF9;
115 |     }
116 |   }
117 | }
118 | 
119 | img.favicon, .favicon img {
120 |   width:16px;
121 |   height:16px;
122 | }
123 | 
124 | /*
125 | Feed Styles
126 | */
127 | #feed{
128 |   background-color: white;
129 |   padding: 0 10px;
130 | }
131 | 
132 | .item {
133 |   padding: 10px 0 0 0;
134 |   margin: 0 0 10px 0;
135 |   border-top: 1px solid #DDD;
136 |   &.first {
137 |     border-top: none;
138 |   }
139 | }
140 | 
141 | .container_12 {
142 |   .no_thumbnail{
143 |     float: left;
144 |     border-right: 2px solid #DDD;
145 |     height: 75px;
146 |   }
147 |   .thumbnail {
148 |     margin: 5px 10px 10px 0;
149 |     width: 105px;
150 |     a {
151 |       display: table-cell;
152 |       width: 100px;
153 |       height: 75px;
154 |       overflow: hidden;
155 |       background-color: black;
156 |       vertical-align: middle;
157 |       position:relative;
158 |       text-align: center;
159 |     }
160 |     img {
161 |       max-width: 100px;
162 |       vertical-align:middle;
163 |     }
164 |   }
165 | }
166 | 
167 | .video, .rich {
168 |   .player_overlay {
169 |     background-image: url(../images/play.png);
170 |     width: 25px;
171 |     height: 25px;
172 |     position: absolute;
173 |     left: 3px;
174 |     bottom: 3px;
175 |   }
176 | }
177 | 
178 | 
179 | .info {
180 |   font-size: 12px;
181 |   line-height: 15px;
182 |   position:relative;
183 |   a{
184 |     display:block;
185 |     text-decoration:none;
186 |     &:hover{
187 |       text-decoration:underline;
188 |     }
189 |     &.title{
190 |       margin: 5px 0 0;
191 |       max-width: 400px;
192 |     }
193 |     &.provider{
194 |       font-size: 11px;
195 |     }
196 |   }
197 |   p{
198 |     color: #666;
199 |     margin: 5px 0;
200 |   }
201 |   .close{
202 |     position:absolute;
203 |     top:3px;
204 |     right:3px;
205 |     font-size: 13px;
206 |     display:none;
207 |   }
208 | }


--------------------------------------------------------------------------------
/css/fb.css:
--------------------------------------------------------------------------------
  1 | /* Facebook Styling for Demo */
  2 | body {
  3 |   background: #fff;
  4 |   font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
  5 |   font-size: 11px; }
  6 |   body #header {
  7 |     background: #3b5988;
  8 |     height: 41px; }
  9 |   body a {
 10 |     color: #3b5988;
 11 |     font-weight: bold;
 12 |     text-decoration: none; }
 13 |   body .container_12 .grid_8 {
 14 |     width: 493px; }
 15 |   body .main, body #feed {
 16 |     border-left: 1px solid #b3b3b3;
 17 |     padding-left: 20px; }
 18 |     body .main h2#preview_h2, body #feed h2#preview_h2 {
 19 |       color: #1C2A47;
 20 |       font-size: 16px;
 21 |       line-height: 22px; }
 22 |       body .main h2#preview_h2 span, body #feed h2#preview_h2 span {
 23 |         background: transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/XY1BTEJBstt.png") no-repeat -51px -276px;
 24 |         width: 16px;
 25 |         height: 18px;
 26 |         float: left;
 27 |         display: block;
 28 |         margin-right: 6px; }
 29 |   body .main {
 30 |     padding-top: 10px; }
 31 |     body .main #preview_form {
 32 |       position: relative; }
 33 |     body .main div.field {
 34 |       margin-top: 20px;
 35 |       position: relative;
 36 |       border: 1px solid #B4BBCD;
 37 |       padding: 10px; }
 38 |       body .main div.field label {
 39 |         position: absolute;
 40 |         color: #777;
 41 |         font-size: 13px;
 42 |         left: 14px;
 43 |         top: 13px; }
 44 |       body .main div.field textarea {
 45 |         border: 1px solid #BDC7D8;
 46 |         color: #333;
 47 |         width: 462px;
 48 |         resize: none;
 49 |         font-size: 13px;
 50 |         padding: 3px;
 51 |         line-height: 16px;
 52 |         height: 16px;
 53 |         cursor: text; }
 54 |     body .main #id_submit {
 55 |       background: #eeeeee url("https://s-static.ak.facebook.com/rsrc.php/v1/yf/r/_IKHHfAgFQe.png") 0px -49px;
 56 |       border: 1px solid #999;
 57 |       border-bottom: 1px solid #888;
 58 |       box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 59 |       -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 60 |       -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 61 |       -o-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 62 |       padding: 2px 4px;
 63 |       line-height: normal !important;
 64 |       white-space: nowrap;
 65 |       cursor: pointer;
 66 |       font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
 67 |       font-size: 13px;
 68 |       color: #333;
 69 |       font-weight: bold;
 70 |       text-align: center;
 71 |       outline: none;
 72 |       right: 12px;
 73 |       top: 11px;
 74 |       position: absolute; }
 75 |       body .main #id_submit.submit {
 76 |         background-color: #5B74A8;
 77 |         background-position: 0px -98px;
 78 |         border-color: #29447E #29447E #1A356E;
 79 |         color: #fff;
 80 |         top: inherit;
 81 |         bottom: 10px; }
 82 |   body #preview_form.preview {
 83 |     margin-top: 20px;
 84 |     position: relative;
 85 |     border: 1px solid #B4BBCD;
 86 |     padding: 10px; }
 87 |     body #preview_form.preview #form_field {
 88 |       display: none; }
 89 |     body #preview_form.preview a.title {
 90 |       color: #000;
 91 |       font-size: 12px;
 92 |       cursor: pointer; }
 93 |       body #preview_form.preview a.title:hover {
 94 |         background: #ff9; }
 95 |     body #preview_form.preview a.description {
 96 |       color: #000;
 97 |       font-size: 11px;
 98 |       cursor: pointer; }
 99 |       body #preview_form.preview a.description:hover {
100 |         background: #ff9; }
101 |     body #preview_form.preview #display .controls {
102 |       position: static; }
103 |     body #preview_form.preview #display .wrap {
104 |       padding-bottom: 20px; }
105 |     body #preview_form.preview #display p.url {
106 |       white-space: nowrap;
107 |       overflow: hidden;
108 |       width: 250px;
109 |       color: #666;
110 |       margin-bottom: 5px; }
111 |     body #preview_form.preview #left, body #preview_form.preview #right {
112 |       width: 25px;
113 |       height: 22px;
114 |       display: block;
115 |       text-indent: -9999em;
116 |       outline: none;
117 |       top: auto;
118 |       bottom: 10px; }
119 |     body #preview_form.preview #left {
120 |       left: 10px;
121 |       background: transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/8OjNXDy3pHp.gif") no-repeat -50px -83px; }
122 |       body #preview_form.preview #left:hover {
123 |         background-position: 0px -83px; }
124 |       body #preview_form.preview #left:active {
125 |         background-position: -100px -83px; }
126 |     body #preview_form.preview #right {
127 |       right: auto;
128 |       left: 35px;
129 |       background: transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/8OjNXDy3pHp.gif") no-repeat -75px -83px; }
130 |       body #preview_form.preview #right:hover {
131 |         background-position: -25px -83px; }
132 |       body #preview_form.preview #right:active {
133 |         background-position: -125px -83px; }
134 | 
135 | #feed .item {
136 |   clear: both;
137 |   border-color: #E9E9E9; }
138 | #feed .profilepic {
139 |   width: 50px;
140 |   margin-right: 10px;
141 |   float: left; }
142 | #feed h6 {
143 |   font-size: 11px;
144 |   font-weight: bold;
145 |   color: #3B5998;
146 |   margin-bottom: 5px; }
147 | #feed .embed {
148 |   margin: 0 0 0 60px; }
149 |   #feed .embed p {
150 |     font-size: 11px;
151 |     line-height: 14px; }
152 |     #feed .embed p.via {
153 |       clear: left; }
154 |       #feed .embed p.via .postIcon {
155 |         width: 16px;
156 |         height: 16px;
157 |         float: left;
158 |         margin-right: 3px; }
159 | 


--------------------------------------------------------------------------------
/css/fb.scss:
--------------------------------------------------------------------------------
  1 | /* Facebook Styling for Demo */
  2 | body {
  3 |   background:#fff;
  4 |   font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
  5 |   font-size:11px;
  6 |   #header {
  7 |     background:#3b5988;
  8 |     height:41px;
  9 |   }
 10 |   a {
 11 |     color:#3b5988;
 12 |     font-weight:bold;
 13 |     text-decoration:none;
 14 |   }
 15 |   .container_12 {
 16 |     .grid_8 {
 17 |       width:493px;
 18 |     }
 19 |   }
 20 |   .main, #feed {
 21 |     border-left:1px solid #b3b3b3;
 22 |     padding-left:20px;
 23 |     h2#preview_h2 {
 24 |       color:#1C2A47;
 25 |       font-size:16px; 
 26 |       line-height:22px;
 27 |       span {
 28 |         background:transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/XY1BTEJBstt.png") no-repeat -51px -276px;
 29 |         width:16px;
 30 |         height:18px;
 31 |         float:left;
 32 |         display:block;
 33 |         margin-right:6px;
 34 |       }
 35 |     }
 36 |   }
 37 |   .main {
 38 |     padding-top:10px;
 39 |     #preview_form {
 40 |       position:relative;
 41 |     }
 42 |     div.field {
 43 |       margin-top:20px;
 44 |       position:relative;
 45 |       border:1px solid #B4BBCD;
 46 |       padding:10px;
 47 |       label {
 48 |         position:absolute;
 49 |         color:#777;
 50 |         font-size:13px;
 51 |         left:14px;
 52 |         top:13px;
 53 |       }
 54 |       textarea {
 55 |         border:1px solid #BDC7D8;
 56 |         color:#333;
 57 |         width:462px;
 58 |         resize:none;
 59 |         font-size:13px;
 60 |         padding:3px;
 61 |         line-height:16px;
 62 |         height:16px;
 63 |         cursor:text;
 64 |       }
 65 |     }
 66 |     #id_submit {
 67 |       background:#eee url("https://s-static.ak.facebook.com/rsrc.php/v1/yf/r/_IKHHfAgFQe.png") 0px -49px;
 68 |       border:1px solid #999;
 69 |       border-bottom:1px solid #888;
 70 |       box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);
 71 |       -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);
 72 |       -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);
 73 |       -o-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);
 74 |       padding:2px 4px;
 75 |       line-height:normal !important;
 76 |       white-space:nowrap;
 77 |       cursor:pointer;
 78 |       font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
 79 |       font-size:13px;
 80 |       color:#333;
 81 |       font-weight:bold;
 82 |       text-align:center;
 83 |       outline:none;
 84 |       right:12px;
 85 |       top:11px;
 86 |       position:absolute;
 87 |       &.submit {
 88 |         background-color:#5B74A8;
 89 |         background-position:0px -98px;
 90 |         border-color:#29447E #29447E #1A356E;
 91 |         color:#fff;
 92 |         top:inherit;
 93 |         bottom:10px;
 94 |       }
 95 |     }
 96 |   }
 97 |   #preview_form.preview {
 98 |     margin-top:20px;
 99 |     position:relative;
100 |     border:1px solid #B4BBCD;
101 |     padding:10px;
102 |     #form_field {
103 |       display:none;
104 |     }
105 |     a.title {
106 |       color:#000;
107 |       font-size:12px;
108 |       cursor:pointer;
109 |       &:hover{
110 |         background:#ff9;
111 |       }
112 |     }
113 |     a.description {
114 |       color:#000;
115 |       font-size:11px;
116 |       cursor:pointer;
117 |       &:hover {
118 |         background:#ff9;
119 |       }
120 |     }
121 |     #display {
122 |       .controls {
123 |         position:static;
124 |       }
125 |       .wrap {
126 |         padding-bottom:20px;
127 |       }
128 |       p.url {
129 |         white-space:nowrap;
130 |         overflow:hidden;
131 |         width:250px;
132 |         color:#666;
133 |         margin-bottom:5px;
134 |       }
135 |     }
136 |     #left,#right {
137 |       width:25px;
138 |       height:22px;
139 |       display:block;
140 |       text-indent:-9999em;
141 |       outline:none;
142 |       top:auto;
143 |       bottom:10px;
144 |     }
145 |     #left{
146 |       left:10px;
147 |       background:transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/8OjNXDy3pHp.gif") no-repeat -50px -83px;
148 |       &:hover {
149 |         background-position:0px -83px;
150 |       }
151 |       &:active {
152 |         background-position:-100px -83px;
153 |       }
154 |     }
155 |     #right{
156 |       right:auto;
157 |       left:35px;
158 |       background:transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/8OjNXDy3pHp.gif") no-repeat -75px -83px;
159 |       &:hover {
160 |         background-position:-25px -83px;
161 |       }
162 |       &:active {
163 |         background-position:-125px -83px;
164 |       }
165 |     }
166 |   }
167 | }
168 | #feed {
169 |   .item {
170 |     clear:both;
171 |     border-color:#E9E9E9;
172 |   }
173 |   .profilepic {
174 |     width:50px;
175 |     margin-right:10px;
176 |     float:left;
177 |   }
178 |   h6 {
179 |     font-size:11px;
180 |     font-weight:bold;
181 |     color:#3B5998;
182 |     margin-bottom:5px;
183 |   }
184 |   .embed {
185 |     margin:0 0 0 60px;
186 |     p {
187 |       font-size:11px;
188 |       line-height:14px;
189 |       &.via {
190 |         clear:left;
191 |         .postIcon {
192 |           width:16px;
193 |           height:16px;
194 |           float:left;
195 |           margin-right:3px;
196 |         }
197 |       }
198 |     }
199 |   }
200 | }


--------------------------------------------------------------------------------
/css/grid.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	Variable Grid System.
  3 | 	Learn more ~ http://www.spry-soft.com/grids/
  4 | 	Based on 960 Grid System - http://960.gs/
  5 | 
  6 | 	Licensed under GPL and MIT.
  7 | */
  8 | 
  9 | 
 10 | /* Containers
 11 | ----------------------------------------------------------------------------------------------------*/
 12 | .container_12 {
 13 | 	margin-left: auto;
 14 | 	margin-right: auto;
 15 | 	width: 960px;
 16 | }
 17 | 
 18 | /* Grid >> Global
 19 | ----------------------------------------------------------------------------------------------------*/
 20 | 
 21 | .grid_1,
 22 | .grid_2,
 23 | .grid_3,
 24 | .grid_4,
 25 | .grid_5,
 26 | .grid_6,
 27 | .grid_7,
 28 | .grid_8,
 29 | .grid_9,
 30 | .grid_10,
 31 | .grid_11,
 32 | .grid_12 {
 33 | 	display:inline;
 34 | 	float: left;
 35 | 	position: relative;
 36 | 	margin-left: 10px;
 37 | 	margin-right: 10px;
 38 | }
 39 | 
 40 | /* Grid >> Children (Alpha ~ First, Omega ~ Last)
 41 | ----------------------------------------------------------------------------------------------------*/
 42 | 
 43 | .alpha {
 44 | 	margin-left: 0;
 45 | }
 46 | 
 47 | .omega {
 48 | 	margin-right: 0;
 49 | }
 50 | 
 51 | /* Grid >> 12 Columns
 52 | ----------------------------------------------------------------------------------------------------*/
 53 | 
 54 | .container_12 .grid_1 {
 55 | 	width:60px;
 56 | }
 57 | 
 58 | .container_12 .grid_2 {
 59 | 	width:140px;
 60 | }
 61 | 
 62 | .container_12 .grid_3 {
 63 | 	width:220px;
 64 | }
 65 | 
 66 | .container_12 .grid_4 {
 67 | 	width:300px;
 68 | }
 69 | 
 70 | .container_12 .grid_5 {
 71 | 	width:380px;
 72 | }
 73 | 
 74 | .container_12 .grid_6 {
 75 | 	width:460px;
 76 | }
 77 | 
 78 | .container_12 .grid_7 {
 79 | 	width:540px;
 80 | }
 81 | 
 82 | .container_12 .grid_8 {
 83 | 	width:620px;
 84 | }
 85 | 
 86 | .container_12 .grid_9 {
 87 | 	width:700px;
 88 | }
 89 | 
 90 | .container_12 .grid_10 {
 91 | 	width:780px;
 92 | }
 93 | 
 94 | .container_12 .grid_11 {
 95 | 	width:860px;
 96 | }
 97 | 
 98 | .container_12 .grid_12 {
 99 | 	width:940px;
100 | }
101 | 
102 | 
103 | 
104 | /* Prefix Extra Space >> 12 Columns
105 | ----------------------------------------------------------------------------------------------------*/
106 | 
107 | .container_12 .prefix_1 {
108 | 	padding-left:80px;
109 | }
110 | 
111 | .container_12 .prefix_2 {
112 | 	padding-left:160px;
113 | }
114 | 
115 | .container_12 .prefix_3 {
116 | 	padding-left:240px;
117 | }
118 | 
119 | .container_12 .prefix_4 {
120 | 	padding-left:320px;
121 | }
122 | 
123 | .container_12 .prefix_5 {
124 | 	padding-left:400px;
125 | }
126 | 
127 | .container_12 .prefix_6 {
128 | 	padding-left:480px;
129 | }
130 | 
131 | .container_12 .prefix_7 {
132 | 	padding-left:560px;
133 | }
134 | 
135 | .container_12 .prefix_8 {
136 | 	padding-left:640px;
137 | }
138 | 
139 | .container_12 .prefix_9 {
140 | 	padding-left:720px;
141 | }
142 | 
143 | .container_12 .prefix_10 {
144 | 	padding-left:800px;
145 | }
146 | 
147 | .container_12 .prefix_11 {
148 | 	padding-left:880px;
149 | }
150 | 
151 | 
152 | 
153 | /* Suffix Extra Space >> 12 Columns
154 | ----------------------------------------------------------------------------------------------------*/
155 | 
156 | .container_12 .suffix_1 {
157 | 	padding-right:80px;
158 | }
159 | 
160 | .container_12 .suffix_2 {
161 | 	padding-right:160px;
162 | }
163 | 
164 | .container_12 .suffix_3 {
165 | 	padding-right:240px;
166 | }
167 | 
168 | .container_12 .suffix_4 {
169 | 	padding-right:320px;
170 | }
171 | 
172 | .container_12 .suffix_5 {
173 | 	padding-right:400px;
174 | }
175 | 
176 | .container_12 .suffix_6 {
177 | 	padding-right:480px;
178 | }
179 | 
180 | .container_12 .suffix_7 {
181 | 	padding-right:560px;
182 | }
183 | 
184 | .container_12 .suffix_8 {
185 | 	padding-right:640px;
186 | }
187 | 
188 | .container_12 .suffix_9 {
189 | 	padding-right:720px;
190 | }
191 | 
192 | .container_12 .suffix_10 {
193 | 	padding-right:800px;
194 | }
195 | 
196 | .container_12 .suffix_11 {
197 | 	padding-right:880px;
198 | }
199 | 
200 | 
201 | 
202 | /* Push Space >> 12 Columns
203 | ----------------------------------------------------------------------------------------------------*/
204 | 
205 | .container_12 .push_1 {
206 | 	left:80px;
207 | }
208 | 
209 | .container_12 .push_2 {
210 | 	left:160px;
211 | }
212 | 
213 | .container_12 .push_3 {
214 | 	left:240px;
215 | }
216 | 
217 | .container_12 .push_4 {
218 | 	left:320px;
219 | }
220 | 
221 | .container_12 .push_5 {
222 | 	left:400px;
223 | }
224 | 
225 | .container_12 .push_6 {
226 | 	left:480px;
227 | }
228 | 
229 | .container_12 .push_7 {
230 | 	left:560px;
231 | }
232 | 
233 | .container_12 .push_8 {
234 | 	left:640px;
235 | }
236 | 
237 | .container_12 .push_9 {
238 | 	left:720px;
239 | }
240 | 
241 | .container_12 .push_10 {
242 | 	left:800px;
243 | }
244 | 
245 | .container_12 .push_11 {
246 | 	left:880px;
247 | }
248 | 
249 | 
250 | 
251 | /* Pull Space >> 12 Columns
252 | ----------------------------------------------------------------------------------------------------*/
253 | 
254 | .container_12 .pull_1 {
255 | 	left:-80px;
256 | }
257 | 
258 | .container_12 .pull_2 {
259 | 	left:-160px;
260 | }
261 | 
262 | .container_12 .pull_3 {
263 | 	left:-240px;
264 | }
265 | 
266 | .container_12 .pull_4 {
267 | 	left:-320px;
268 | }
269 | 
270 | .container_12 .pull_5 {
271 | 	left:-400px;
272 | }
273 | 
274 | .container_12 .pull_6 {
275 | 	left:-480px;
276 | }
277 | 
278 | .container_12 .pull_7 {
279 | 	left:-560px;
280 | }
281 | 
282 | .container_12 .pull_8 {
283 | 	left:-640px;
284 | }
285 | 
286 | .container_12 .pull_9 {
287 | 	left:-720px;
288 | }
289 | 
290 | .container_12 .pull_10 {
291 | 	left:-800px;
292 | }
293 | 
294 | .container_12 .pull_11 {
295 | 	left:-880px;
296 | }
297 | 
298 | 
299 | 
300 | 
301 | /* Clear Floated Elements
302 | ----------------------------------------------------------------------------------------------------*/
303 | 
304 | /* http://sonspring.com/journal/clearing-floats */
305 | 
306 | .clear {
307 | 	clear: both;
308 | 	display: block;
309 | 	overflow: hidden;
310 | 	visibility: hidden;
311 | 	width: 0;
312 | 	height: 0;
313 | }
314 | 
315 | /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
316 | 
317 | .clearfix:after {
318 | 	clear: both;
319 | 	content: ' ';
320 | 	display: block;
321 | 	font-size: 0;
322 | 	line-height: 0;
323 | 	visibility: hidden;
324 | 	width: 0;
325 | 	height: 0;
326 | }
327 | 
328 | .clearfix {
329 | 	display: inline-block;
330 | }
331 | 
332 | * html .clearfix {
333 | 	height: 1%;
334 | }
335 | 
336 | .clearfix {
337 | 	display: block;
338 | }


--------------------------------------------------------------------------------
/css/plus.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font: 13px/1.4 Arial, sans-serif; }
  3 | 
  4 | div.main {
  5 |   border-left: 1px solid #ddd;
  6 |   border-right: 1px solid #ddd; }
  7 | 
  8 | h2 {
  9 |   font-size: 18px;
 10 |   color: #333;
 11 |   font-weight: normal;
 12 |   margin: 1em 0 0.5em; }
 13 | 
 14 | div.preview_form {
 15 |   margin: 2em; }
 16 |   div.preview_form div.field {
 17 |     position: relative; }
 18 |   div.preview_form label {
 19 |     color: #999;
 20 |     position: absolute;
 21 |     left: 15px;
 22 |     top: 10px; }
 23 |   div.preview_form textarea {
 24 |     border: 1px solid #ddd;
 25 |     padding: 1em 1em 0;
 26 |     width: 540px;
 27 |     line-height: 1.4em;
 28 |     cursor: text;
 29 |     resize: none; }
 30 |   div.preview_form button, div.preview_form input#id_submit {
 31 |     background-color: #3D9400;
 32 |     border: 1px solid #29691D;
 33 |     color: #FFFFFF;
 34 |     text-shadow: 0 1px rgba(0, 0, 0, 0.1);
 35 |     border-radius: 2px 2px 2px 2px;
 36 |     cursor: default;
 37 |     font-size: 11px;
 38 |     font-weight: bold;
 39 |     height: 27px;
 40 |     line-height: 27px;
 41 |     min-width: 54px;
 42 |     outline: none;
 43 |     padding: 0 8px;
 44 |     text-align: center;
 45 |     margin: 1em 0; }
 46 |     div.preview_form button:hover, div.preview_form input#id_submit:hover {
 47 |       background-color: #368200; }
 48 |     div.preview_form button.disabled, div.preview_form input#id_submit.disabled {
 49 |       opacity: 0.5;
 50 |       -moz-opacity: 0.5;
 51 |       -webkit-opacity: 0.5;
 52 |       -o-opacity: 0.5; }
 53 |       div.preview_form button.disabled:hover, div.preview_form input#id_submit.disabled:hover {
 54 |         background-color: #3D9400; }
 55 | 
 56 | #display, #loading {
 57 |   border: 1px solid #ddd;
 58 |   border-top: none;
 59 |   width: 540px;
 60 |   padding: 1em;
 61 |   margin: -2px 0 0; }
 62 | 
 63 | #loading {
 64 |   text-align: center;
 65 |   background-position: center center; }
 66 | 
 67 | #display .controls {
 68 |   background: rgba(0, 0, 0, 0.7);
 69 |   height: 20px; }
 70 |   #display .controls a.button {
 71 |     text-decoration: none;
 72 |     color: #999;
 73 |     padding: 2px 5px;
 74 |     outline: none; }
 75 |     #display .controls a.button:hover {
 76 |       color: #fff; }
 77 | #display .items {
 78 |   margin-top: -23px; }
 79 | #display a.title {
 80 |   color: #3366CC;
 81 |   font-weight: bold;
 82 |   display: block;
 83 |   margin-bottom: 0.25em; }
 84 | #display input.title {
 85 |   display: block;
 86 |   margin-bottom: 0.25em;
 87 |   width: 490px; }
 88 | #display .description {
 89 |   line-height: 1.4em; }
 90 | #display img.favicon {
 91 |   float: left;
 92 |   margin: 0 5px 5px 0; }
 93 | #display #wrap {
 94 |   clear: left; }
 95 | 
 96 | #feed {
 97 |   padding: 0;
 98 |   margin: 0 10px;
 99 |   border: 1px solid #ddd;
100 |   border-width: 0px 1px; }
101 |   #feed .item {
102 |     padding: 1em 2em;
103 |     border-bottom: 1px solid #ddd;
104 |     margin: 0; }
105 |     #feed .item.first {
106 |       border-top: 1px solid #ddd; }
107 |     #feed .item .favicon {
108 |       float: left;
109 |       margin: 0 5px 5px 0; }
110 |     #feed .item a.title {
111 |       color: #3366CC;
112 |       font-weight: bold;
113 |       display: block;
114 |       margin-bottom: 0.25em; }
115 |     #feed .item .thumbnail {
116 |       clear: left;
117 |       margin-left: 5px; }
118 |     #feed .item .info {
119 |       font: 13px/1.4 arial, sans-serif;
120 |       color: #333; }
121 |       #feed .item .info p {
122 |         color: #333; }
123 | 


--------------------------------------------------------------------------------
/css/plus.scss:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font:13px/1.4 Arial,sans-serif;
  3 | }
  4 | div.main {
  5 |   border-left:1px solid #ddd;
  6 |   border-right:1px solid #ddd;
  7 | }
  8 | h2 {
  9 |   font-size:18px;
 10 |   color:#333;
 11 |   font-weight:normal;
 12 |   margin:1em 0 0.5em;
 13 | }
 14 | div.preview_form {
 15 |   margin:2em;
 16 |   div.field {
 17 |     position:relative;
 18 |   }
 19 |   label {
 20 |     color:#999;
 21 |     position:absolute;
 22 |     left:15px;
 23 |     top:10px;
 24 |   }
 25 |   textarea {
 26 |     border:1px solid #ddd;
 27 |     padding:1em 1em 0;
 28 |     width:540px;
 29 |     line-height:1.4em;
 30 |     cursor:text;
 31 |     resize: none;
 32 |   }
 33 |   button, input#id_submit {
 34 |     background-color: #3D9400;
 35 |     border: 1px solid #29691D;
 36 |     color: #FFFFFF;
 37 |     text-shadow: 0 1px rgba(0, 0, 0, 0.1);
 38 |     border-radius: 2px 2px 2px 2px;
 39 |     cursor: default;
 40 |     font-size: 11px;
 41 |     font-weight: bold;
 42 |     height: 27px;
 43 |     line-height: 27px;
 44 |     min-width: 54px;
 45 |     outline: none;
 46 |     padding: 0 8px;
 47 |     text-align: center;
 48 |     margin:1em 0;
 49 |     &:hover{
 50 |       background-color:#368200;
 51 |     }
 52 |     &.disabled {
 53 |       opacity:0.5;
 54 |       -moz-opacity:0.5;
 55 |       -webkit-opacity:0.5;
 56 |       -o-opacity:0.5;
 57 |       &:hover{
 58 |         background-color: #3D9400;
 59 |       }
 60 |     }
 61 |   }
 62 | }
 63 | #display, #loading {
 64 |   border:1px solid #ddd;
 65 |   border-top:none;
 66 |   width:540px;
 67 |   padding:1em;
 68 |   margin:-2px 0 0;
 69 | }
 70 | #loading {
 71 |   text-align:center;
 72 |   background-position:center center;
 73 | }
 74 | 
 75 | #display {
 76 |   .controls {
 77 |     background:rgba(0,0,0,0.7);
 78 |     height:20px;
 79 |     a.button {
 80 |       text-decoration:none;
 81 |       color:#999;
 82 |       padding:2px 5px;
 83 |       outline:none;
 84 |       &:hover {
 85 |         color:#fff;
 86 |       }
 87 |     }
 88 |   }
 89 |   .items {
 90 |     margin-top:-23px;
 91 |   }
 92 |   a.title {
 93 |     color:#3366CC;
 94 |     font-weight:bold;
 95 |     display:block;
 96 |     margin-bottom:0.25em;
 97 |   }
 98 |   input.title {
 99 |     display:block;
100 |     margin-bottom:0.25em;
101 |     width:490px;
102 |   }
103 |   .description {
104 |     line-height:1.4em;
105 |   }
106 |   img.favicon {
107 |     float:left;
108 |     margin:0 5px 5px 0;
109 |   }
110 |   #wrap {
111 |     clear:left;
112 |   }
113 | }
114 | #feed {
115 |   padding:0;
116 |   margin:0 10px;
117 |   border:1px solid #ddd;
118 |   border-width:0px 1px;
119 |   .item {
120 |     padding:1em 2em;
121 |     border-bottom:1px solid #ddd;
122 |     margin:0;
123 |     &.first {
124 |       border-top:1px solid #ddd;
125 |     }
126 |     .favicon {
127 |       float:left;
128 |       margin:0 5px 5px 0;
129 |     }
130 |     a.title {
131 |       color:#3366CC;
132 |       font-weight:bold;
133 |       display:block;
134 |       margin-bottom:0.25em;
135 |     }
136 |     .thumbnail {
137 |       clear:left;
138 |       margin-left:5px;
139 |     }
140 |     .info {
141 |       font:13px/1.4 arial,sans-serif;
142 |       color:#333;
143 |       p {
144 |         color:#333;
145 |       }
146 |     }
147 |   }
148 | }


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
  1 | /*  HTML5 ✰ Boilerplate  */
  2 | 
  3 | html, body, div, span, object, iframe,
  4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  5 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
  6 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
  7 | fieldset, form, label, legend,
  8 | table, caption, tbody, tfoot, thead, tr, th, td,
  9 | article, aside, canvas, details, figcaption, figure,
 10 | footer, header, hgroup, menu, nav, section, summary,
 11 | time, mark, audio, video {
 12 |   margin: 0;
 13 |   padding: 0;
 14 |   border: 0;
 15 |   font-size: 100%;
 16 |   font: inherit;
 17 |   vertical-align: baseline;
 18 | }
 19 | 
 20 | article, aside, details, figcaption, figure,
 21 | footer, header, hgroup, menu, nav, section {
 22 |   display: block;
 23 | }
 24 | 
 25 | blockquote, q { quotes: none; }
 26 | blockquote:before, blockquote:after,
 27 | q:before, q:after { content: ''; content: none; }
 28 | ins { background-color: #ff9; color: #000; text-decoration: none; }
 29 | mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
 30 | del { text-decoration: line-through; }
 31 | abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
 32 | table { border-collapse: collapse; border-spacing: 0; }
 33 | hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
 34 | input, select { vertical-align: middle; }
 35 | 
 36 | body { font:13px/1.231 sans-serif; *font-size:small; } 
 37 | select, input, textarea, button { font:99% sans-serif; }
 38 | pre, code, kbd, samp { font-family: monospace, sans-serif; }
 39 | 
 40 | html { overflow-y: scroll; }
 41 | a:hover, a:active { outline: none; }
 42 | ul, ol { margin-left: 2em; }
 43 | ol { list-style-type: decimal; }
 44 | nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
 45 | small { font-size: 85%; }
 46 | strong, th { font-weight: bold; }
 47 | td { vertical-align: top; }
 48 | 
 49 | sub, sup { font-size: 75%; line-height: 0; position: relative; }
 50 | sup { top: -0.5em; }
 51 | sub { bottom: -0.25em; }
 52 | 
 53 | pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
 54 | textarea { overflow: auto; }
 55 | .ie6 legend, .ie7 legend { margin-left: -7px; } 
 56 | input[type="radio"] { vertical-align: text-bottom; }
 57 | input[type="checkbox"] { vertical-align: bottom; }
 58 | .ie7 input[type="checkbox"] { vertical-align: baseline; }
 59 | .ie6 input { vertical-align: text-bottom; }
 60 | label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
 61 | button, input, select, textarea { margin: 0; }
 62 | input:valid, textarea:valid   {  }
 63 | input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
 64 | .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
 65 | 
 66 | ::-moz-selection{ background: #0095DA; color:#fff; text-shadow: none; }
 67 | ::selection { background:#0095DA; color:#fff; text-shadow: none; }
 68 | a:link { -webkit-tap-highlight-color: #0095DA; }
 69 | 
 70 | button {  width: auto; overflow: visible; }
 71 | .ie7 img { -ms-interpolation-mode: bicubic; }
 72 | 
 73 | body, select, input, textarea {  color: #444; }
 74 | h1, h2, h3, h4, h5, h6 { font-weight: bold; }
 75 | a, a:active, a:visited { color: #607890; }
 76 | a:hover { color: #036; }
 77 | 
 78 | 
 79 | /**
 80 |  * Primary styles
 81 |  *
 82 |  * Author: 
 83 |  */
 84 | 
 85 | 
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
101 | .hidden { display: none; visibility: hidden; }
102 | .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
103 | .visuallyhidden.focusable:active,
104 | .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
105 | .invisible { visibility: hidden; }
106 | .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
107 | .clearfix:after { clear: both; }
108 | .clearfix { zoom: 1; }
109 | 
110 | 
111 | @media all and (orientation:portrait) {
112 | 
113 | }
114 | 
115 | @media all and (orientation:landscape) {
116 | 
117 | }
118 | 
119 | @media screen and (max-device-width: 480px) {
120 | 
121 |   /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
122 | }
123 | 
124 | 
125 | @media print {
126 |   * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
127 |   -ms-filter: none !important; } 
128 |   a, a:visited { color: #444 !important; text-decoration: underline; }
129 |   a[href]:after { content: " (" attr(href) ")"; }
130 |   abbr[title]:after { content: " (" attr(title) ")"; }
131 |   .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
132 |   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
133 |   thead { display: table-header-group; }
134 |   tr, img { page-break-inside: avoid; }
135 |   @page { margin: 0.5cm; }
136 |   p, h2, h3 { orphans: 3; widows: 3; }
137 |   h2, h3{ page-break-after: avoid; }
138 | }
139 | 


--------------------------------------------------------------------------------
/images/10kapart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/10kapart.png


--------------------------------------------------------------------------------
/images/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/facebook.png


--------------------------------------------------------------------------------
/images/googleplus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/googleplus.png


--------------------------------------------------------------------------------
/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/loading.gif


--------------------------------------------------------------------------------
/images/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/play.png


--------------------------------------------------------------------------------
/images/rdio_expanded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/rdio_expanded.png


--------------------------------------------------------------------------------
/images/rdio_item.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/rdio_item.png


--------------------------------------------------------------------------------
/images/yammer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/yammer.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="js/ext-core.js" type="text/javascript" ></script>
 5 |     <script src="js/jsonp.js" type="text/javascript" ></script>
 6 |     <script src="js/config.js" type="text/javascript" ></script>
 7 |     <script src="js/preview.js" type="text/javascript" ></script>
 8 |     
 9 |     <link rel="stylesheet" href="css/reset.css" />
10 |     <link rel="stylesheet" href="css/grid.css" />
11 |     <link rel="stylesheet" href="css/base.css" />
12 |     <link rel="alternate stylesheet" href="css/plus.css" title="plus" />
13 |     <link rel="alternate stylesheet" href="css/fb.css" title="fb" />
14 |   </head>
15 |   <body>
16 |     <div id="header"></div>
17 |     <div id="main" role="main" class="container_12">
18 |       <div class="grid_8 push_2 main">
19 |         <div class="preview_form">
20 |           <h2 id="preview_h2"><span></span>Stream</h2>
21 |           <form id="preview_form" method="post" action=".">
22 |             <div class="field" id="form_field">
23 |               <label for="id_status" id="status_label">Share what's new...</label>
24 |               <textarea name="status" id="id_status" rows="1"></textarea>
25 |             </div>
26 |             <div id="loading"></div>
27 |             <div id="display"></div>
28 |             <input id="id_submit" type="submit" class="disabled" value="Share"/>
29 |           </form>
30 |         </div>
31 |       </div>
32 |       <div id="feed" class="grid_8 push_2"></div>
33 |       <div class="clear"></div>
34 |     </div>
35 |   </body>
36 | </html>


--------------------------------------------------------------------------------
/js/config.js:
--------------------------------------------------------------------------------
 1 | EMBEDLY_API_KEY = '7f6cf7cec28511e0866c4040d3dc5c07'
 2 | 
 3 | 
 4 | EMBEDLY_INITIAL_DATA = [
 5 |     {"type":"html",
 6 |      "original_url":"http://t.co/HGLDdZA",
 7 |      "url":"http://couch.graphic.ly/post/8481137255/embedding-graphicly-comics-just-got-easy",
 8 |      "title":"Embedding Graphicly Comics Just Got Easy",
 9 |      "description":"Editor's note: This announcement is largely for publishers and developers, although the benefits reach far beyond these audiences.",
10 |      "favicon_url":"https://i.embed.ly/?url=http%3A//26.media.tumblr.com/avatar_f93350d4d43b_16.png",
11 |      "provider_url":"http://couch.graphic.ly/",
12 |      "provider_display":"couch.graphic.ly",
13 |      "safe":"true",
14 |      "html":"",
15 |      "thumbnail_url":""},
16 |     {"type":"html",
17 |      "original_url":"http://nyti.ms/nneoiY",
18 |      "url":"http://www.nytimes.com/2011/08/09/world/europe/09britain.html?pagewanted=all",
19 |      "title":"Budget Cuts and Scorn for Police Seen Fueling London Riot",
20 |      "description":"LONDON - As London surveyed the damage on Sunday after a small anti-police demonstration spiraled into looting and violence that left 26 police officers injured and led to 55 arrests, many sought to cast the blame beyond the rioters themselves.",
21 |      "favicon_url":"https://i.embed.ly/?url=http%3A//www.nytimes.com/favicon.ico",
22 |      "provider_url":"http://www.nytimes.com/",
23 |      "provider_display":"www.nytimes.com",
24 |      "safe":"true",
25 |      "html":"",
26 |      "thumbnail_url":"https://i.embed.ly/?url=http://graphics8.nytimes.com/images/common/icons/t_wb_75.gif"},
27 |     {"type":"rich",
28 |      "original_url":"http://www.rdio.com/artist/Bon_Iver/album/Bon_Iver/",
29 |      "url":"http://www.rdio.com/artist/Bon_Iver/album/Bon_Iver/",
30 |      "title":"Bon Iver",
31 |      "description":"Bon Iver - Bon Iver. Worth a listen",
32 |      "favicon_url":"https://i.embed.ly/?url=http%3A//ak.rdio.com/media/images/icons/Rdio_48.png",
33 |      "provider_url":"http://www.rdio.com",
34 |      "provider_display":"www.rdio.com",
35 |      "safe":"true",
36 |      "html":"<iframe src=\"https://media.embed.ly/1/frame?wmode=opaque&url=http://www.rdio.com/artist/Bon_Iver/album/Bon_Iver/&height=250&width=500&key=internal&autoplay=true\" width=\"500\" height=\"250\" border=\"0\" scrolling=\"no\" frameborder=\"0\" />",
37 |      "thumbnail_url":"https://i.embed.ly/?url=http%3A//www.rdio.com/_is/%3Fm%3Dalbum/5/d/c/00000000000c7cd5/square-200.jpg%26w%3D200%26h%3D200"},
38 |     {"type":"video",
39 |      "original_url":"http://vimeo.com/18150336",
40 |      "url":"http://vimeo.com/18150336",
41 |      "title":"Wingsuit Basejumping - The Need 4 Speed: The Art of Flight",
42 |      "description":"The Need 4 Speed: The Art of Flight A collection of shots from flights made during the 2009-2010 season by the talented group of wingsuit basejumpers, while flying the V3, Hybrid LD2/Trango rigs and testing several new V-series wingsuit prototypes around Europe.",
43 |      "favicon_url":"http://vimeo.com/favicon.ico",
44 |      "provider_url":"http://vimeo.com/",
45 |      "provider_display":"vimeo.com",
46 |      "safe":"true",
47 |      "html":"<iframe src=\"http://player.vimeo.com/video/18150336?autoplay=1\" width=\"500\" height=\"281\" frameborder=\"0\"></iframe>",
48 |      "thumbnail_url":"http://b.vimeocdn.com/ts/117/311/117311910_1280.jpg"},
49 |     {"type":"html",
50 |      "original_url":"http://techcrunch.com/2011/08/08/yc-funded-snapjoy-will-organize-your-photos-for-you-and-make-sure-you-dont-lose-them/",
51 |      "url":"http://techcrunch.com/2011/08/08/yc-funded-snapjoy-will-organize-your-photos-for-you-and-make-sure-you-dont-lose-them/",
52 |      "title":"YC-Funded Snapjoy Will Organize Your Photos For You (And Make Sure You Don’t Lose Them)",
53 |      "description":"As an intelligent TechCrunch reader with the gift of foresight, you've probably backed up your hard drive — and all of the precious photos locked inside — to at least one cloud service, just in case the unthinkable happens and you lose both your computer and your local backup.",
54 |      "favicon_url":"http://s2.wp.com/wp-content/themes/vip/tctechcrunch2/images/favicon.ico?m=1310283188g",
55 |      "provider_url":"http://techcrunch.com/",
56 |      "provider_display":"techcrunch.com",
57 |      "safe":"true",
58 |      "html":"",
59 |      "thumbnail_url":"http://tctechcrunch2011.files.wordpress.com/2011/08/snapjoyshot.png?w=640"},
60 |     {"type":"html",
61 |      "original_url":"http://www.bbc.co.uk/news/uk-england-london-14450248",
62 |      "url":"http://www.bbc.co.uk/news/uk-england-london-14450248",
63 |      "title":"New violence as May meets police",
64 |      "description":"Home Secretary Theresa May is meeting police chiefs about rioting in London with new violence erupting in Hackney. Skirmishes broke out between police and groups of young people in the area around Mare Street.",
65 |      "favicon_url":"http://www.bbc.co.uk/favicon.ico",
66 |      "provider_url":"http://www.bbc.co.uk/",
67 |      "provider_display":"www.bbc.co.uk",
68 |      "safe":"true",
69 |      "html":"",
70 |      "thumbnail_url":"http://news.bbcimg.co.uk/media/images/54490000/jpg/_54490706_hackney.jpg"},
71 |     {"type":"video",
72 |      "original_url":"http://www.youtube.com/watch?v=xLWpyRAaybU",
73 |      "url":"http://www.youtube.com/watch?v=xLWpyRAaybU",
74 |      "title":"Taylor Swift - Eminem's \"Lose Yourself\" and Uncle Kracker's \"Smile\" Grand Rapids, MI",
75 |      "description":"Taylor rapping Lose Yourself by Eminem then singing \"Smile\" by Uncle Kracker in Grand Rapids Michigan 7-28-11 at Van Andel Arena. All credit to the songs in the video go to the artists, no copyright intended.",
76 |      "favicon_url":"http://s.ytimg.com/yt/favicon-vflZlzSbU.ico",
77 |      "provider_url":"http://www.youtube.com/",
78 |      "provider_display":"www.youtube.com",
79 |      "safe":"true",
80 |      "html":"<object width=\"500\" height=\"306\"><param name=\"wmode\" value=\"opaque\"></param><param name=\"movie\" value=\"http://www.youtube.com/v/xLWpyRAaybU?autoplay=1&version=3\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/xLWpyRAaybU?autoplay=1&version=3\" type=\"application/x-shockwave-flash\" width=\"500\" height=\"306\" allowscriptaccess=\"always\" allowfullscreen=\"true\" wmode=\"opaque\"></embed></object>",
81 |      "thumbnail_url":"http://i1.ytimg.com/vi/xLWpyRAaybU/hqdefault.jpg"}
82 | ]
83 | 


--------------------------------------------------------------------------------
/js/ext-core.js:
--------------------------------------------------------------------------------
1 | /*
2 |  * Ext Core Library 3.0
3 |  * http://extjs.com/
4 |  * Copyright(c) 2006-2009, Ext JS, LLC.
5 |  * 
6 |  * MIT Licensed - http://extjs.com/license/mit.txt
7 |  */
8 | window.undefined=window.undefined;Ext={version:"3.1.0"};Ext.apply=function(d,e,b){if(b){Ext.apply(d,b)}if(d&&e&&typeof e=="object"){for(var a in e){d[a]=e[a]}}return d};(function(){var h=0,t=Object.prototype.toString,u=navigator.userAgent.toLowerCase(),z=function(e){return e.test(u)},j=document,m=j.compatMode=="CSS1Compat",B=z(/opera/),i=z(/chrome/),v=z(/webkit/),y=!i&&z(/safari/),g=y&&z(/applewebkit\/4/),b=y&&z(/version\/3/),C=y&&z(/version\/4/),s=!B&&z(/msie/),q=s&&z(/msie 7/),p=s&&z(/msie 8/),r=s&&!q&&!p,o=!v&&z(/gecko/),d=o&&z(/rv:1\.8/),a=o&&z(/rv:1\.9/),w=s&&!m,A=z(/windows|win32/),l=z(/macintosh|mac os x/),k=z(/adobeair/),n=z(/linux/),c=/^https/i.test(window.location.protocol);if(r){try{j.execCommand("BackgroundImageCache",false,true)}catch(x){}}Ext.apply(Ext,{SSL_SECURE_URL:c&&s?'javascript:""':"about:blank",isStrict:m,isSecure:c,isReady:false,enableGarbageCollector:true,enableListenerCollection:false,enableNestedListenerRemoval:false,USE_NATIVE_JSON:false,applyIf:function(D,E){if(D){for(var e in E){if(!Ext.isDefined(D[e])){D[e]=E[e]}}}return D},id:function(e,D){return(e=Ext.getDom(e)||{}).id=e.id||(D||"ext-gen")+(++h)},extend:function(){var D=function(F){for(var E in F){this[E]=F[E]}};var e=Object.prototype.constructor;return function(K,H,J){if(Ext.isObject(H)){J=H;H=K;K=J.constructor!=e?J.constructor:function(){H.apply(this,arguments)}}var G=function(){},I,E=H.prototype;G.prototype=E;I=K.prototype=new G();I.constructor=K;K.superclass=E;if(E.constructor==e){E.constructor=H}K.override=function(F){Ext.override(K,F)};I.superclass=I.supr=(function(){return E});I.override=D;Ext.override(K,J);K.extend=function(F){return Ext.extend(K,F)};return K}}(),override:function(e,E){if(E){var D=e.prototype;Ext.apply(D,E);if(Ext.isIE&&E.hasOwnProperty("toString")){D.toString=E.toString}}},namespace:function(){var D,e;Ext.each(arguments,function(E){e=E.split(".");D=window[e[0]]=window[e[0]]||{};Ext.each(e.slice(1),function(F){D=D[F]=D[F]||{}})});return D},urlEncode:function(H,G){var E,D=[],F=encodeURIComponent;Ext.iterate(H,function(e,I){E=Ext.isEmpty(I);Ext.each(E?e:I,function(J){D.push("&",F(e),"=",(!Ext.isEmpty(J)&&(J!=e||!E))?(Ext.isDate(J)?Ext.encode(J).replace(/"/g,""):F(J)):"")})});if(!G){D.shift();G=""}return G+D.join("")},urlDecode:function(E,D){if(Ext.isEmpty(E)){return{}}var H={},G=E.split("&"),I=decodeURIComponent,e,F;Ext.each(G,function(J){J=J.split("=");e=I(J[0]);F=I(J[1]);H[e]=D||!H[e]?F:[].concat(H[e]).concat(F)});return H},urlAppend:function(e,D){if(!Ext.isEmpty(D)){return e+(e.indexOf("?")===-1?"?":"&")+D}return e},toArray:function(){return s?function(E,H,F,G){G=[];for(var D=0,e=E.length;D<e;D++){G.push(E[D])}return G.slice(H||0,F||G.length)}:function(e,E,D){return Array.prototype.slice.call(e,E||0,D||e.length)}}(),isIterable:function(e){if(Ext.isArray(e)||e.callee){return true}if(/NodeList|HTMLCollection/.test(t.call(e))){return true}return((typeof e.nextNode!="undefined"||e.item)&&Ext.isNumber(e.length))},each:function(G,F,E){if(Ext.isEmpty(G,true)){return}if(!Ext.isIterable(G)||Ext.isPrimitive(G)){G=[G]}for(var D=0,e=G.length;D<e;D++){if(F.call(E||G[D],G[D],D,G)===false){return D}}},iterate:function(E,D,e){if(Ext.isEmpty(E)){return}if(Ext.isIterable(E)){Ext.each(E,D,e);return}else{if(Ext.isObject(E)){for(var F in E){if(E.hasOwnProperty(F)){if(D.call(e||E,F,E[F],E)===false){return}}}}}},getDom:function(e){if(!e||!j){return null}return e.dom?e.dom:(Ext.isString(e)?j.getElementById(e):e)},getBody:function(){return Ext.get(j.body||j.documentElement)},removeNode:s&&!p?function(){var e;return function(D){if(D&&D.tagName!="BODY"){(Ext.enableNestedListenerRemoval)?Ext.EventManager.purgeElement(D,true):Ext.EventManager.removeAll(D);e=e||j.createElement("div");e.appendChild(D);e.innerHTML="";delete Ext.elCache[D.id]}}}():function(e){if(e&&e.parentNode&&e.tagName!="BODY"){(Ext.enableNestedListenerRemoval)?Ext.EventManager.purgeElement(e,true):Ext.EventManager.removeAll(e);e.parentNode.removeChild(e);delete Ext.elCache[e.id]}},isEmpty:function(D,e){return D===null||D===undefined||((Ext.isArray(D)&&!D.length))||(!e?D==="":false)},isArray:function(e){return t.apply(e)==="[object Array]"},isDate:function(e){return t.apply(e)==="[object Date]"},isObject:function(e){return !!e&&Object.prototype.toString.call(e)==="[object Object]"},isPrimitive:function(e){return Ext.isString(e)||Ext.isNumber(e)||Ext.isBoolean(e)},isFunction:function(e){return t.apply(e)==="[object Function]"},isNumber:function(e){return typeof e==="number"&&isFinite(e)},isString:function(e){return typeof e==="string"},isBoolean:function(e){return typeof e==="boolean"},isElement:function(e){return !!e&&e.tagName},isDefined:function(e){return typeof e!=="undefined"},isOpera:B,isWebKit:v,isChrome:i,isSafari:y,isSafari3:b,isSafari4:C,isSafari2:g,isIE:s,isIE6:r,isIE7:q,isIE8:p,isGecko:o,isGecko2:d,isGecko3:a,isBorderBox:w,isLinux:n,isWindows:A,isMac:l,isAir:k});Ext.ns=Ext.namespace})();Ext.ns("Ext.util","Ext.lib","Ext.data");Ext.elCache={};Ext.apply(Function.prototype,{createInterceptor:function(b,a){var c=this;return !Ext.isFunction(b)?this:function(){var e=this,d=arguments;b.target=e;b.method=c;return(b.apply(a||e||window,d)!==false)?c.apply(e||window,d):null}},createCallback:function(){var a=arguments,b=this;return function(){return b.apply(window,a)}},createDelegate:function(c,b,a){var d=this;return function(){var g=b||arguments;if(a===true){g=Array.prototype.slice.call(arguments,0);g=g.concat(b)}else{if(Ext.isNumber(a)){g=Array.prototype.slice.call(arguments,0);var e=[a,0].concat(b);Array.prototype.splice.apply(g,e)}}return d.apply(c||window,g)}},defer:function(c,e,b,a){var d=this.createDelegate(e,b,a);if(c>0){return setTimeout(d,c)}d();return 0}});Ext.applyIf(String,{format:function(b){var a=Ext.toArray(arguments,1);return b.replace(/\{(\d+)\}/g,function(c,d){return a[d]})}});Ext.applyIf(Array.prototype,{indexOf:function(b,c){var a=this.length;c=c||0;c+=(c<0)?a:0;for(;c<a;++c){if(this[c]===b){return c}}return -1},remove:function(b){var a=this.indexOf(b);if(a!=-1){this.splice(a,1)}return this}});Ext.util.TaskRunner=function(e){e=e||10;var g=[],a=[],b=0,h=false,d=function(){h=false;clearInterval(b);b=0},i=function(){if(!h){h=true;b=setInterval(j,e)}},c=function(k){a.push(k);if(k.onStop){k.onStop.apply(k.scope||k)}},j=function(){var m=a.length,o=new Date().getTime();if(m>0){for(var q=0;q<m;q++){g.remove(a[q])}a=[];if(g.length<1){d();return}}for(var q=0,p,l,n,k=g.length;q<k;++q){p=g[q];l=o-p.taskRunTime;if(p.interval<=l){n=p.run.apply(p.scope||p,p.args||[++p.taskRunCount]);p.taskRunTime=o;if(n===false||p.taskRunCount===p.repeat){c(p);return}}if(p.duration&&p.duration<=(o-p.taskStartTime)){c(p)}}};this.start=function(k){g.push(k);k.taskStartTime=new Date().getTime();k.taskRunTime=0;k.taskRunCount=0;i();return k};this.stop=function(k){c(k);return k};this.stopAll=function(){d();for(var l=0,k=g.length;l<k;l++){if(g[l].onStop){g[l].onStop()}}g=[];a=[]}};Ext.TaskMgr=new Ext.util.TaskRunner();Ext.util.DelayedTask=function(d,c,a){var e=this,g,b=function(){clearInterval(g);g=null;d.apply(c,a||[])};e.delay=function(i,k,j,h){e.cancel();d=k||d;c=j||c;a=h||a;g=setInterval(b,i)};e.cancel=function(){if(g){clearInterval(g);g=null}}};(function(){var b;function c(d){if(!b){b=new Ext.Element.Flyweight()}b.dom=d;return b}(function(){var h=document,e=h.compatMode=="CSS1Compat",g=Math.max,d=Math.round,i=parseInt;Ext.lib.Dom={isAncestor:function(k,l){var j=false;k=Ext.getDom(k);l=Ext.getDom(l);if(k&&l){if(k.contains){return k.contains(l)}else{if(k.compareDocumentPosition){return !!(k.compareDocumentPosition(l)&16)}else{while(l=l.parentNode){j=l==k||j}}}}return j},getViewWidth:function(j){return j?this.getDocumentWidth():this.getViewportWidth()},getViewHeight:function(j){return j?this.getDocumentHeight():this.getViewportHeight()},getDocumentHeight:function(){return g(!e?h.body.scrollHeight:h.documentElement.scrollHeight,this.getViewportHeight())},getDocumentWidth:function(){return g(!e?h.body.scrollWidth:h.documentElement.scrollWidth,this.getViewportWidth())},getViewportHeight:function(){return Ext.isIE?(Ext.isStrict?h.documentElement.clientHeight:h.body.clientHeight):self.innerHeight},getViewportWidth:function(){return !Ext.isStrict&&!Ext.isOpera?h.body.clientWidth:Ext.isIE?h.documentElement.clientWidth:self.innerWidth},getY:function(j){return this.getXY(j)[1]},getX:function(j){return this.getXY(j)[0]},getXY:function(l){var k,r,t,w,m,n,v=0,s=0,u,j,o=(h.body||h.documentElement),q=[0,0];l=Ext.getDom(l);if(l!=o){if(l.getBoundingClientRect){t=l.getBoundingClientRect();u=c(document).getScroll();q=[d(t.left+u.left),d(t.top+u.top)]}else{k=l;j=c(l).isStyle("position","absolute");while(k){r=c(k);v+=k.offsetLeft;s+=k.offsetTop;j=j||r.isStyle("position","absolute");if(Ext.isGecko){s+=w=i(r.getStyle("borderTopWidth"),10)||0;v+=m=i(r.getStyle("borderLeftWidth"),10)||0;if(k!=l&&!r.isStyle("overflow","visible")){v+=m;s+=w}}k=k.offsetParent}if(Ext.isSafari&&j){v-=o.offsetLeft;s-=o.offsetTop}if(Ext.isGecko&&!j){n=c(o);v+=i(n.getStyle("borderLeftWidth"),10)||0;s+=i(n.getStyle("borderTopWidth"),10)||0}k=l.parentNode;while(k&&k!=o){if(!Ext.isOpera||(k.tagName!="TR"&&!c(k).isStyle("display","inline"))){v-=k.scrollLeft;s-=k.scrollTop}k=k.parentNode}q=[v,s]}}return q},setXY:function(k,l){(k=Ext.fly(k,"_setXY")).position();var m=k.translatePoints(l),j=k.dom.style,n;for(n in m){if(!isNaN(m[n])){j[n]=m[n]+"px"}}},setX:function(k,j){this.setXY(k,[j,false])},setY:function(j,k){this.setXY(j,[false,k])}}})();Ext.lib.Event=function(){var x=false,h={},B=0,q=[],d,D=false,l=window,H=document,m=200,t=20,C=0,s=0,j=1,n=2,u=2,y=3,v="scrollLeft",r="scrollTop",g="unload",A="mouseover",G="mouseout",e=function(){var I;if(l.addEventListener){I=function(M,K,L,J){if(K=="mouseenter"){L=L.createInterceptor(p);M.addEventListener(A,L,(J))}else{if(K=="mouseleave"){L=L.createInterceptor(p);M.addEventListener(G,L,(J))}else{M.addEventListener(K,L,(J))}}return L}}else{if(l.attachEvent){I=function(M,K,L,J){M.attachEvent("on"+K,L);return L}}else{I=function(){}}}return I}(),i=function(){var I;if(l.removeEventListener){I=function(M,K,L,J){if(K=="mouseenter"){K=A}else{if(K=="mouseleave"){K=G}}M.removeEventListener(K,L,(J))}}else{if(l.detachEvent){I=function(L,J,K){L.detachEvent("on"+J,K)}}else{I=function(){}}}return I}();function p(I){return !w(I.currentTarget,z.getRelatedTarget(I))}function w(I,J){if(I&&I.firstChild){while(J){if(J===I){return true}J=J.parentNode;if(J&&(J.nodeType!=1)){J=null}}}return false}function E(){var K=false,O=[],M,L,I,J,N=!x||(B>0);if(!D){D=true;for(L=0,I=q.length;L<I;L++){J=q[L];if(J&&(M=H.getElementById(J.id))){if(!J.checkReady||x||M.nextSibling||(H&&H.body)){M=J.override?(J.override===true?J.obj:J.override):M;J.fn.call(M,J.obj);q.remove(J)}else{O.push(J)}}}B=(O.length===0)?0:B-1;if(N){o()}else{clearInterval(d);d=null}K=!(D=false)}return K}function o(){if(!d){var I=function(){E()};d=setInterval(I,t)}}function F(){var I=H.documentElement,J=H.body;if(I&&(I[r]||I[v])){return[I[v],I[r]]}else{if(J){return[J[v],J[r]]}else{return[0,0]}}}function k(I,J){I=I.browserEvent||I;var K=I["page"+J];if(!K&&K!==0){K=I["client"+J]||0;if(Ext.isIE){K+=F()[J=="X"?0:1]}}return K}var z={extAdapter:true,onAvailable:function(K,I,L,J){q.push({id:K,fn:I,obj:L,override:J,checkReady:false});B=m;o()},addListener:function(K,I,J){K=Ext.getDom(K);if(K&&J){if(I==g){if(h[K.id]===undefined){h[K.id]=[]}h[K.id].push([I,J]);return J}return e(K,I,J,false)}return false},removeListener:function(O,K,N){O=Ext.getDom(O);var M,J,I,L;if(O&&N){if(K==g){if((L=h[O.id])!==undefined){for(M=0,J=L.length;M<J;M++){if((I=L[M])&&I[s]==K&&I[j]==N){h[id].splice(M,1)}}}return}i(O,K,N,false)}},getTarget:function(I){I=I.browserEvent||I;return this.resolveTextNode(I.target||I.srcElement)},resolveTextNode:Ext.isGecko?function(J){if(!J){return}var I=HTMLElement.prototype.toString.call(J);if(I=="[xpconnect wrapped native prototype]"||I=="[object XULElement]"){return}return J.nodeType==3?J.parentNode:J}:function(I){return I&&I.nodeType==3?I.parentNode:I},getRelatedTarget:function(I){I=I.browserEvent||I;return this.resolveTextNode(I.relatedTarget||(I.type==G?I.toElement:I.type==A?I.fromElement:null))},getPageX:function(I){return k(I,"X")},getPageY:function(I){return k(I,"Y")},getXY:function(I){return[this.getPageX(I),this.getPageY(I)]},stopEvent:function(I){this.stopPropagation(I);this.preventDefault(I)},stopPropagation:function(I){I=I.browserEvent||I;if(I.stopPropagation){I.stopPropagation()}else{I.cancelBubble=true}},preventDefault:function(I){I=I.browserEvent||I;if(I.preventDefault){I.preventDefault()}else{I.returnValue=false}},getEvent:function(I){I=I||l.event;if(!I){var J=this.getEvent.caller;while(J){I=J.arguments[0];if(I&&Event==I.constructor){break}J=J.caller}}return I},getCharCode:function(I){I=I.browserEvent||I;return I.charCode||I.keyCode||0},getListeners:function(J,I){Ext.EventManager.getListeners(J,I)},purgeElement:function(J,K,I){Ext.EventManager.purgeElement(J,K,I)},_load:function(J){x=true;var I=Ext.lib.Event;if(Ext.isIE&&J!==true){i(l,"load",arguments.callee)}},_unload:function(P){var J=Ext.lib.Event,M,L,K,S,Q,I,O,N,T;for(I in h){Q=h[I];for(M=0,O=Q.length;M<O;M++){S=Q[M];if(S){try{T=S[y]?(S[y]===true?S[u]:S[y]):l;S[j].call(T,J.getEvent(P),S[u])}catch(R){}}}}h=null;Ext.EventManager._unload();i(l,g,J._unload)}};z.on=z.addListener;z.un=z.removeListener;if(H&&H.body){z._load(true)}else{e(l,"load",z._load)}e(l,g,z._unload);E();return z}();Ext.lib.Ajax=function(){var h=["MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"],d="Content-Type";function i(t){var s=t.conn,u;function r(v,w){for(u in w){if(w.hasOwnProperty(u)){v.setRequestHeader(u,w[u])}}}if(l.defaultHeaders){r(s,l.defaultHeaders)}if(l.headers){r(s,l.headers);delete l.headers}}function e(u,t,s,r){return{tId:u,status:s?-1:0,statusText:s?"transaction aborted":"communication failure",isAbort:s,isTimeout:r,argument:t}}function k(r,s){(l.headers=l.headers||{})[r]=s}function p(A,y){var u={},w,x=A.conn,r,v;try{w=A.conn.getAllResponseHeaders();Ext.each(w.replace(/\r\n/g,"\n").split("\n"),function(s){r=s.indexOf(":");if(r>=0){v=s.substr(0,r).toLowerCase();if(s.charAt(r+1)==" "){++r}u[v]=s.substr(r+1)}})}catch(z){}return{tId:A.tId,status:x.status,statusText:x.statusText,getResponseHeader:function(s){return u[s.toLowerCase()]},getAllResponseHeaders:function(){return w},responseText:x.responseText,responseXML:x.responseXML,argument:y}}function o(r){r.conn=null;r=null}function g(w,x,s,r){if(!x){o(w);return}var u,t;try{if(w.conn.status!==undefined&&w.conn.status!=0){u=w.conn.status}else{u=13030}}catch(v){u=13030}if((u>=200&&u<300)||(Ext.isIE&&u==1223)){t=p(w,x.argument);if(x.success){if(!x.scope){x.success(t)}else{x.success.apply(x.scope,[t])}}}else{switch(u){case 12002:case 12029:case 12030:case 12031:case 12152:case 13030:t=e(w.tId,x.argument,(s?s:false),r);if(x.failure){if(!x.scope){x.failure(t)}else{x.failure.apply(x.scope,[t])}}break;default:t=p(w,x.argument);if(x.failure){if(!x.scope){x.failure(t)}else{x.failure.apply(x.scope,[t])}}}}o(w);t=null}function n(t,w){w=w||{};var r=t.conn,v=t.tId,s=l.poll,u=w.timeout||null;if(u){l.timeout[v]=setTimeout(function(){l.abort(t,w,true)},u)}s[v]=setInterval(function(){if(r&&r.readyState==4){clearInterval(s[v]);s[v]=null;if(u){clearTimeout(l.timeout[v]);l.timeout[v]=null}g(t,w)}},l.pollInterval)}function j(v,s,u,r){var t=m()||null;if(t){t.conn.open(v,s,true);if(l.useDefaultXhrHeader){k("X-Requested-With",l.defaultXhrHeader)}if(r&&l.useDefaultHeader&&(!l.headers||!l.headers[d])){k(d,l.defaultPostHeader)}if(l.defaultHeaders||l.headers){i(t)}n(t,u);t.conn.send(r||null)}return t}function m(){var s;try{if(s=q(l.transactionId)){l.transactionId++}}catch(r){}finally{return s}}function q(u){var r;try{r=new XMLHttpRequest()}catch(t){for(var s=0;s<h.length;++s){try{r=new ActiveXObject(h[s]);break}catch(t){}}}finally{return{conn:r,tId:u}}}var l={request:function(r,t,u,v,z){if(z){var w=this,s=z.xmlData,x=z.jsonData,y;Ext.applyIf(w,z);if(s||x){y=w.headers;if(!y||!y[d]){k(d,s?"text/xml":"application/json")}v=s||(!Ext.isPrimitive(x)?Ext.encode(x):x)}}return j(r||z.method||"POST",t,u,v)},serializeForm:function(s){var t=s.elements||(document.forms[s]||Ext.getDom(s)).elements,z=false,y=encodeURIComponent,w,A,r,u,v="",x;Ext.each(t,function(B){r=B.name;x=B.type;if(!B.disabled&&r){if(/select-(one|multiple)/i.test(x)){Ext.each(B.options,function(C){if(C.selected){v+=String.format("{0}={1}&",y(r),y((C.hasAttribute?C.hasAttribute("value"):C.getAttribute("value")!==null)?C.value:C.text))}})}else{if(!/file|undefined|reset|button/i.test(x)){if(!(/radio|checkbox/i.test(x)&&!B.checked)&&!(x=="submit"&&z)){v+=y(r)+"="+y(B.value)+"&";z=/submit/i.test(x)}}}}});return v.substr(0,v.length-1)},useDefaultHeader:true,defaultPostHeader:"application/x-www-form-urlencoded; charset=UTF-8",useDefaultXhrHeader:true,defaultXhrHeader:"XMLHttpRequest",poll:{},timeout:{},pollInterval:50,transactionId:0,abort:function(u,w,r){var t=this,v=u.tId,s=false;if(t.isCallInProgress(u)){u.conn.abort();clearInterval(t.poll[v]);t.poll[v]=null;clearTimeout(l.timeout[v]);t.timeout[v]=null;g(u,w,(s=true),r)}return s},isCallInProgress:function(r){return r.conn&&!{0:true,4:true}[r.conn.readyState]}};return l}();(function(){var h=Ext.lib,j=/width|height|opacity|padding/i,g=/^((width|height)|(top|left))$/,d=/width|height|top$|bottom$|left$|right$/i,i=/\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i,k=function(l){return typeof l!=="undefined"},e=function(){return new Date()};h.Anim={motion:function(o,m,p,q,l,n){return this.run(o,m,p,q,l,n,Ext.lib.Motion)},run:function(p,m,r,s,l,o,n){n=n||Ext.lib.AnimBase;if(typeof s=="string"){s=Ext.lib.Easing[s]}var q=new n(p,m,r,s);q.animateX(function(){if(Ext.isFunction(l)){l.call(o)}});return q}};h.AnimBase=function(m,l,n,o){if(m){this.init(m,l,n,o)}};h.AnimBase.prototype={doMethod:function(l,o,m){var n=this;return n.method(n.curFrame,o,m-o,n.totalFrames)},setAttr:function(l,n,m){if(j.test(l)&&n<0){n=0}Ext.fly(this.el,"_anim").setStyle(l,n+m)},getAttr:function(l){var n=Ext.fly(this.el),o=n.getStyle(l),m=g.exec(l)||[];if(o!=="auto"&&!i.test(o)){return parseFloat(o)}return(!!(m[2])||(n.getStyle("position")=="absolute"&&!!(m[3])))?n.dom["offset"+m[0].charAt(0).toUpperCase()+m[0].substr(1)]:0},getDefaultUnit:function(l){return d.test(l)?"px":""},animateX:function(o,l){var m=this,n=function(){m.onComplete.removeListener(n);if(Ext.isFunction(o)){o.call(l||m,m)}};m.onComplete.addListener(n,m);m.animate()},setRunAttr:function(q){var s=this,t=this.attributes[q],u=t.to,r=t.by,v=t.from,w=t.unit,m=(this.runAttrs[q]={}),n;if(!k(u)&&!k(r)){return false}var l=k(v)?v:s.getAttr(q);if(k(u)){n=u}else{if(k(r)){if(Ext.isArray(l)){n=[];for(var o=0,p=l.length;o<p;o++){n[o]=l[o]+r[o]}}else{n=l+r}}}Ext.apply(m,{start:l,end:n,unit:k(w)?w:s.getDefaultUnit(q)})},init:function(m,q,p,l){var s=this,o=0,t=h.AnimMgr;Ext.apply(s,{isAnimated:false,startTime:null,el:Ext.getDom(m),attributes:q||{},duration:p||1,method:l||h.Easing.easeNone,useSec:true,curFrame:0,totalFrames:t.fps,runAttrs:{},animate:function(){var v=this,w=v.duration;if(v.isAnimated){return false}v.curFrame=0;v.totalFrames=v.useSec?Math.ceil(t.fps*w):w;t.registerElement(v)},stop:function(v){var w=this;if(v){w.curFrame=w.totalFrames;w._onTween.fire()}t.stop(w)}});var u=function(){var w=this,v;w.onStart.fire();w.runAttrs={};for(v in this.attributes){this.setRunAttr(v)}w.isAnimated=true;w.startTime=e();o=0};var r=function(){var w=this;w.onTween.fire({duration:e()-w.startTime,curFrame:w.curFrame});var x=w.runAttrs;for(var v in x){this.setAttr(v,w.doMethod(v,x[v].start,x[v].end),x[v].unit)}++o};var n=function(){var v=this,x=(e()-v.startTime)/1000,w={duration:x,frames:o,fps:o/x};v.isAnimated=false;o=0;v.onComplete.fire(w)};s.onStart=new Ext.util.Event(s);s.onTween=new Ext.util.Event(s);s.onComplete=new Ext.util.Event(s);(s._onStart=new Ext.util.Event(s)).addListener(u);(s._onTween=new Ext.util.Event(s)).addListener(r);(s._onComplete=new Ext.util.Event(s)).addListener(n)}};Ext.lib.AnimMgr=new function(){var p=this,n=null,m=[],l=0;Ext.apply(p,{fps:1000,delay:1,registerElement:function(r){m.push(r);++l;r._onStart.fire();p.start()},unRegister:function(s,r){s._onComplete.fire();r=r||q(s);if(r!=-1){m.splice(r,1)}if(--l<=0){p.stop()}},start:function(){if(n===null){n=setInterval(p.run,p.delay)}},stop:function(t){if(!t){clearInterval(n);for(var s=0,r=m.length;s<r;++s){if(m[0].isAnimated){p.unRegister(m[0],0)}}m=[];n=null;l=0}else{p.unRegister(t)}},run:function(){var u,t,r,s;for(t=0,r=m.length;t<r;t++){s=m[t];if(s&&s.isAnimated){u=s.totalFrames;if(s.curFrame<u||u===null){++s.curFrame;if(s.useSec){o(s)}s._onTween.fire()}else{p.stop(s)}}}}});var q=function(t){var s,r;for(s=0,r=m.length;s<r;s++){if(m[s]===t){return s}}return -1};var o=function(s){var w=s.totalFrames,v=s.curFrame,u=s.duration,t=(v*u*1000/w),r=(e()-s.startTime),x=0;if(r<u*1000){x=Math.round((r/t-1)*v)}else{x=w-(v+1)}if(x>0&&isFinite(x)){if(s.curFrame+x>=w){x=w-(v+1)}s.curFrame+=x}}};h.Bezier=new function(){this.getPosition=function(q,p){var s=q.length,o=[],r=1-p,m,l;for(m=0;m<s;++m){o[m]=[q[m][0],q[m][1]]}for(l=1;l<s;++l){for(m=0;m<s-l;++m){o[m][0]=r*o[m][0]+p*o[parseInt(m+1,10)][0];o[m][1]=r*o[m][1]+p*o[parseInt(m+1,10)][1]}}return[o[0][0],o[0][1]]}};h.Easing={easeNone:function(m,l,o,n){return o*m/n+l},easeIn:function(m,l,o,n){return o*(m/=n)*m+l},easeOut:function(m,l,o,n){return -o*(m/=n)*(m-2)+l}};(function(){h.Motion=function(q,p,r,s){if(q){h.Motion.superclass.constructor.call(this,q,p,r,s)}};Ext.extend(h.Motion,Ext.lib.AnimBase);var o=h.Motion.superclass,n=h.Motion.prototype,m=/^points$/i;Ext.apply(h.Motion.prototype,{setAttr:function(p,t,s){var r=this,q=o.setAttr;if(m.test(p)){s=s||"px";q.call(r,"left",t[0],s);q.call(r,"top",t[1],s)}else{q.call(r,p,t,s)}},getAttr:function(p){var r=this,q=o.getAttr;return m.test(p)?[q.call(r,"left"),q.call(r,"top")]:q.call(r,p)},doMethod:function(p,s,q){var r=this;return m.test(p)?h.Bezier.getPosition(r.runAttrs[p],r.method(r.curFrame,0,100,r.totalFrames)/100):o.doMethod.call(r,p,s,q)},setRunAttr:function(w){if(m.test(w)){var y=this,r=this.el,B=this.attributes.points,u=B.control||[],z=B.from,A=B.to,x=B.by,C=h.Dom,q,t,s,v,p;if(u.length>0&&!Ext.isArray(u[0])){u=[u]}else{}Ext.fly(r,"_anim").position();C.setXY(r,k(z)?z:C.getXY(r));q=y.getAttr("points");if(k(A)){s=l.call(y,A,q);for(t=0,v=u.length;t<v;++t){u[t]=l.call(y,u[t],q)}}else{if(k(x)){s=[q[0]+x[0],q[1]+x[1]];for(t=0,v=u.length;t<v;++t){u[t]=[q[0]+u[t][0],q[1]+u[t][1]]}}}p=this.runAttrs[w]=[q];if(u.length>0){p=p.concat(u)}p[p.length]=s}else{o.setRunAttr.call(this,w)}}});var l=function(p,r){var q=h.Dom.getXY(this.el);return[p[0]-q[0]+r[0],p[1]-q[1]+r[1]]}})()})();(function(){var d=Math.abs,j=Math.PI,i=Math.asin,h=Math.pow,e=Math.sin,g=Ext.lib;Ext.apply(g.Easing,{easeBoth:function(l,k,n,m){return((l/=m/2)<1)?n/2*l*l+k:-n/2*((--l)*(l-2)-1)+k},easeInStrong:function(l,k,n,m){return n*(l/=m)*l*l*l+k},easeOutStrong:function(l,k,n,m){return -n*((l=l/m-1)*l*l*l-1)+k},easeBothStrong:function(l,k,n,m){return((l/=m/2)<1)?n/2*l*l*l*l+k:-n/2*((l-=2)*l*l*l-2)+k},elasticIn:function(m,k,r,q,l,o){if(m==0||(m/=q)==1){return m==0?k:k+r}o=o||(q*0.3);var n;if(l>=d(r)){n=o/(2*j)*i(r/l)}else{l=r;n=o/4}return -(l*h(2,10*(m-=1))*e((m*q-n)*(2*j)/o))+k},elasticOut:function(m,k,r,q,l,o){if(m==0||(m/=q)==1){return m==0?k:k+r}o=o||(q*0.3);var n;if(l>=d(r)){n=o/(2*j)*i(r/l)}else{l=r;n=o/4}return l*h(2,-10*m)*e((m*q-n)*(2*j)/o)+r+k},elasticBoth:function(m,k,r,q,l,o){if(m==0||(m/=q/2)==2){return m==0?k:k+r}o=o||(q*(0.3*1.5));var n;if(l>=d(r)){n=o/(2*j)*i(r/l)}else{l=r;n=o/4}return m<1?-0.5*(l*h(2,10*(m-=1))*e((m*q-n)*(2*j)/o))+k:l*h(2,-10*(m-=1))*e((m*q-n)*(2*j)/o)*0.5+r+k},backIn:function(l,k,o,n,m){m=m||1.70158;return o*(l/=n)*l*((m+1)*l-m)+k},backOut:function(l,k,o,n,m){if(!m){m=1.70158}return o*((l=l/n-1)*l*((m+1)*l+m)+1)+k},backBoth:function(l,k,o,n,m){m=m||1.70158;return((l/=n/2)<1)?o/2*(l*l*(((m*=(1.525))+1)*l-m))+k:o/2*((l-=2)*l*(((m*=(1.525))+1)*l+m)+2)+k},bounceIn:function(l,k,n,m){return n-g.Easing.bounceOut(m-l,0,n,m)+k},bounceOut:function(l,k,n,m){if((l/=m)<(1/2.75)){return n*(7.5625*l*l)+k}else{if(l<(2/2.75)){return n*(7.5625*(l-=(1.5/2.75))*l+0.75)+k}else{if(l<(2.5/2.75)){return n*(7.5625*(l-=(2.25/2.75))*l+0.9375)+k}}}return n*(7.5625*(l-=(2.625/2.75))*l+0.984375)+k},bounceBoth:function(l,k,n,m){return(l<m/2)?g.Easing.bounceIn(l*2,0,n,m)*0.5+k:g.Easing.bounceOut(l*2-m,0,n,m)*0.5+n*0.5+k}})})();(function(){var i=Ext.lib;i.Anim.color=function(q,o,r,s,n,p){return i.Anim.run(q,o,r,s,n,p,i.ColorAnim)};i.ColorAnim=function(o,n,p,q){i.ColorAnim.superclass.constructor.call(this,o,n,p,q)};Ext.extend(i.ColorAnim,i.AnimBase);var k=i.ColorAnim.superclass,j=/color$/i,g=/^transparent|rgba\(0, 0, 0, 0\)$/,m=/^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i,d=/^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,e=/^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i,h=function(n){return typeof n!=="undefined"};function l(o){var q=parseInt,p,n=null,r;if(o.length==3){return o}Ext.each([d,m,e],function(t,s){p=(s%2==0)?16:10;r=t.exec(o);if(r&&r.length==4){n=[q(r[1],p),q(r[2],p),q(r[3],p)];return false}});return n}Ext.apply(i.ColorAnim.prototype,{getAttr:function(n){var p=this,o=p.el,q;if(j.test(n)){while(o&&g.test(q=Ext.fly(o).getStyle(n))){o=o.parentNode;q="fff"}}else{q=k.getAttr.call(p,n)}return q},doMethod:function(t,n,p){var u=this,o,r=Math.floor,q,s,w;if(j.test(t)){o=[];for(q=0,s=n.length;q<s;q++){w=n[q];o[q]=k.doMethod.call(u,t,w,p[q])}o="rgb("+r(o[0])+","+r(o[1])+","+r(o[2])+")"}else{o=k.doMethod.call(u,t,n,p)}return o},setRunAttr:function(s){var u=this,v=u.attributes[s],w=v.to,t=v.by,o;k.setRunAttr.call(u,s);o=u.runAttrs[s];if(j.test(s)){var n=l(o.start),p=l(o.end);if(!h(w)&&h(t)){p=l(t);for(var q=0,r=n.length;q<r;q++){p[q]=n[q]+p[q]}}o.start=n;o.end=p}}})})();(function(){var d=Ext.lib;d.Anim.scroll=function(k,i,l,m,h,j){return d.Anim.run(k,i,l,m,h,j,d.Scroll)};d.Scroll=function(i,h,j,k){if(i){d.Scroll.superclass.constructor.call(this,i,h,j,k)}};Ext.extend(d.Scroll,d.ColorAnim);var g=d.Scroll.superclass,e="scroll";Ext.apply(d.Scroll.prototype,{doMethod:function(h,n,i){var l,k=this,m=k.curFrame,j=k.totalFrames;if(h==e){l=[k.method(m,n[0],i[0]-n[0],j),k.method(m,n[1],i[1]-n[1],j)]}else{l=g.doMethod.call(k,h,n,i)}return l},getAttr:function(h){var i=this;if(h==e){return[i.el.scrollLeft,i.el.scrollTop]}else{return g.getAttr.call(i,h)}},setAttr:function(h,k,j){var i=this;if(h==e){i.el.scrollLeft=k[0];i.el.scrollTop=k[1]}else{g.setAttr.call(i,h,k,j)}}})})();if(Ext.isIE){function a(){var d=Function.prototype;delete d.createSequence;delete d.defer;delete d.createDelegate;delete d.createCallback;delete d.createInterceptor;window.detachEvent("onunload",a)}window.attachEvent("onunload",a)}})();(function(){var i=Ext.util,l=Ext.toArray,k=Ext.each,a=Ext.isObject,h=true,j=false;i.Observable=function(){var m=this,n=m.events;if(m.listeners){m.on(m.listeners);delete m.listeners}m.events=n||{}};i.Observable.prototype={filterOptRe:/^(?:scope|delay|buffer|single)$/,fireEvent:function(){var m=l(arguments),o=m[0].toLowerCase(),p=this,n=h,s=p.events[o],r,t;if(p.eventsSuspended===h){if(r=p.eventQueue){r.push(m)}}else{if(a(s)&&s.bubble){if(s.fire.apply(s,m.slice(1))===j){return j}t=p.getBubbleTarget&&p.getBubbleTarget();if(t&&t.enableBubble){if(!t.events[o]||!Ext.isObject(t.events[o])||!t.events[o].bubble){t.enableBubble(o)}return t.fireEvent.apply(t,m)}}else{if(a(s)){m.shift();n=s.fire.apply(s,m)}}}return n},addListener:function(p,s,u,n){var r=this,q,v,t,m;if(a(p)){n=p;for(q in n){v=n[q];if(!r.filterOptRe.test(q)){r.addListener(q,v.fn||v,v.scope||n.scope,v.fn?v:n)}}}else{p=p.toLowerCase();m=r.events[p]||h;if(Ext.isBoolean(m)){r.events[p]=m=new i.Event(r,p)}m.addListener(s,u,a(n)?n:{})}},removeListener:function(m,o,n){var p=this.events[m.toLowerCase()];if(a(p)){p.removeListener(o,n)}},purgeListeners:function(){var o=this.events,m,n;for(n in o){m=o[n];if(a(m)){m.clearListeners()}}},addEvents:function(q){var p=this;p.events=p.events||{};if(Ext.isString(q)){var m=arguments,n=m.length;while(n--){p.events[m[n]]=p.events[m[n]]||h}}else{Ext.applyIf(p.events,q)}},hasListener:function(m){var n=this.events[m];return a(n)&&n.listeners.length>0},suspendEvents:function(m){this.eventsSuspended=h;if(m&&!this.eventQueue){this.eventQueue=[]}},resumeEvents:function(){var m=this,n=m.eventQueue||[];m.eventsSuspended=j;delete m.eventQueue;k(n,function(o){m.fireEvent.apply(m,o)})}};var e=i.Observable.prototype;e.on=e.addListener;e.un=e.removeListener;i.Observable.releaseCapture=function(m){m.fireEvent=e.fireEvent};function g(n,p,m){return function(){if(p.target==arguments[0]){n.apply(m,l(arguments))}}}function c(p,q,m,n){m.task=new i.DelayedTask();return function(){m.task.delay(q.buffer,p,n,l(arguments))}}function d(o,p,n,m){return function(){p.removeListener(n,m);return o.apply(m,arguments)}}function b(p,q,m,n){return function(){var o=new i.DelayedTask();if(!m.tasks){m.tasks=[]}m.tasks.push(o);o.delay(q.delay||10,p,n,l(arguments))}}i.Event=function(n,m){this.name=m;this.obj=n;this.listeners=[]};i.Event.prototype={addListener:function(p,o,n){var q=this,m;o=o||q.obj;if(!q.isListening(p,o)){m=q.createListener(p,o,n);if(q.firing){q.listeners=q.listeners.slice(0)}q.listeners.push(m)}},createListener:function(q,p,r){r=r||{},p=p||this.obj;var m={fn:q,scope:p,options:r},n=q;if(r.target){n=g(n,r,p)}if(r.delay){n=b(n,r,m,p)}if(r.single){n=d(n,this,q,p)}if(r.buffer){n=c(n,r,m,p)}m.fireFn=n;return m},findListener:function(q,p){var r=this.listeners,n=r.length,m,o;while(n--){m=r[n];if(m){o=m.scope;if(m.fn==q&&(o==p||o==this.obj)){return n}}}return -1},isListening:function(n,m){return this.findListener(n,m)!=-1},removeListener:function(r,q){var p,m,n,s=this,o=j;if((p=s.findListener(r,q))!=-1){if(s.firing){s.listeners=s.listeners.slice(0)}m=s.listeners[p];if(m.task){m.task.cancel();delete m.task}n=m.tasks&&m.tasks.length;if(n){while(n--){m.tasks[n].cancel()}delete m.tasks}s.listeners.splice(p,1);o=h}return o},clearListeners:function(){var o=this,m=o.listeners,n=m.length;while(n--){o.removeListener(m[n].fn,m[n].scope)}},fire:function(){var r=this,o=l(arguments),q=r.listeners,m=q.length,p=0,n;if(m>0){r.firing=h;for(;p<m;p++){n=q[p];if(n&&n.fireFn.apply(n.scope||r.obj||window,o)===j){return(r.firing=j)}}}r.firing=j;return h}}})();Ext.DomHelper=function(){var s=null,j=/^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,l=/^table|tbody|tr|td$/i,p,m="afterbegin",n="afterend",c="beforebegin",o="beforeend",a="<table>",h="</table>",b=a+"<tbody>",i="</tbody>"+h,k=b+"<tr>",r="</tr>"+i;function g(w,y,x,z,v,t){var u=p.insertHtml(z,Ext.getDom(w),q(y));return x?Ext.get(u,true):u}function q(z){var v="",u,y,x,t,A;if(Ext.isString(z)){v=z}else{if(Ext.isArray(z)){for(var w=0;w<z.length;w++){if(z[w]){v+=q(z[w])}}}else{v+="<"+(z.tag=z.tag||"div");Ext.iterate(z,function(B,C){if(!/tag|children|cn|html$/i.test(B)){if(Ext.isObject(C)){v+=" "+B+'="';Ext.iterate(C,function(E,D){v+=E+":"+D+";"});v+='"'}else{v+=" "+({cls:"class",htmlFor:"for"}[B]||B)+'="'+C+'"'}}});if(j.test(z.tag)){v+="/>"}else{v+=">";if((A=z.children||z.cn)){v+=q(A)}else{if(z.html){v+=z.html}}v+="</"+z.tag+">"}}}return v}function e(A,x,w,y){s.innerHTML=[x,w,y].join("");var t=-1,v=s,u;while(++t<A){v=v.firstChild}if(u=v.nextSibling){var z=document.createDocumentFragment();while(v){u=v.nextSibling;z.appendChild(v);v=u}v=z}return v}function d(t,u,w,v){var x,y;s=s||document.createElement("div");if(t=="td"&&(u==m||u==o)||!/td|tr|tbody/i.test(t)&&(u==c||u==n)){return}y=u==c?w:u==n?w.nextSibling:u==m?w.firstChild:null;if(u==c||u==n){w=w.parentNode}if(t=="td"||(t=="tr"&&(u==o||u==m))){x=e(4,k,v,r)}else{if((t=="tbody"&&(u==o||u==m))||(t=="tr"&&(u==c||u==n))){x=e(3,b,v,i)}else{x=e(2,a,v,h)}}w.insertBefore(x,y);return x}p={markup:function(t){return q(t)},applyStyles:function(w,x){if(x){var u=0,t,v;w=Ext.fly(w);if(Ext.isFunction(x)){x=x.call()}if(Ext.isString(x)){x=x.trim().split(/\s*(?::|;)\s*/);for(t=x.length;u<t;){w.setStyle(x[u++],x[u++])}}else{if(Ext.isObject(x)){w.setStyle(x)}}}},insertHtml:function(y,t,z){var x={},v,B,A,C,w,u;y=y.toLowerCase();x[c]=["BeforeBegin","previousSibling"];x[n]=["AfterEnd","nextSibling"];if(t.insertAdjacentHTML){if(l.test(t.tagName)&&(u=d(t.tagName.toLowerCase(),y,t,z))){return u}x[m]=["AfterBegin","firstChild"];x[o]=["BeforeEnd","lastChild"];if((v=x[y])){t.insertAdjacentHTML(v[0],z);return t[v[1]]}}else{A=t.ownerDocument.createRange();B="setStart"+(/end/i.test(y)?"After":"Before");if(x[y]){A[B](t);C=A.createContextualFragment(z);t.parentNode.insertBefore(C,y==c?t:t.nextSibling);return t[(y==c?"previous":"next")+"Sibling"]}else{w=(y==m?"first":"last")+"Child";if(t.firstChild){A[B](t[w]);C=A.createContextualFragment(z);if(y==m){t.insertBefore(C,t.firstChild)}else{t.appendChild(C)}}else{t.innerHTML=z}return t[w]}}throw'Illegal insertion point -> "'+y+'"'},insertBefore:function(t,v,u){return g(t,v,u,c)},insertAfter:function(t,v,u){return g(t,v,u,n,"nextSibling")},insertFirst:function(t,v,u){return g(t,v,u,m,"firstChild")},append:function(t,v,u){return g(t,v,u,o,"",true)},overwrite:function(t,v,u){t=Ext.getDom(t);t.innerHTML=q(v);return u?Ext.get(t.firstChild):t.firstChild},createHtml:q};return p}();Ext.Template=function(d){var e=this,b=arguments,c=[];if(Ext.isArray(d)){d=d.join("")}else{if(b.length>1){Ext.each(b,function(a){if(Ext.isObject(a)){Ext.apply(e,a)}else{c.push(a)}});d=c.join("")}}e.html=d;if(e.compiled){e.compile()}};Ext.Template.prototype={re:/\{([\w-]+)\}/g,applyTemplate:function(a){var b=this;return b.compiled?b.compiled(a):b.html.replace(b.re,function(c,d){return a[d]!==undefined?a[d]:""})},set:function(a,c){var b=this;b.html=a;b.compiled=null;return c?b.compile():b},compile:function(){var me=this,sep=Ext.isGecko?"+":",";function fn(m,name){name="values['"+name+"']";return"'"+sep+"("+name+" == undefined ? '' : "+name+")"+sep+"'"}eval("this.compiled = function(values){ return "+(Ext.isGecko?"'":"['")+me.html.replace(/\\/g,"\\\\").replace(/(\r\n|\n)/g,"\\n").replace(/'/g,"\\'").replace(this.re,fn)+(Ext.isGecko?"';};":"'].join('');};"));return me},insertFirst:function(b,a,c){return this.doInsert("afterBegin",b,a,c)},insertBefore:function(b,a,c){return this.doInsert("beforeBegin",b,a,c)},insertAfter:function(b,a,c){return this.doInsert("afterEnd",b,a,c)},append:function(b,a,c){return this.doInsert("beforeEnd",b,a,c)},doInsert:function(c,e,b,a){e=Ext.getDom(e);var d=Ext.DomHelper.insertHtml(c,e,this.applyTemplate(b));return a?Ext.get(d,true):d},overwrite:function(b,a,c){b=Ext.getDom(b);b.innerHTML=this.applyTemplate(a);return c?Ext.get(b.firstChild,true):b.firstChild}};Ext.Template.prototype.apply=Ext.Template.prototype.applyTemplate;Ext.Template.from=function(b,a){b=Ext.getDom(b);return new Ext.Template(b.value||b.innerHTML,a||"")};Ext.DomQuery=function(){var cache={},simpleCache={},valueCache={},nonSpace=/\S/,trimRe=/^\s+|\s+$/g,tplRe=/\{(\d+)\}/g,modeRe=/^(\s?[\/>+~]\s?|\s|$)/,tagTokenRe=/^(#)?([\w-\*]+)/,nthRe=/(\d*)n\+?(\d*)/,nthRe2=/\D/,isIE=window.ActiveXObject?true:false,key=30803;eval("var batch = 30803;");function child(p,index){var i=0,n=p.firstChild;while(n){if(n.nodeType==1){if(++i==index){return n}}n=n.nextSibling}return null}function next(n){while((n=n.nextSibling)&&n.nodeType!=1){}return n}function prev(n){while((n=n.previousSibling)&&n.nodeType!=1){}return n}function children(d){var n=d.firstChild,ni=-1,nx;while(n){nx=n.nextSibling;if(n.nodeType==3&&!nonSpace.test(n.nodeValue)){d.removeChild(n)}else{n.nodeIndex=++ni}n=nx}return this}function byClassName(c,a,v){if(!v){return c}var r=[],ri=-1,cn;for(var i=0,ci;ci=c[i];i++){if((" "+ci.className+" ").indexOf(v)!=-1){r[++ri]=ci}}return r}function attrValue(n,attr){if(!n.tagName&&typeof n.length!="undefined"){n=n[0]}if(!n){return null}if(attr=="for"){return n.htmlFor}if(attr=="class"||attr=="className"){return n.className}return n.getAttribute(attr)||n[attr]}function getNodes(ns,mode,tagName){var result=[],ri=-1,cs;if(!ns){return result}tagName=tagName||"*";if(typeof ns.getElementsByTagName!="undefined"){ns=[ns]}if(!mode){for(var i=0,ni;ni=ns[i];i++){cs=ni.getElementsByTagName(tagName);for(var j=0,ci;ci=cs[j];j++){result[++ri]=ci}}}else{if(mode=="/"||mode==">"){var utag=tagName.toUpperCase();for(var i=0,ni,cn;ni=ns[i];i++){cn=ni.childNodes;for(var j=0,cj;cj=cn[j];j++){if(cj.nodeName==utag||cj.nodeName==tagName||tagName=="*"){result[++ri]=cj}}}}else{if(mode=="+"){var utag=tagName.toUpperCase();for(var i=0,n;n=ns[i];i++){while((n=n.nextSibling)&&n.nodeType!=1){}if(n&&(n.nodeName==utag||n.nodeName==tagName||tagName=="*")){result[++ri]=n}}}else{if(mode=="~"){var utag=tagName.toUpperCase();for(var i=0,n;n=ns[i];i++){while((n=n.nextSibling)){if(n.nodeName==utag||n.nodeName==tagName||tagName=="*"){result[++ri]=n}}}}}}}return result}function concat(a,b){if(b.slice){return a.concat(b)}for(var i=0,l=b.length;i<l;i++){a[a.length]=b[i]}return a}function byTag(cs,tagName){if(cs.tagName||cs==document){cs=[cs]}if(!tagName){return cs}var r=[],ri=-1;tagName=tagName.toLowerCase();for(var i=0,ci;ci=cs[i];i++){if(ci.nodeType==1&&ci.tagName.toLowerCase()==tagName){r[++ri]=ci}}return r}function byId(cs,attr,id){if(cs.tagName||cs==document){cs=[cs]}if(!id){return cs}var r=[],ri=-1;for(var i=0,ci;ci=cs[i];i++){if(ci&&ci.id==id){r[++ri]=ci;return r}}return r}function byAttribute(cs,attr,value,op,custom){var r=[],ri=-1,st=custom=="{",f=Ext.DomQuery.operators[op],a,ih;for(var i=0,ci;ci=cs[i];i++){if(ci.nodeType!=1){continue}ih=ci.innerHTML;if(ih!==null&&ih!==undefined){if(st){a=Ext.DomQuery.getStyle(ci,attr)}else{if(attr=="class"||attr=="className"){a=ci.className}else{if(attr=="for"){a=ci.htmlFor}else{if(attr=="href"){a=ci.getAttribute("href",2)}else{a=ci.getAttribute(attr)}}}}}else{a=ci.getAttribute(attr)}if((f&&f(a,value))||(!f&&a)){r[++ri]=ci}}return r}function byPseudo(cs,name,value){return Ext.DomQuery.pseudos[name](cs,value)}function nodupIEXml(cs){var d=++key,r;cs[0].setAttribute("_nodup",d);r=[cs[0]];for(var i=1,len=cs.length;i<len;i++){var c=cs[i];if(!c.getAttribute("_nodup")!=d){c.setAttribute("_nodup",d);r[r.length]=c}}for(var i=0,len=cs.length;i<len;i++){cs[i].removeAttribute("_nodup")}return r}function nodup(cs){if(!cs){return[]}var len=cs.length,c,i,r=cs,cj,ri=-1;if(!len||typeof cs.nodeType!="undefined"||len==1){return cs}if(isIE&&typeof cs[0].selectSingleNode!="undefined"){return nodupIEXml(cs)}var d=++key;cs[0]._nodup=d;for(i=1;c=cs[i];i++){if(c._nodup!=d){c._nodup=d}else{r=[];for(var j=0;j<i;j++){r[++ri]=cs[j]}for(j=i+1;cj=cs[j];j++){if(cj._nodup!=d){cj._nodup=d;r[++ri]=cj}}return r}}return r}function quickDiffIEXml(c1,c2){var d=++key,r=[];for(var i=0,len=c1.length;i<len;i++){c1[i].setAttribute("_qdiff",d)}for(var i=0,len=c2.length;i<len;i++){if(c2[i].getAttribute("_qdiff")!=d){r[r.length]=c2[i]}}for(var i=0,len=c1.length;i<len;i++){c1[i].removeAttribute("_qdiff")}return r}function quickDiff(c1,c2){var len1=c1.length,d=++key,r=[];if(!len1){return c2}if(isIE&&typeof c1[0].selectSingleNode!="undefined"){return quickDiffIEXml(c1,c2)}for(var i=0;i<len1;i++){c1[i]._qdiff=d}for(var i=0,len=c2.length;i<len;i++){if(c2[i]._qdiff!=d){r[r.length]=c2[i]}}return r}function quickId(ns,mode,root,id){if(ns==root){var d=root.ownerDocument||root;return d.getElementById(id)}ns=getNodes(ns,mode,"*");return byId(ns,null,id)}return{getStyle:function(el,name){return Ext.fly(el).getStyle(name)},compile:function(path,type){type=type||"select";var fn=["var f = function(root){\n var mode; ++batch; var n = root || document;\n"],q=path,mode,lq,tk=Ext.DomQuery.matchers,tklen=tk.length,mm,lmode=q.match(modeRe);if(lmode&&lmode[1]){fn[fn.length]='mode="'+lmode[1].replace(trimRe,"")+'";';q=q.replace(lmode[1],"")}while(path.substr(0,1)=="/"){path=path.substr(1)}while(q&&lq!=q){lq=q;var tm=q.match(tagTokenRe);if(type=="select"){if(tm){if(tm[1]=="#"){fn[fn.length]='n = quickId(n, mode, root, "'+tm[2]+'");'}else{fn[fn.length]='n = getNodes(n, mode, "'+tm[2]+'");'}q=q.replace(tm[0],"")}else{if(q.substr(0,1)!="@"){fn[fn.length]='n = getNodes(n, mode, "*");'}}}else{if(tm){if(tm[1]=="#"){fn[fn.length]='n = byId(n, null, "'+tm[2]+'");'}else{fn[fn.length]='n = byTag(n, "'+tm[2]+'");'}q=q.replace(tm[0],"")}}while(!(mm=q.match(modeRe))){var matched=false;for(var j=0;j<tklen;j++){var t=tk[j];var m=q.match(t.re);if(m){fn[fn.length]=t.select.replace(tplRe,function(x,i){return m[i]});q=q.replace(m[0],"");matched=true;break}}if(!matched){throw'Error parsing selector, parsing failed at "'+q+'"'}}if(mm[1]){fn[fn.length]='mode="'+mm[1].replace(trimRe,"")+'";';q=q.replace(mm[1],"")}}fn[fn.length]="return nodup(n);\n}";eval(fn.join(""));return f},select:function(path,root,type){if(!root||root==document){root=document}if(typeof root=="string"){root=document.getElementById(root)}var paths=path.split(","),results=[];for(var i=0,len=paths.length;i<len;i++){var p=paths[i].replace(trimRe,"");if(!cache[p]){cache[p]=Ext.DomQuery.compile(p);if(!cache[p]){throw p+" is not a valid selector"}}var result=cache[p](root);if(result&&result!=document){results=results.concat(result)}}if(paths.length>1){return nodup(results)}return results},selectNode:function(path,root){return Ext.DomQuery.select(path,root)[0]},selectValue:function(path,root,defaultValue){path=path.replace(trimRe,"");if(!valueCache[path]){valueCache[path]=Ext.DomQuery.compile(path,"select")}var n=valueCache[path](root),v;n=n[0]?n[0]:n;if(typeof n.normalize=="function"){n.normalize()}v=(n&&n.firstChild?n.firstChild.nodeValue:null);return((v===null||v===undefined||v==="")?defaultValue:v)},selectNumber:function(path,root,defaultValue){var v=Ext.DomQuery.selectValue(path,root,defaultValue||0);return parseFloat(v)},is:function(el,ss){if(typeof el=="string"){el=document.getElementById(el)}var isArray=Ext.isArray(el),result=Ext.DomQuery.filter(isArray?el:[el],ss);return isArray?(result.length==el.length):(result.length>0)},filter:function(els,ss,nonMatches){ss=ss.replace(trimRe,"");if(!simpleCache[ss]){simpleCache[ss]=Ext.DomQuery.compile(ss,"simple")}var result=simpleCache[ss](els);return nonMatches?quickDiff(result,els):result},matchers:[{re:/^\.([\w-]+)/,select:'n = byClassName(n, null, " {1} ");'},{re:/^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,select:'n = byPseudo(n, "{1}", "{2}");'},{re:/^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,select:'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'},{re:/^#([\w-]+)/,select:'n = byId(n, null, "{1}");'},{re:/^@([\w-]+)/,select:'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'}],operators:{"=":function(a,v){return a==v},"!=":function(a,v){return a!=v},"^=":function(a,v){return a&&a.substr(0,v.length)==v},"$=":function(a,v){return a&&a.substr(a.length-v.length)==v},"*=":function(a,v){return a&&a.indexOf(v)!==-1},"%=":function(a,v){return(a%v)==0},"|=":function(a,v){return a&&(a==v||a.substr(0,v.length+1)==v+"-")},"~=":function(a,v){return a&&(" "+a+" ").indexOf(" "+v+" ")!=-1}},pseudos:{"first-child":function(c){var r=[],ri=-1,n;for(var i=0,ci;ci=n=c[i];i++){while((n=n.previousSibling)&&n.nodeType!=1){}if(!n){r[++ri]=ci}}return r},"last-child":function(c){var r=[],ri=-1,n;for(var i=0,ci;ci=n=c[i];i++){while((n=n.nextSibling)&&n.nodeType!=1){}if(!n){r[++ri]=ci}}return r},"nth-child":function(c,a){var r=[],ri=-1,m=nthRe.exec(a=="even"&&"2n"||a=="odd"&&"2n+1"||!nthRe2.test(a)&&"n+"+a||a),f=(m[1]||1)-0,l=m[2]-0;for(var i=0,n;n=c[i];i++){var pn=n.parentNode;if(batch!=pn._batch){var j=0;for(var cn=pn.firstChild;cn;cn=cn.nextSibling){if(cn.nodeType==1){cn.nodeIndex=++j}}pn._batch=batch}if(f==1){if(l==0||n.nodeIndex==l){r[++ri]=n}}else{if((n.nodeIndex+l)%f==0){r[++ri]=n}}}return r},"only-child":function(c){var r=[],ri=-1;for(var i=0,ci;ci=c[i];i++){if(!prev(ci)&&!next(ci)){r[++ri]=ci}}return r},empty:function(c){var r=[],ri=-1;for(var i=0,ci;ci=c[i];i++){var cns=ci.childNodes,j=0,cn,empty=true;while(cn=cns[j]){++j;if(cn.nodeType==1||cn.nodeType==3){empty=false;break}}if(empty){r[++ri]=ci}}return r},contains:function(c,v){var r=[],ri=-1;for(var i=0,ci;ci=c[i];i++){if((ci.textContent||ci.innerText||"").indexOf(v)!=-1){r[++ri]=ci}}return r},nodeValue:function(c,v){var r=[],ri=-1;for(var i=0,ci;ci=c[i];i++){if(ci.firstChild&&ci.firstChild.nodeValue==v){r[++ri]=ci}}return r},checked:function(c){var r=[],ri=-1;for(var i=0,ci;ci=c[i];i++){if(ci.checked==true){r[++ri]=ci}}return r},not:function(c,ss){return Ext.DomQuery.filter(c,ss,true)},any:function(c,selectors){var ss=selectors.split("|"),r=[],ri=-1,s;for(var i=0,ci;ci=c[i];i++){for(var j=0;s=ss[j];j++){if(Ext.DomQuery.is(ci,s)){r[++ri]=ci;break}}}return r},odd:function(c){return this["nth-child"](c,"odd")},even:function(c){return this["nth-child"](c,"even")},nth:function(c,a){return c[a-1]||[]},first:function(c){return c[0]||[]},last:function(c){return c[c.length-1]||[]},has:function(c,ss){var s=Ext.DomQuery.select,r=[],ri=-1;for(var i=0,ci;ci=c[i];i++){if(s(ss,ci).length>0){r[++ri]=ci}}return r},next:function(c,ss){var is=Ext.DomQuery.is,r=[],ri=-1;for(var i=0,ci;ci=c[i];i++){var n=next(ci);if(n&&is(n,ss)){r[++ri]=ci}}return r},prev:function(c,ss){var is=Ext.DomQuery.is,r=[],ri=-1;for(var i=0,ci;ci=c[i];i++){var n=prev(ci);if(n&&is(n,ss)){r[++ri]=ci}}return r}}}}();Ext.query=Ext.DomQuery.select;Ext.EventManager=function(){var u,m,i=false,l=Ext.lib.Event,n=Ext.lib.Dom,b=document,v=window,e="ie-deferred-loader",o="DOMContentLoaded",g=/^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,q=[];function k(y){var B=false,x=0,w=q.length,B=false,z=false,A;if(y){if(y.getElementById||y.navigator){for(;x<w;++x){A=q[x];if(A.el===y){B=A.id;break}}if(!B){B=Ext.id(y);q.push({id:B,el:y});z=true}}else{B=Ext.id(y)}if(!Ext.elCache[B]){Ext.Element.addToCache(new Ext.Element(y),B);if(z){Ext.elCache[B].skipGC=true}}}return B}function j(y,A,D,z,x,F){y=Ext.getDom(y);var w=k(y),E=Ext.elCache[w].events,B;B=l.on(y,A,x);E[A]=E[A]||[];E[A].push([D,x,F,B,z]);if(A=="mousewheel"&&y.addEventListener){var C=["DOMMouseScroll",x,false];y.addEventListener.apply(y,C);Ext.EventManager.addListener(v,"unload",function(){y.removeEventListener.apply(y,C)})}if(A=="mousedown"&&y==document){Ext.EventManager.stoppedMouseDownEvent.addListener(x)}}function c(){if(!i){Ext.isReady=i=true;if(m){clearInterval(m)}if(Ext.isGecko||Ext.isOpera){b.removeEventListener(o,c,false)}if(Ext.isIE){var w=b.getElementById(e);if(w){w.onreadystatechange=null;w.parentNode.removeChild(w)}}if(u){u.fire();u.listeners=[]}}}function a(){var w="complete";u=new Ext.util.Event();if(Ext.isGecko||Ext.isOpera){b.addEventListener(o,c,false)}else{if(Ext.isIE){b.write("<script id="+e+' defer="defer" src="//:"><\/script>');b.getElementById(e).onreadystatechange=function(){if(this.readyState==w){c()}}}else{if(Ext.isWebKit){m=setInterval(function(){if(b.readyState==w){c()}},10)}}}l.on(v,"load",c)}function s(w,x){return function(){var y=Ext.toArray(arguments);if(x.target==Ext.EventObject.setEvent(y[0]).target){w.apply(this,y)}}}function t(x,y,w){return function(z){w.delay(y.buffer,x,null,[new Ext.EventObjectImpl(z)])}}function p(A,z,w,y,x){return function(B){Ext.EventManager.removeListener(z,w,y,x);A(B)}}function d(x,y,w){return function(A){var z=new Ext.util.DelayedTask(x);if(!w.tasks){w.tasks=[]}w.tasks.push(z);z.delay(y.delay||10,x,null,[new Ext.EventObjectImpl(A)])}}function h(B,A,w,D,E){var x=!Ext.isObject(w)?{}:w,y=Ext.getDom(B),z;D=D||x.fn;E=E||x.scope;if(!y){throw'Error listening for "'+A+'". Element "'+B+"\" doesn't exist."}function C(G){if(!Ext){return}G=Ext.EventObject.setEvent(G);var F;if(x.delegate){if(!(F=G.getTarget(x.delegate,y))){return}}else{F=G.target}if(x.stopEvent){G.stopEvent()}if(x.preventDefault){G.preventDefault()}if(x.stopPropagation){G.stopPropagation()}if(x.normalized){G=G.browserEvent}D.call(E||y,G,F,x)}if(x.target){C=s(C,x)}if(x.delay){C=d(C,x,D)}if(x.single){C=p(C,y,A,D,E)}if(x.buffer){z=new Ext.util.DelayedTask(C);C=t(C,x,z)}j(y,A,D,z,C,E);return C}var r={addListener:function(y,w,A,z,x){if(Ext.isObject(w)){var D=w,B,C;for(B in D){C=D[B];if(!g.test(B)){if(Ext.isFunction(C)){h(y,B,D,C,D.scope)}else{h(y,B,C)}}}}else{h(y,w,x,A,z)}},removeListener:function(z,D,H,I){z=Ext.getDom(z);var w=k(z),F=z&&(Ext.elCache[w].events)[D]||[],x,C,A,B,y,E,G;for(C=0,E=F.length;C<E;C++){if(Ext.isArray(G=F[C])&&G[0]==H&&(!I||G[2]==I)){if(G[4]){G[4].cancel()}B=H.tasks&&H.tasks.length;if(B){while(B--){H.tasks[B].cancel()}delete H.tasks}y=x=G[1];if(l.extAdapter){y=G[3]}l.un(z,D,y);F.splice(C,1);if(F.length===0){delete Ext.elCache[w].events[D]}for(B in Ext.elCache[w].events){return false}Ext.elCache[w].events={};return false}}if(D=="mousewheel"&&z.addEventListener&&x){z.removeEventListener("DOMMouseScroll",x,false)}if(D=="mousedown"&&z==b&&x){Ext.EventManager.stoppedMouseDownEvent.removeListener(x)}},removeAll:function(x){x=Ext.getDom(x);var w=k(x),C=Ext.elCache[w]||{},F=C.events||{},B,A,D,y,E,z;for(y in F){if(F.hasOwnProperty(y)){B=F[y];for(A=0,D=B.length;A<D;A++){E=B[A];if(E[4]){E[4].cancel()}if(E[0].tasks&&(z=E[0].tasks.length)){while(z--){E[0].tasks[z].cancel()}delete E.tasks}l.un(x,y,l.extAdapter?E[3]:E[1])}}}if(Ext.elCache[w]){Ext.elCache[w].events={}}},getListeners:function(z,w){z=Ext.getDom(z);var B=k(z),x=Ext.elCache[B]||{},A=x.events||{},y=[];if(A&&A[w]){return A[w]}else{return null}},purgeElement:function(y,w,A){y=Ext.getDom(y);var x=k(y),D=Ext.elCache[x]||{},E=D.events||{},z,C,B;if(A){if(E&&E.hasOwnProperty(A)){C=E[A];for(z=0,B=C.length;z<B;z++){Ext.EventManager.removeListener(y,A,C[z][0])}}}else{Ext.EventManager.removeAll(y)}if(w&&y&&y.childNodes){for(z=0,B=y.childNodes.length;z<B;z++){Ext.EventManager.purgeElement(y.childNodes[z],w,A)}}},_unload:function(){var w;for(w in Ext.elCache){Ext.EventManager.removeAll(w)}},onDocumentReady:function(y,x,w){if(i){u.addListener(y,x,w);u.fire();u.listeners=[]}else{if(!u){a()}w=w||{};w.delay=w.delay||1;u.addListener(y,x,w)}}};r.on=r.addListener;r.un=r.removeListener;r.stoppedMouseDownEvent=new Ext.util.Event();return r}();Ext.onReady=Ext.EventManager.onDocumentReady;(function(){var a=function(){var c=document.body||document.getElementsByTagName("body")[0];if(!c){return false}var b=[" ",Ext.isIE?"ext-ie "+(Ext.isIE6?"ext-ie6":(Ext.isIE7?"ext-ie7":"ext-ie8")):Ext.isGecko?"ext-gecko "+(Ext.isGecko2?"ext-gecko2":"ext-gecko3"):Ext.isOpera?"ext-opera":Ext.isWebKit?"ext-webkit":""];if(Ext.isSafari){b.push("ext-safari "+(Ext.isSafari2?"ext-safari2":(Ext.isSafari3?"ext-safari3":"ext-safari4")))}else{if(Ext.isChrome){b.push("ext-chrome")}}if(Ext.isMac){b.push("ext-mac")}if(Ext.isLinux){b.push("ext-linux")}if(Ext.isStrict||Ext.isBorderBox){var d=c.parentNode;if(d){d.className+=Ext.isStrict?" ext-strict":" ext-border-box"}}c.className+=b.join(" ");return true};if(!a()){Ext.onReady(a)}})();Ext.EventObject=function(){var b=Ext.lib.Event,a={3:13,63234:37,63235:39,63232:38,63233:40,63276:33,63277:34,63272:46,63273:36,63275:35},c=Ext.isIE?{1:0,4:1,2:2}:(Ext.isWebKit?{1:0,2:1,3:2}:{0:0,1:1,2:2});Ext.EventObjectImpl=function(d){if(d){this.setEvent(d.browserEvent||d)}};Ext.EventObjectImpl.prototype={setEvent:function(g){var d=this;if(g==d||(g&&g.browserEvent)){return g}d.browserEvent=g;if(g){d.button=g.button?c[g.button]:(g.which?g.which-1:-1);if(g.type=="click"&&d.button==-1){d.button=0}d.type=g.type;d.shiftKey=g.shiftKey;d.ctrlKey=g.ctrlKey||g.metaKey||false;d.altKey=g.altKey;d.keyCode=g.keyCode;d.charCode=g.charCode;d.target=b.getTarget(g);d.xy=b.getXY(g)}else{d.button=-1;d.shiftKey=false;d.ctrlKey=false;d.altKey=false;d.keyCode=0;d.charCode=0;d.target=null;d.xy=[0,0]}return d},stopEvent:function(){var d=this;if(d.browserEvent){if(d.browserEvent.type=="mousedown"){Ext.EventManager.stoppedMouseDownEvent.fire(d)}b.stopEvent(d.browserEvent)}},preventDefault:function(){if(this.browserEvent){b.preventDefault(this.browserEvent)}},stopPropagation:function(){var d=this;if(d.browserEvent){if(d.browserEvent.type=="mousedown"){Ext.EventManager.stoppedMouseDownEvent.fire(d)}b.stopPropagation(d.browserEvent)}},getCharCode:function(){return this.charCode||this.keyCode},getKey:function(){return this.normalizeKey(this.keyCode||this.charCode)},normalizeKey:function(d){return Ext.isSafari?(a[d]||d):d},getPageX:function(){return this.xy[0]},getPageY:function(){return this.xy[1]},getXY:function(){return this.xy},getTarget:function(e,g,d){return e?Ext.fly(this.target).findParent(e,g,d):(d?Ext.get(this.target):this.target)},getRelatedTarget:function(){return this.browserEvent?b.getRelatedTarget(this.browserEvent):null},getWheelDelta:function(){var d=this.browserEvent;var g=0;if(d.wheelDelta){g=d.wheelDelta/120}else{if(d.detail){g=-d.detail/3}}return g},within:function(g,h,d){if(g){var e=this[h?"getRelatedTarget":"getTarget"]();return e&&((d?(e==Ext.getDom(g)):false)||Ext.fly(g).contains(e))}return false}};return new Ext.EventObjectImpl()}();(function(){var j=document;Ext.Element=function(o,p){var q=typeof o=="string"?j.getElementById(o):o,r;if(!q){return null}r=q.id;if(!p&&r&&Ext.elCache[r]){return Ext.elCache[r].el}this.dom=q;this.id=r||Ext.id(q)};var a=Ext.lib.Dom,g=Ext.DomHelper,m=Ext.lib.Event,e=Ext.lib.Anim,h=Ext.Element,b=Ext.elCache;h.prototype={set:function(t,q){var r=this.dom,p,s,q=(q!==false)&&!!r.setAttribute;for(p in t){if(t.hasOwnProperty(p)){s=t[p];if(p=="style"){g.applyStyles(r,s)}else{if(p=="cls"){r.className=s}else{if(q){r.setAttribute(p,s)}else{r[p]=s}}}}}return this},defaultUnit:"px",is:function(o){return Ext.DomQuery.is(this.dom,o)},focus:function(r,q){var o=this,q=q||o.dom;try{if(Number(r)){o.focus.defer(r,null,[null,q])}else{q.focus()}}catch(p){}return o},blur:function(){try{this.dom.blur()}catch(o){}return this},getValue:function(o){var p=this.dom.value;return o?parseInt(p,10):p},addListener:function(o,r,q,p){Ext.EventManager.on(this.dom,o,r,q||this,p);return this},removeListener:function(o,q,p){Ext.EventManager.removeListener(this.dom,o,q,p||this);return this},removeAllListeners:function(){Ext.EventManager.removeAll(this.dom);return this},purgeAllListeners:function(){Ext.EventManager.purgeElement(this,true);return this},addUnits:function(o){if(o===""||o=="auto"||o===undefined){o=o||""}else{if(!isNaN(o)||!k.test(o)){o=o+(this.defaultUnit||"px")}}return o},load:function(p,q,o){Ext.Ajax.request(Ext.apply({params:q,url:p.url||p,callback:o,el:this.dom,indicatorText:p.indicatorText||""},Ext.isObject(p)?p:{}));return this},isBorderBox:function(){return i[(this.dom.tagName||"").toLowerCase()]||Ext.isBorderBox},remove:function(){var o=this,p=o.dom;if(p){delete o.dom;Ext.removeNode(p)}},hover:function(p,o,r,q){var s=this;s.on("mouseenter",p,r||s.dom,q);s.on("mouseleave",o,r||s.dom,q);return s},contains:function(o){return !o?false:Ext.lib.Dom.isAncestor(this.dom,o.dom?o.dom:o)},getAttributeNS:function(p,o){return this.getAttribute(o,p)},getAttribute:Ext.isIE?function(o,q){var r=this.dom,p=typeof r[q+":"+o];if(["undefined","unknown"].indexOf(p)==-1){return r[q+":"+o]}return r[o]}:function(o,p){var q=this.dom;return q.getAttributeNS(p,o)||q.getAttribute(p+":"+o)||q.getAttribute(o)||q[o]},update:function(o){if(this.dom){this.dom.innerHTML=o}return this}};var n=h.prototype;h.addMethods=function(p){Ext.apply(n,p)};n.on=n.addListener;n.un=n.removeListener;n.autoBoxAdjust=true;var k=/\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,d;h.get=function(p){var o,s,r;if(!p){return null}if(typeof p=="string"){if(!(s=j.getElementById(p))){return null}if(b[p]&&b[p].el){o=b[p].el;o.dom=s}else{o=h.addToCache(new h(s))}return o}else{if(p.tagName){if(!(r=p.id)){r=Ext.id(p)}if(b[r]&&b[r].el){o=b[r].el;o.dom=p}else{o=h.addToCache(new h(p))}return o}else{if(p instanceof h){if(p!=d){p.dom=j.getElementById(p.id)||p.dom}return p}else{if(p.isComposite){return p}else{if(Ext.isArray(p)){return h.select(p)}else{if(p==j){if(!d){var q=function(){};q.prototype=h.prototype;d=new q();d.dom=j}return d}}}}}}return null};h.addToCache=function(o,p){p=p||o.id;b[p]={el:o,data:{},events:{}};return o};h.data=function(p,o,q){p=h.get(p);if(!p){return null}var r=b[p.id].data;if(arguments.length==2){return r[o]}else{return(r[o]=q)}};function l(){if(!Ext.enableGarbageCollector){clearInterval(h.collectorThreadId)}else{var p,r,u,s;for(p in b){s=b[p];if(s.skipGC){continue}r=s.el;u=r.dom;if(!u||!u.parentNode||(!u.offsetParent&&!j.getElementById(p))){if(Ext.enableListenerCollection){Ext.EventManager.removeAll(u)}delete b[p]}}if(Ext.isIE){var q={};for(p in b){q[p]=b[p]}b=Ext.elCache=q}}}h.collectorThreadId=setInterval(l,30000);var c=function(){};c.prototype=h.prototype;h.Flyweight=function(o){this.dom=o};h.Flyweight.prototype=new c();h.Flyweight.prototype.isFlyweight=true;h._flyweights={};h.fly=function(q,o){var p=null;o=o||"_global";if(q=Ext.getDom(q)){(h._flyweights[o]=h._flyweights[o]||new h.Flyweight()).dom=q;p=h._flyweights[o]}return p};Ext.get=h.get;Ext.fly=h.fly;var i=Ext.isStrict?{select:1}:{input:1,select:1,textarea:1};if(Ext.isIE||Ext.isGecko){i.button=1}Ext.EventManager.on(window,"unload",function(){delete b;delete h._flyweights})})();Ext.Element.addMethods(function(){var d="parentNode",b="nextSibling",c="previousSibling",e=Ext.DomQuery,a=Ext.get;return{findParent:function(m,l,h){var j=this.dom,g=document.body,k=0,i;if(Ext.isGecko&&Object.prototype.toString.call(j)=="[object XULElement]"){return null}l=l||50;if(isNaN(l)){i=Ext.getDom(l);l=Number.MAX_VALUE}while(j&&j.nodeType==1&&k<l&&j!=g&&j!=i){if(e.is(j,m)){return h?a(j):j}k++;j=j.parentNode}return null},findParentNode:function(j,i,g){var h=Ext.fly(this.dom.parentNode,"_internal");return h?h.findParent(j,i,g):null},up:function(h,g){return this.findParentNode(h,g,true)},select:function(g){return Ext.Element.select(g,this.dom)},query:function(g){return e.select(g,this.dom)},child:function(g,h){var i=e.selectNode(g,this.dom);return h?i:a(i)},down:function(g,h){var i=e.selectNode(" > "+g,this.dom);return h?i:a(i)},parent:function(g,h){return this.matchNode(d,d,g,h)},next:function(g,h){return this.matchNode(b,b,g,h)},prev:function(g,h){return this.matchNode(c,c,g,h)},first:function(g,h){return this.matchNode(b,"firstChild",g,h)},last:function(g,h){return this.matchNode(c,"lastChild",g,h)},matchNode:function(h,k,g,i){var j=this.dom[k];while(j){if(j.nodeType==1&&(!g||e.is(j,g))){return !i?a(j):j}j=j[h]}return null}}}());Ext.Element.addMethods(function(){var c=Ext.getDom,a=Ext.get,b=Ext.DomHelper;return{appendChild:function(d){return a(d).appendTo(this)},appendTo:function(d){c(d).appendChild(this.dom);return this},insertBefore:function(d){(d=c(d)).parentNode.insertBefore(this.dom,d);return this},insertAfter:function(d){(d=c(d)).parentNode.insertBefore(this.dom,d.nextSibling);return this},insertFirst:function(e,d){e=e||{};if(e.nodeType||e.dom||typeof e=="string"){e=c(e);this.dom.insertBefore(e,this.dom.firstChild);return !d?a(e):e}else{return this.createChild(e,this.dom.firstChild,d)}},replace:function(d){d=a(d);this.insertBefore(d);d.remove();return this},replaceWith:function(d){var e=this;if(d.nodeType||d.dom||typeof d=="string"){d=c(d);e.dom.parentNode.insertBefore(d,e.dom)}else{d=b.insertBefore(e.dom,d)}delete Ext.elCache[e.id];Ext.removeNode(e.dom);e.id=Ext.id(e.dom=d);Ext.Element.addToCache(e.isFlyweight?new Ext.Element(e.dom):e);return e},createChild:function(e,d,g){e=e||{tag:"div"};return d?b.insertBefore(d,e,g!==true):b[!this.dom.firstChild?"overwrite":"append"](this.dom,e,g!==true)},wrap:function(d,e){var g=b.insertBefore(this.dom,d||{tag:"div"},!e);g.dom?g.dom.appendChild(this.dom):g.appendChild(this.dom);return g},insertHtml:function(e,g,d){var h=b.insertHtml(e,this.dom,g);return d?Ext.get(h):h}}}());Ext.Element.addMethods(function(){var h={},x=/(-[a-z])/gi,b={},s=document.defaultView,u=Ext.isIE?"styleFloat":"cssFloat",C=/alpha\(opacity=(.*)\)/i,l=/^\s+|\s+$/g,A=Ext.Element,d="padding",c="margin",y="border",t="-left",q="-right",w="-top",o="-bottom",j="-width",r=Math,z="hidden",e="isClipped",k="overflow",n="overflow-x",m="overflow-y",B="originalClip",i={l:y+t+j,r:y+q+j,t:y+w+j,b:y+o+j},g={l:d+t,r:d+q,t:d+w,b:d+o},a={l:c+t,r:c+q,t:c+w,b:c+o},D=Ext.Element.data;function p(E,F){return F.charAt(1).toUpperCase()}function v(E){return h[E]||(h[E]=E=="float"?u:E.replace(x,p))}return{adjustWidth:function(E){var F=this;var G=Ext.isNumber(E);if(G&&F.autoBoxAdjust&&!F.isBorderBox()){E-=(F.getBorderWidth("lr")+F.getPadding("lr"))}return(G&&E<0)?0:E},adjustHeight:function(E){var F=this;var G=Ext.isNumber(E);if(G&&F.autoBoxAdjust&&!F.isBorderBox()){E-=(F.getBorderWidth("tb")+F.getPadding("tb"))}return(G&&E<0)?0:E},addClass:function(H){var I=this,G,E,F;H=Ext.isArray(H)?H:[H];for(G=0,E=H.length;G<E;G++){F=H[G];if(F){I.dom.className+=(!I.hasClass(F)&&F?" "+F:"")}}return I},radioClass:function(H){var I=this.dom.parentNode.childNodes,F;H=Ext.isArray(H)?H:[H];for(var G=0,E=I.length;G<E;G++){F=I[G];if(F&&F.nodeType==1){Ext.fly(F,"_internal").removeClass(H)}}return this.addClass(H)},removeClass:function(H){var I=this,F;H=Ext.isArray(H)?H:[H];if(I.dom&&I.dom.className){for(var G=0,E=H.length;G<E;G++){F=H[G];if(F){I.dom.className=I.dom.className.replace(b[F]=b[F]||new RegExp("(?:^|\\s+)"+F+"(?:\\s+|$)","g")," ")}}}return I},toggleClass:function(E){return this.hasClass(E)?this.removeClass(E):this.addClass(E)},hasClass:function(E){return E&&(" "+this.dom.className+" ").indexOf(" "+E+" ")!=-1},replaceClass:function(F,E){return this.removeClass(F).addClass(E)},isStyle:function(E,F){return this.getStyle(E)==F},getStyle:function(){return s&&s.getComputedStyle?function(K){var H=this.dom,E,G,F,I,J=Ext.isWebKit,I;if(H==document){return null}K=v(K);if(J&&/marginRight/.test(K)){I=this.getStyle("display");H.style.display="inline-block"}F=(E=H.style[K])?E:(G=s.getComputedStyle(H,""))?G[K]:null;if(J){if(F=="rgba(0, 0, 0, 0)"){F="transparent"}else{if(I){H.style.display=I}}}return F}:function(I){var G=this.dom,E,F;if(G==document){return null}if(I=="opacity"){if(G.style.filter.match){if(E=G.style.filter.match(C)){var H=parseFloat(E[1]);if(!isNaN(H)){return H?H/100:0}}}return 1}I=v(I);return G.style[I]||((F=G.currentStyle)?F[I]:null)}}(),getColor:function(E,F,J){var H=this.getStyle(E),G=Ext.isDefined(J)?J:"#",I;if(!H||/transparent|inherit/.test(H)){return F}if(/^r/.test(H)){Ext.each(H.slice(4,H.length-1).split(","),function(K){I=parseInt(K,10);G+=(I<16?"0":"")+I.toString(16)})}else{H=H.replace("#","");G+=H.length==3?H.replace(/^(\w)(\w)(\w)$/,"$1$1$2$2$3$3"):H}return(G.length>5?G.toLowerCase():F)},setStyle:function(I,H){var F,G,E;if(!Ext.isObject(I)){F={};F[I]=H;I=F}for(G in I){H=I[G];G=="opacity"?this.setOpacity(H):this.dom.style[v(G)]=H}return this},setOpacity:function(F,E){var I=this,G=I.dom.style;if(!E||!I.anim){if(Ext.isIE){var H=F<1?"alpha(opacity="+F*100+")":"",J=G.filter.replace(C,"").replace(l,"");G.zoom=1;G.filter=J+(J.length>0?" ":"")+H}else{G.opacity=F}}else{I.anim({opacity:{to:F}},I.preanim(arguments,1),null,0.35,"easeIn")}return I},clearOpacity:function(){var E=this.dom.style;if(Ext.isIE){if(!Ext.isEmpty(E.filter)){E.filter=E.filter.replace(C,"").replace(l,"")}}else{E.opacity=E["-moz-opacity"]=E["-khtml-opacity"]=""}return this},getHeight:function(G){var F=this,I=F.dom,H=Ext.isIE&&F.isStyle("display","none"),E=r.max(I.offsetHeight,H?0:I.clientHeight)||0;E=!G?E:E-F.getBorderWidth("tb")-F.getPadding("tb");return E<0?0:E},getWidth:function(F){var G=this,I=G.dom,H=Ext.isIE&&G.isStyle("display","none"),E=r.max(I.offsetWidth,H?0:I.clientWidth)||0;E=!F?E:E-G.getBorderWidth("lr")-G.getPadding("lr");return E<0?0:E},setWidth:function(F,E){var G=this;F=G.adjustWidth(F);!E||!G.anim?G.dom.style.width=G.addUnits(F):G.anim({width:{to:F}},G.preanim(arguments,1));return G},setHeight:function(E,F){var G=this;E=G.adjustHeight(E);!F||!G.anim?G.dom.style.height=G.addUnits(E):G.anim({height:{to:E}},G.preanim(arguments,1));return G},getBorderWidth:function(E){return this.addStyles(E,i)},getPadding:function(E){return this.addStyles(E,g)},clip:function(){var E=this,F=E.dom;if(!D(F,e)){D(F,e,true);D(F,B,{o:E.getStyle(k),x:E.getStyle(n),y:E.getStyle(m)});E.setStyle(k,z);E.setStyle(n,z);E.setStyle(m,z)}return E},unclip:function(){var E=this,G=E.dom;if(D(G,e)){D(G,e,false);var F=D(G,B);if(F.o){E.setStyle(k,F.o)}if(F.x){E.setStyle(n,F.x)}if(F.y){E.setStyle(m,F.y)}}return E},addStyles:function(J,I){var K=0,F=J.match(/\w/g),H;for(var G=0,E=F.length;G<E;G++){H=F[G]&&parseInt(this.getStyle(I[F[G]]),10);if(H){K+=r.abs(H)}}return K},margins:a}}());(function(){var a=Ext.lib.Dom,b="left",g="right",d="top",i="bottom",h="position",c="static",e="relative",j="auto",k="z-index";Ext.Element.addMethods({getX:function(){return a.getX(this.dom)},getY:function(){return a.getY(this.dom)},getXY:function(){return a.getXY(this.dom)},getOffsetsTo:function(l){var n=this.getXY(),m=Ext.fly(l,"_internal").getXY();return[n[0]-m[0],n[1]-m[1]]},setX:function(l,m){return this.setXY([l,this.getY()],this.animTest(arguments,m,1))},setY:function(m,l){return this.setXY([this.getX(),m],this.animTest(arguments,l,1))},setLeft:function(l){this.setStyle(b,this.addUnits(l));return this},setTop:function(l){this.setStyle(d,this.addUnits(l));return this},setRight:function(l){this.setStyle(g,this.addUnits(l));return this},setBottom:function(l){this.setStyle(i,this.addUnits(l));return this},setXY:function(n,l){var m=this;if(!l||!m.anim){a.setXY(m.dom,n)}else{m.anim({points:{to:n}},m.preanim(arguments,1),"motion")}return m},setLocation:function(l,n,m){return this.setXY([l,n],this.animTest(arguments,m,2))},moveTo:function(l,n,m){return this.setXY([l,n],this.animTest(arguments,m,2))},getLeft:function(l){return !l?this.getX():parseInt(this.getStyle(b),10)||0},getRight:function(l){var m=this;return !l?m.getX()+m.getWidth():(m.getLeft(true)+m.getWidth())||0},getTop:function(l){return !l?this.getY():parseInt(this.getStyle(d),10)||0},getBottom:function(l){var m=this;return !l?m.getY()+m.getHeight():(m.getTop(true)+m.getHeight())||0},position:function(p,o,l,n){var m=this;if(!p&&m.isStyle(h,c)){m.setStyle(h,e)}else{if(p){m.setStyle(h,p)}}if(o){m.setStyle(k,o)}if(l||n){m.setXY([l||false,n||false])}},clearPositioning:function(l){l=l||"";this.setStyle({left:l,right:l,top:l,bottom:l,"z-index":"",position:c});return this},getPositioning:function(){var m=this.getStyle(b);var n=this.getStyle(d);return{position:this.getStyle(h),left:m,right:m?"":this.getStyle(g),top:n,bottom:n?"":this.getStyle(i),"z-index":this.getStyle(k)}},setPositioning:function(l){var n=this,m=n.dom.style;n.setStyle(l);if(l.right==j){m.right=""}if(l.bottom==j){m.bottom=""}return n},translatePoints:function(m,u){u=isNaN(m[1])?u:m[1];m=isNaN(m[0])?m:m[0];var q=this,r=q.isStyle(h,e),s=q.getXY(),n=parseInt(q.getStyle(b),10),p=parseInt(q.getStyle(d),10);n=!isNaN(n)?n:(r?0:q.dom.offsetLeft);p=!isNaN(p)?p:(r?0:q.dom.offsetTop);return{left:(m-s[0]+n),top:(u-s[1]+p)}},animTest:function(m,l,n){return !!l&&this.preanim?this.preanim(m,n):false}})})();Ext.Element.addMethods({isScrollable:function(){var a=this.dom;return a.scrollHeight>a.clientHeight||a.scrollWidth>a.clientWidth},scrollTo:function(a,b){this.dom["scroll"+(/top/i.test(a)?"Top":"Left")]=b;return this},getScroll:function(){var i=this.dom,h=document,a=h.body,c=h.documentElement,b,g,e;if(i==h||i==a){if(Ext.isIE&&Ext.isStrict){b=c.scrollLeft;g=c.scrollTop}else{b=window.pageXOffset;g=window.pageYOffset}e={left:b||(a?a.scrollLeft:0),top:g||(a?a.scrollTop:0)}}else{e={left:i.scrollLeft,top:i.scrollTop}}return e}});Ext.Element.VISIBILITY=1;Ext.Element.DISPLAY=2;Ext.Element.addMethods(function(){var h="visibility",d="display",b="hidden",j="none",a="originalDisplay",c="visibilityMode",e=Ext.Element.DISPLAY,g=Ext.Element.data,i=function(m){var l=g(m,a);if(l===undefined){g(m,a,l="")}return l},k=function(n){var l=g(n,c);if(l===undefined){g(n,c,l=1)}return l};return{originalDisplay:"",visibilityMode:1,setVisibilityMode:function(l){g(this.dom,c,l);return this},animate:function(m,o,n,p,l){this.anim(m,{duration:o,callback:n,easing:p},l);return this},anim:function(o,p,m,r,n,l){m=m||"run";p=p||{};var q=this,s=Ext.lib.Anim[m](q.dom,o,(p.duration||r)||0.35,(p.easing||n)||"easeOut",function(){if(l){l.call(q)}if(p.callback){p.callback.call(p.scope||q,q,p)}},q);p.anim=s;return s},preanim:function(l,m){return !l[m]?false:(Ext.isObject(l[m])?l[m]:{duration:l[m+1],callback:l[m+2],easing:l[m+3]})},isVisible:function(){return !this.isStyle(h,b)&&!this.isStyle(d,j)},setVisible:function(p,m){var n=this,o=n.dom,l=k(this.dom)==e;if(!m||!n.anim){if(l){n.setDisplayed(p)}else{n.fixDisplay();o.style.visibility=p?"visible":b}}else{if(p){n.setOpacity(0.01);n.setVisible(true)}n.anim({opacity:{to:(p?1:0)}},n.preanim(arguments,1),null,0.35,"easeIn",function(){if(!p){o.style[l?d:h]=(l)?j:b;Ext.fly(o).setOpacity(1)}})}return n},toggle:function(l){var m=this;m.setVisible(!m.isVisible(),m.preanim(arguments,0));return m},setDisplayed:function(l){if(typeof l=="boolean"){l=l?i(this.dom):j}this.setStyle(d,l);return this},fixDisplay:function(){var l=this;if(l.isStyle(d,j)){l.setStyle(h,b);l.setStyle(d,i(this.dom));if(l.isStyle(d,j)){l.setStyle(d,"block")}}},hide:function(l){this.setVisible(false,this.preanim(arguments,0));return this},show:function(l){this.setVisible(true,this.preanim(arguments,0));return this}}}());(function(){var y=null,A=undefined,k=true,t=false,j="setX",h="setY",a="setXY",n="left",l="bottom",s="top",m="right",q="height",g="width",i="points",w="hidden",z="absolute",u="visible",e="motion",o="position",r="easeOut",d=new Ext.Element.Flyweight(),v={},x=function(B){return B||{}},p=function(B){d.dom=B;d.id=Ext.id(B);return d},c=function(B){if(!v[B]){v[B]=[]}return v[B]},b=function(C,B){v[C]=B};Ext.enableFx=k;Ext.Fx={switchStatements:function(C,D,B){return D.apply(this,B[C])},slideIn:function(H,E){E=x(E);var J=this,G=J.dom,M=G.style,O,B,L,D,C,M,I,N,K,F;H=H||"t";J.queueFx(E,function(){O=p(G).getXY();p(G).fixDisplay();B=p(G).getFxRestore();L={x:O[0],y:O[1],0:O[0],1:O[1],width:G.offsetWidth,height:G.offsetHeight};L.right=L.x+L.width;L.bottom=L.y+L.height;p(G).setWidth(L.width).setHeight(L.height);D=p(G).fxWrap(B.pos,E,w);M.visibility=u;M.position=z;function P(){p(G).fxUnwrap(D,B.pos,E);M.width=B.width;M.height=B.height;p(G).afterFx(E)}N={to:[L.x,L.y]};K={to:L.width};F={to:L.height};function Q(U,R,V,S,X,Z,ac,ab,aa,W,T){var Y={};p(U).setWidth(V).setHeight(S);if(p(U)[X]){p(U)[X](Z)}R[ac]=R[ab]="0";if(aa){Y.width=aa}if(W){Y.height=W}if(T){Y.points=T}return Y}I=p(G).switchStatements(H.toLowerCase(),Q,{t:[D,M,L.width,0,y,y,n,l,y,F,y],l:[D,M,0,L.height,y,y,m,s,K,y,y],r:[D,M,L.width,L.height,j,L.right,n,s,y,y,N],b:[D,M,L.width,L.height,h,L.bottom,n,s,y,F,N],tl:[D,M,0,0,y,y,m,l,K,F,N],bl:[D,M,0,0,h,L.y+L.height,m,s,K,F,N],br:[D,M,0,0,a,[L.right,L.bottom],n,s,K,F,N],tr:[D,M,0,0,j,L.x+L.width,n,l,K,F,N]});M.visibility=u;p(D).show();arguments.callee.anim=p(D).fxanim(I,E,e,0.5,r,P)});return J},slideOut:function(F,D){D=x(D);var H=this,E=H.dom,K=E.style,L=H.getXY(),C,B,I,J,G={to:0};F=F||"t";H.queueFx(D,function(){B=p(E).getFxRestore();I={x:L[0],y:L[1],0:L[0],1:L[1],width:E.offsetWidth,height:E.offsetHeight};I.right=I.x+I.width;I.bottom=I.y+I.height;p(E).setWidth(I.width).setHeight(I.height);C=p(E).fxWrap(B.pos,D,u);K.visibility=u;K.position=z;p(C).setWidth(I.width).setHeight(I.height);function M(){D.useDisplay?p(E).setDisplayed(t):p(E).hide();p(E).fxUnwrap(C,B.pos,D);K.width=B.width;K.height=B.height;p(E).afterFx(D)}function N(O,W,U,X,S,V,R,T,Q){var P={};O[W]=O[U]="0";P[X]=S;if(V){P[V]=R}if(T){P[T]=Q}return P}J=p(E).switchStatements(F.toLowerCase(),N,{t:[K,n,l,q,G],l:[K,m,s,g,G],r:[K,n,s,g,G,i,{to:[I.right,I.y]}],b:[K,n,s,q,G,i,{to:[I.x,I.bottom]}],tl:[K,m,l,g,G,q,G],bl:[K,m,s,g,G,q,G,i,{to:[I.x,I.bottom]}],br:[K,n,s,g,G,q,G,i,{to:[I.x+I.width,I.bottom]}],tr:[K,n,l,g,G,q,G,i,{to:[I.right,I.y]}]});arguments.callee.anim=p(C).fxanim(J,D,e,0.5,r,M)});return H},puff:function(H){H=x(H);var F=this,G=F.dom,C=G.style,D,B,E;F.queueFx(H,function(){D=p(G).getWidth();B=p(G).getHeight();p(G).clearOpacity();p(G).show();E=p(G).getFxRestore();function I(){H.useDisplay?p(G).setDisplayed(t):p(G).hide();p(G).clearOpacity();p(G).setPositioning(E.pos);C.width=E.width;C.height=E.height;C.fontSize="";p(G).afterFx(H)}arguments.callee.anim=p(G).fxanim({width:{to:p(G).adjustWidth(D*2)},height:{to:p(G).adjustHeight(B*2)},points:{by:[-D*0.5,-B*0.5]},opacity:{to:0},fontSize:{to:200,unit:"%"}},H,e,0.5,r,I)});return F},switchOff:function(F){F=x(F);var D=this,E=D.dom,B=E.style,C;D.queueFx(F,function(){p(E).clearOpacity();p(E).clip();C=p(E).getFxRestore();function G(){F.useDisplay?p(E).setDisplayed(t):p(E).hide();p(E).clearOpacity();p(E).setPositioning(C.pos);B.width=C.width;B.height=C.height;p(E).afterFx(F)}p(E).fxanim({opacity:{to:0.3}},y,y,0.1,y,function(){p(E).clearOpacity();(function(){p(E).fxanim({height:{to:1},points:{by:[0,p(E).getHeight()*0.5]}},F,e,0.3,"easeIn",G)}).defer(100)})});return D},highlight:function(D,H){H=x(H);var F=this,G=F.dom,B=H.attr||"backgroundColor",C={},E;F.queueFx(H,function(){p(G).clearOpacity();p(G).show();function I(){G.style[B]=E;p(G).afterFx(H)}E=G.style[B];C[B]={from:D||"ffff9c",to:H.endColor||p(G).getColor(B)||"ffffff"};arguments.callee.anim=p(G).fxanim(C,H,"color",1,"easeIn",I)});return F},frame:function(B,E,H){H=x(H);var D=this,G=D.dom,C,F;D.queueFx(H,function(){B=B||"#C3DAF9";if(B.length==6){B="#"+B}E=E||1;p(G).show();var L=p(G).getXY(),J={x:L[0],y:L[1],0:L[0],1:L[1],width:G.offsetWidth,height:G.offsetHeight},I=function(){C=p(document.body||document.documentElement).createChild({style:{position:z,"z-index":35000,border:"0px solid "+B}});return C.queueFx({},K)};arguments.callee.anim={isAnimated:true,stop:function(){E=0;C.stopFx()}};function K(){var M=Ext.isBorderBox?2:1;F=C.anim({top:{from:J.y,to:J.y-20},left:{from:J.x,to:J.x-20},borderWidth:{from:0,to:10},opacity:{from:1,to:0},height:{from:J.height,to:J.height+20*M},width:{from:J.width,to:J.width+20*M}},{duration:H.duration||1,callback:function(){C.remove();--E>0?I():p(G).afterFx(H)}});arguments.callee.anim={isAnimated:true,stop:function(){F.stop()}}}I()});return D},pause:function(D){var C=this.dom,B;this.queueFx({},function(){B=setTimeout(function(){p(C).afterFx({})},D*1000);arguments.callee.anim={isAnimated:true,stop:function(){clearTimeout(B);p(C).afterFx({})}}});return this},fadeIn:function(D){D=x(D);var B=this,C=B.dom,E=D.endOpacity||1;B.queueFx(D,function(){p(C).setOpacity(0);p(C).fixDisplay();C.style.visibility=u;arguments.callee.anim=p(C).fxanim({opacity:{to:E}},D,y,0.5,r,function(){if(E==1){p(C).clearOpacity()}p(C).afterFx(D)})});return B},fadeOut:function(E){E=x(E);var C=this,D=C.dom,B=D.style,F=E.endOpacity||0;C.queueFx(E,function(){arguments.callee.anim=p(D).fxanim({opacity:{to:F}},E,y,0.5,r,function(){if(F==0){Ext.Element.data(D,"visibilityMode")==Ext.Element.DISPLAY||E.useDisplay?B.display="none":B.visibility=w;p(D).clearOpacity()}p(D).afterFx(E)})});return C},scale:function(B,C,D){this.shift(Ext.apply({},D,{width:B,height:C}));return this},shift:function(D){D=x(D);var C=this.dom,B={};this.queueFx(D,function(){for(var E in D){if(D[E]!=A){B[E]={to:D[E]}}}B.width?B.width.to=p(C).adjustWidth(D.width):B;B.height?B.height.to=p(C).adjustWidth(D.height):B;if(B.x||B.y||B.xy){B.points=B.xy||{to:[B.x?B.x.to:p(C).getX(),B.y?B.y.to:p(C).getY()]}}arguments.callee.anim=p(C).fxanim(B,D,e,0.35,r,function(){p(C).afterFx(D)})});return this},ghost:function(E,C){C=x(C);var G=this,D=G.dom,J=D.style,H={opacity:{to:0},points:{}},K=H.points,B,I,F;E=E||"b";G.queueFx(C,function(){B=p(D).getFxRestore();I=p(D).getWidth();F=p(D).getHeight();function L(){C.useDisplay?p(D).setDisplayed(t):p(D).hide();p(D).clearOpacity();p(D).setPositioning(B.pos);J.width=B.width;J.height=B.height;p(D).afterFx(C)}K.by=p(D).switchStatements(E.toLowerCase(),function(N,M){return[N,M]},{t:[0,-F],l:[-I,0],r:[I,0],b:[0,F],tl:[-I,-F],bl:[-I,F],br:[I,F],tr:[I,-F]});arguments.callee.anim=p(D).fxanim(H,C,e,0.5,r,L)});return G},syncFx:function(){var B=this;B.fxDefaults=Ext.apply(B.fxDefaults||{},{block:t,concurrent:k,stopFx:t});return B},sequenceFx:function(){var B=this;B.fxDefaults=Ext.apply(B.fxDefaults||{},{block:t,concurrent:t,stopFx:t});return B},nextFx:function(){var B=c(this.dom.id)[0];if(B){B.call(this)}},hasActiveFx:function(){return c(this.dom.id)[0]},stopFx:function(B){var C=this,E=C.dom.id;if(C.hasActiveFx()){var D=c(E)[0];if(D&&D.anim){if(D.anim.isAnimated){b(E,[D]);D.anim.stop(B!==undefined?B:k)}else{b(E,[])}}}return C},beforeFx:function(B){if(this.hasActiveFx()&&!B.concurrent){if(B.stopFx){this.stopFx();return k}return t}return k},hasFxBlock:function(){var B=c(this.dom.id);return B&&B[0]&&B[0].block},queueFx:function(E,B){var C=p(this.dom);if(!C.hasFxBlock()){Ext.applyIf(E,C.fxDefaults);if(!E.concurrent){var D=C.beforeFx(E);B.block=E.block;c(C.dom.id).push(B);if(D){C.nextFx()}}else{B.call(C)}}return C},fxWrap:function(H,F,D){var E=this.dom,C,B;if(!F.wrap||!(C=Ext.getDom(F.wrap))){if(F.fixPosition){B=p(E).getXY()}var G=document.createElement("div");G.style.visibility=D;C=E.parentNode.insertBefore(G,E);p(C).setPositioning(H);if(p(C).isStyle(o,"static")){p(C).position("relative")}p(E).clearPositioning("auto");p(C).clip();C.appendChild(E);if(B){p(C).setXY(B)}}return C},fxUnwrap:function(C,F,E){var D=this.dom;p(D).clearPositioning();p(D).setPositioning(F);if(!E.wrap){var B=p(C).dom.parentNode;B.insertBefore(D,C);p(C).remove()}},getFxRestore:function(){var B=this.dom.style;return{pos:this.getPositioning(),width:B.width,height:B.height}},afterFx:function(C){var B=this.dom,D=B.id;if(C.afterStyle){p(B).setStyle(C.afterStyle)}if(C.afterCls){p(B).addClass(C.afterCls)}if(C.remove==k){p(B).remove()}if(C.callback){C.callback.call(C.scope,p(B))}if(!C.concurrent){c(D).shift();p(B).nextFx()}},fxanim:function(E,F,C,G,D,B){C=C||"run";F=F||{};var H=Ext.lib.Anim[C](this.dom,E,(F.duration||G)||0.35,(F.easing||D)||r,B,this);F.anim=H;return H}};Ext.Fx.resize=Ext.Fx.scale;Ext.Element.addMethods(Ext.Fx)})();Ext.CompositeElementLite=function(b,a){this.elements=[];this.add(b,a);this.el=new Ext.Element.Flyweight()};Ext.CompositeElementLite.prototype={isComposite:true,getElement:function(a){var b=this.el;b.dom=a;b.id=a.id;return b},transformElement:function(a){return Ext.getDom(a)},getCount:function(){return this.elements.length},add:function(d,b){var e=this,g=e.elements;if(!d){return this}if(Ext.isString(d)){d=Ext.Element.selectorFunction(d,b)}else{if(d.isComposite){d=d.elements}else{if(!Ext.isIterable(d)){d=[d]}}}for(var c=0,a=d.length;c<a;++c){g.push(e.transformElement(d[c]))}return e},invoke:function(g,b){var h=this,d=h.elements,a=d.length,j,c;for(c=0;c<a;c++){j=d[c];if(j){Ext.Element.prototype[g].apply(h.getElement(j),b)}}return h},item:function(b){var d=this,c=d.elements[b],a=null;if(c){a=d.getElement(c)}return a},addListener:function(b,j,h,g){var d=this.elements,a=d.length,c,k;for(c=0;c<a;c++){k=d[c];if(k){Ext.EventManager.on(k,b,j,h||k,g)}}return this},each:function(g,d){var h=this,c=h.elements,a=c.length,b,j;for(b=0;b<a;b++){j=c[b];if(j){j=this.getElement(j);if(g.call(d||j,j,h,b)){break}}}return h},fill:function(a){var b=this;b.elements=[];b.add(a);return b},filter:function(a){var b=[],d=this,e=d.elements,c=Ext.isFunction(a)?a:function(g){return g.is(a)};d.each(function(j,g,h){if(c(j,h)!==false){b[b.length]=d.transformElement(j)}});d.elements=b;return d},indexOf:function(a){return this.elements.indexOf(this.transformElement(a))},replaceElement:function(e,c,a){var b=!isNaN(e)?e:this.indexOf(e),g;if(b>-1){c=Ext.getDom(c);if(a){g=this.elements[b];g.parentNode.insertBefore(c,g);Ext.removeNode(g)}this.elements.splice(b,1,c)}return this},clear:function(){this.elements=[]}};Ext.CompositeElementLite.prototype.on=Ext.CompositeElementLite.prototype.addListener;(function(){var c,b=Ext.Element.prototype,a=Ext.CompositeElementLite.prototype;for(c in b){if(Ext.isFunction(b[c])){(function(d){a[d]=a[d]||function(){return this.invoke(d,arguments)}}).call(a,c)}}})();if(Ext.DomQuery){Ext.Element.selectorFunction=Ext.DomQuery.select}Ext.Element.select=function(a,b){var c;if(typeof a=="string"){c=Ext.Element.selectorFunction(a,b)}else{if(a.length!==undefined){c=a}else{throw"Invalid selector"}}return new Ext.CompositeElementLite(c)};Ext.select=Ext.Element.select;(function(){var b="beforerequest",e="requestcomplete",d="requestexception",h=undefined,c="load",i="POST",a="GET",g=window;Ext.data.Connection=function(j){Ext.apply(this,j);this.addEvents(b,e,d);Ext.data.Connection.superclass.constructor.call(this)};Ext.extend(Ext.data.Connection,Ext.util.Observable,{timeout:30000,autoAbort:false,disableCaching:true,disableCachingParam:"_dc",request:function(n){var s=this;if(s.fireEvent(b,s,n)){if(n.el){if(!Ext.isEmpty(n.indicatorText)){s.indicatorText='<div class="loading-indicator">'+n.indicatorText+"</div>"}if(s.indicatorText){Ext.getDom(n.el).innerHTML=s.indicatorText}n.success=(Ext.isFunction(n.success)?n.success:function(){}).createInterceptor(function(o){Ext.getDom(n.el).innerHTML=o.responseText})}var l=n.params,k=n.url||s.url,j,q={success:s.handleResponse,failure:s.handleFailure,scope:s,argument:{options:n},timeout:n.timeout||s.timeout},m,t;if(Ext.isFunction(l)){l=l.call(n.scope||g,n)}l=Ext.urlEncode(s.extraParams,Ext.isObject(l)?Ext.urlEncode(l):l);if(Ext.isFunction(k)){k=k.call(n.scope||g,n)}if((m=Ext.getDom(n.form))){k=k||m.action;if(n.isUpload||/multipart\/form-data/i.test(m.getAttribute("enctype"))){return s.doFormUpload.call(s,n,l,k)}t=Ext.lib.Ajax.serializeForm(m);l=l?(l+"&"+t):t}j=n.method||s.method||((l||n.xmlData||n.jsonData)?i:a);if(j===a&&(s.disableCaching&&n.disableCaching!==false)||n.disableCaching===true){var r=n.disableCachingParam||s.disableCachingParam;k=Ext.urlAppend(k,r+"="+(new Date().getTime()))}n.headers=Ext.apply(n.headers||{},s.defaultHeaders||{});if(n.autoAbort===true||s.autoAbort){s.abort()}if((j==a||n.xmlData||n.jsonData)&&l){k=Ext.urlAppend(k,l);l=""}return(s.transId=Ext.lib.Ajax.request(j,k,q,l,n))}else{return n.callback?n.callback.apply(n.scope,[n,h,h]):null}},isLoading:function(j){return j?Ext.lib.Ajax.isCallInProgress(j):!!this.transId},abort:function(j){if(j||this.isLoading()){Ext.lib.Ajax.abort(j||this.transId)}},handleResponse:function(j){this.transId=false;var k=j.argument.options;j.argument=k?k.argument:null;this.fireEvent(e,this,j,k);if(k.success){k.success.call(k.scope,j,k)}if(k.callback){k.callback.call(k.scope,k,true,j)}},handleFailure:function(j,l){this.transId=false;var k=j.argument.options;j.argument=k?k.argument:null;this.fireEvent(d,this,j,k,l);if(k.failure){k.failure.call(k.scope,j,k)}if(k.callback){k.callback.call(k.scope,k,false,j)}},doFormUpload:function(q,j,k){var l=Ext.id(),v=document,r=v.createElement("iframe"),m=Ext.getDom(q.form),u=[],t,p="multipart/form-data",n={target:m.target,method:m.method,encoding:m.encoding,enctype:m.enctype,action:m.action};Ext.fly(r).set({id:l,name:l,cls:"x-hidden"});v.body.appendChild(r);Ext.fly(r).set({src:Ext.SSL_SECURE_URL});if(Ext.isIE){document.frames[l].name=l}Ext.fly(m).set({target:l,method:i,enctype:p,encoding:p,action:k||n.action});Ext.iterate(Ext.urlDecode(j,false),function(w,o){t=v.createElement("input");Ext.fly(t).set({type:"hidden",value:o,name:w});m.appendChild(t);u.push(t)});function s(){var x=this,w={responseText:"",responseXML:null,argument:q.argument},A,z;try{A=r.contentWindow.document||r.contentDocument||g.frames[l].document;if(A){if(A.body){if(/textarea/i.test((z=A.body.firstChild||{}).tagName)){w.responseText=z.value}else{w.responseText=A.body.innerHTML}}w.responseXML=A.XMLDocument||A}}catch(y){}Ext.EventManager.removeListener(r,c,s,x);x.fireEvent(e,x,w,q);function o(D,C,B){if(Ext.isFunction(D)){D.apply(C,B)}}o(q.success,q.scope,[w,q]);o(q.callback,q.scope,[q,true,w]);if(!x.debugUploads){setTimeout(function(){Ext.removeNode(r)},100)}}Ext.EventManager.on(r,c,s,this);m.submit();Ext.fly(m).set(n);Ext.each(u,function(o){Ext.removeNode(o)})}})})();Ext.Ajax=new Ext.data.Connection({autoAbort:false,serializeForm:function(a){return Ext.lib.Ajax.serializeForm(a)}});Ext.util.JSON=new (function(){var useHasOwn=!!{}.hasOwnProperty,isNative=function(){var useNative=null;return function(){if(useNative===null){useNative=Ext.USE_NATIVE_JSON&&window.JSON&&JSON.toString()=="[object JSON]"}return useNative}}(),pad=function(n){return n<10?"0"+n:n},doDecode=function(json){return eval("("+json+")")},doEncode=function(o){if(!Ext.isDefined(o)||o===null){return"null"}else{if(Ext.isArray(o)){return encodeArray(o)}else{if(Ext.isDate(o)){return Ext.util.JSON.encodeDate(o)}else{if(Ext.isString(o)){return encodeString(o)}else{if(typeof o=="number"){return isFinite(o)?String(o):"null"}else{if(Ext.isBoolean(o)){return String(o)}else{var a=["{"],b,i,v;for(i in o){if(!o.getElementsByTagName){if(!useHasOwn||o.hasOwnProperty(i)){v=o[i];switch(typeof v){case"undefined":case"function":case"unknown":break;default:if(b){a.push(",")}a.push(doEncode(i),":",v===null?"null":doEncode(v));b=true}}}}a.push("}");return a.join("")}}}}}}},m={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},encodeString=function(s){if(/["\\\x00-\x1f]/.test(s)){return'"'+s.replace(/([\x00-\x1f\\"])/g,function(a,b){var c=m[b];if(c){return c}c=b.charCodeAt();return"\\u00"+Math.floor(c/16).toString(16)+(c%16).toString(16)})+'"'}return'"'+s+'"'},encodeArray=function(o){var a=["["],b,i,l=o.length,v;for(i=0;i<l;i+=1){v=o[i];switch(typeof v){case"undefined":case"function":case"unknown":break;default:if(b){a.push(",")}a.push(v===null?"null":Ext.util.JSON.encode(v));b=true}}a.push("]");return a.join("")};this.encodeDate=function(o){return'"'+o.getFullYear()+"-"+pad(o.getMonth()+1)+"-"+pad(o.getDate())+"T"+pad(o.getHours())+":"+pad(o.getMinutes())+":"+pad(o.getSeconds())+'"'};this.encode=function(){var ec;return function(o){if(!ec){ec=isNative()?JSON.stringify:doEncode}return ec(o)}}();this.decode=function(){var dc;return function(json){if(!dc){dc=isNative()?JSON.parse:doDecode}return dc(json)}}()})();Ext.encode=Ext.util.JSON.encode;Ext.decode=Ext.util.JSON.decode;


--------------------------------------------------------------------------------
/js/jsonp.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Ext Core Library 3.0
 3 |  * http://extjs.com/
 4 |  * Copyright(c) 2006-2009, Ext JS, LLC.
 5 |  * 
 6 |  * MIT Licensed - http://extjs.com/license/mit.txt
 7 |  */
 8 | Ext.ns('Ext.ux');
 9 | 
10 | Ext.ux.JSONP = (function(){
11 |     var _queue = [],
12 |         _current = null,
13 |         _nextRequest = function() {
14 |             _current = null;
15 |             if(_queue.length) {
16 |                 _current = _queue.shift();
17 |     			_current.script.src = _current.url + '?' + _current.params;
18 |     			document.getElementsByTagName('head')[0].appendChild(_current.script);
19 |             }
20 |         };
21 | 
22 |     return {
23 |         request: function(url, o) {
24 |             if(!url) {
25 |                 return;
26 |             }
27 |             var me = this;
28 | 
29 |             o.params = o.params || {};
30 |             if(o.callbackKey) {
31 |                 o.params[o.callbackKey] = 'Ext.ux.JSONP.callback';
32 |             }
33 |             var params = Ext.urlEncode(o.params);
34 | 
35 |             var script = document.createElement('script');
36 | 			script.type = 'text/javascript';
37 | 
38 |             if(o.isRawJSON) {
39 |                 if(Ext.isIE) {
40 |                     Ext.fly(script).on('readystatechange', function() {
41 |                         if(script.readyState == 'complete') {
42 |                             var data = script.innerHTML;
43 |                             if(data.length) {
44 |                                 me.callback(Ext.decode(data));
45 |                             }
46 |                         }
47 |                     });
48 |                 }
49 |                 else {
50 |                      Ext.fly(script).on('load', function() {
51 |                         var data = script.innerHTML;
52 |                         if(data.length) {
53 |                             me.callback(Ext.decode(data));
54 |                         }
55 |                     });
56 |                 }
57 |             }
58 | 
59 |             _queue.push({
60 |                 url: url,
61 |                 script: script,
62 |                 callback: o.callback || function(){},
63 |                 scope: o.scope || window,
64 |                 params: params || null
65 |             });
66 | 
67 |             if(!_current) {
68 |                 _nextRequest();
69 |             }
70 |         },
71 | 
72 |         callback: function(json) {
73 |             _current.callback.apply(_current.scope, [json]);
74 |             Ext.fly(_current.script).removeAllListeners();
75 |             document.getElementsByTagName('head')[0].removeChild(_current.script);
76 |             _nextRequest();
77 |         }
78 |     }
79 | })();


--------------------------------------------------------------------------------
/js/preview.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var Preview = (function(){
  3 |   // change the display depending on whether we're rendering for a facebook mockup or google plus mockup
  4 | 
  5 |   var Display = {
  6 |     /*
  7 |     Event Handlers
  8 |     ==============
  9 |     Logic that helps the form do what it's suppose to. There is nothing really
 10 |     all that special here in terms of 'the right way'. It's totally up to the
 11 |     developer.
 12 |     */
 13 |     
 14 |     // The bulk of the scroll left and right functions. dir is either 'left'
 15 |     // or 'right'. I'm pretty sure there is a better wat to do this.
 16 |     scroll : function(dir,e,t){
 17 |       e.preventDefault();
 18 |       //Grabs the current 'left' style
 19 |       var left = Ext.fly('images').getStyle('left');
 20 |       //Gets the number of images
 21 |       var len = Ext.fly('images').select('img').elements.length * 100;
 22 |       //General logic to set the new left value
 23 |       if (dir == 'left'){
 24 |         left = parseInt(left)+100;
 25 |         if (left > 0) return false;
 26 |       } else if (dir == 'right'){
 27 |         left = parseInt(left)-100;
 28 |         if (left <= -len) return false;
 29 |       } else {
 30 |         console.log('not a valid direction: '+dir)
 31 |         return false;
 32 |       }
 33 |       //Puts the current thumbnail into the thumbnail_url input
 34 |       Ext.fly('id_thumbnail_url').dom.value = Ext.DomQuery.select('#images li:nth-child('+((left/-100)+1)+') img')[0].src
 35 |       //Sets the new left.
 36 |       Ext.fly('images').setStyle('left',left+'px');
 37 |     },
 38 |     //Scrolls the image selector when the `right` button is clicked.
 39 |     scrollRight : function(e,t){Preview.Display.scroll('right', e, t)},
 40 |     //Scrolls 
 41 |     scrollLeft : function(e,t){Preview.Display.scroll('left', e, t)},
 42 |     
 43 |     // When a user wants to Edit a title or description we need to switch out
 44 |     // an input or text area
 45 |     setTitle : function(e,t){
 46 |       e.preventDefault();
 47 |       //Make it an Ext element.
 48 |       var elem = Ext.get(t);
 49 |       // Sets the New Title in the hidden inputs
 50 |       Ext.fly('id_title').dom.value = encodeURIComponent(elem.dom.value);
 51 |       //overwrite the a tag with the value of the tag.
 52 |       elem = elem.replaceWith({
 53 |           'tag' : 'a', 
 54 |           'class' : 'title',
 55 |           'html': elem.dom.value
 56 |       });
 57 |     },
 58 |     editTitle : function(e, t){
 59 |       e.preventDefault();
 60 |       //Make it an Ext element.
 61 |       var elem = Ext.get(t);
 62 |       //overwrite the a tag with the value of the tag.
 63 |       elem = elem.replaceWith({
 64 |         'tag' : 'input', 
 65 |         'type' : 'text',
 66 |         'class' : 'title',
 67 |         'value': elem.dom.innerHTML
 68 |       });
 69 |       //Set the focus on this element
 70 |       elem.focus();
 71 |       // puts the a tag back on blur. It's a single bind so it will be
 72 |       // trashed on blur.
 73 |       elem.on('blur', Preview.Display.setTitle, null, {single: true});   
 74 |     },
 75 |     //Same as before, but for description
 76 |     setDescription : function(e,t){
 77 |       e.preventDefault();
 78 |       //Make t an Ext Element
 79 |       var elem = Ext.get(t);
 80 |       // Sets the New Description in the hidden inputs
 81 |       Ext.fly('id_description').dom.value = encodeURIComponent(elem.dom.value);
 82 |       //overwrite the a tag with the value of the tag.
 83 |       elem = elem.replaceWith({
 84 |         'tag' : 'a',
 85 |         'class' : 'description',
 86 |         'html': elem.dom.value
 87 |       });
 88 |       
 89 |     },
 90 |     editDescription: function(e,t){
 91 |       e.preventDefault();
 92 |       // Make t an Ext Element
 93 |       var elem = Ext.get(t);
 94 |       // overwrite the a tag with the value of the tag. Passes back the new
 95 |       // element.
 96 |       elem = elem.replaceWith({
 97 |         'tag' : 'textarea',
 98 |         'class' : 'description',
 99 |         'html': elem.dom.innerHTML
100 |       });
101 |       //Focus the Text Area
102 |       elem.focus();
103 |       //When the element is then blured update the value.
104 |       elem.on('blur', Preview.Display.setDescription, null, {single : true});
105 |     },
106 |     
107 |     /*
108 |       Display Functions
109 |     */
110 |     render : function(obj){
111 |       if(Preview.site=='fb'){
112 |         Ext.fly('id_submit').addClass('submit');
113 |         Ext.fly('id_submit').dom.value = 'Share';
114 |         Ext.fly('preview_form').addClass('preview');
115 |       }
116 |       // We are going to handle just images first. This is when a user
117 |       // directly links to an image asset. i.e.
118 |       //http://images.instagram.com/media/2011/08/01/55d07d3fac974d45ababdb7f04673f72_7.jpg
119 |       if (obj.type == 'image'){
120 |         //Add the image to the scoller that won't scroll in this case.
121 |         Preview.Display.imageScroller([obj.url]);
122 |         
123 |         //Set the title to obj.url
124 |         obj.title = obj.url;
125 |         Preview.Display.title(obj);
126 |       }
127 | 
128 |       // In here we handle the majority of the use cases. It's a link to an
129 |       // html page with image assests and words. In this case you also
130 |       // may have access to an `object` attribute which will be an image or
131 |       // a video
132 |       if (obj.type == 'html'){
133 |         if(Preview.site == 'plus'){
134 |           //add the title or a blank one.
135 |           Preview.Display.title(obj);
136 | 
137 |           // add the favicon to the preview to match Google Plus
138 |           Preview.Display.favicon(obj);
139 |         }
140 |         
141 | 
142 |         // If there are images we need to build the slider.
143 |         Preview.Display.images(obj);
144 |         
145 |         // display customizations for facebook version
146 |         if(Preview.site == 'fb'){
147 |           Ext.DomHelper.append('display', 
148 |             {
149 |               'tag': 'a',
150 |               'class' : 'title',
151 |               'href' : '#',
152 |               'html' : obj.title ? obj.title : 'Click to add your own title.'
153 |             }
154 |           );
155 |           Ext.DomHelper.append('display',{
156 |             'tag':'p',
157 |             'class':'url',
158 |             'html':obj.url
159 |           });
160 |         }
161 |         
162 | 
163 |         //add the description or a blank one.
164 |         Preview.Display.description(obj);
165 |         
166 |         //This is the fun where the video comes into play.
167 |         if (obj.object && obj.object.type in {'video':'', 'rich':''}){
168 |           Ext.fly('id_html').dom.value = obj.object.html;
169 |           Ext.fly('id_type').dom.value = obj.object.type;
170 |         }
171 |       }
172 |       
173 |       
174 |       
175 |       //Clear div.
176 |       Ext.DomHelper.append('display',{
177 |           tag : 'div',
178 |           class : 'clear',
179 |       });
180 |     },
181 |     
182 |     // Resets the form to the orginal state
183 |     reset : function(){
184 |       // If this is a change in the URL we need to delete all the old
185 |       // information first.
186 |       Ext.fly('preview_form').select('input[type="hidden"]').remove();
187 |       Ext.fly('display').select('*').remove();
188 |       Ext.fly('display').hide();
189 |       Ext.fly('display').setStyle('display', 'none');
190 |       Ext.fly('id_status').dom.value = ''
191 |       Ext.fly('id_status').blur();
192 |       if(Preview.site=='fb'){
193 |         Ext.fly('id_submit').dom.value='Attach';
194 |         Ext.fly('id_submit').removeClass('submit');
195 |         Ext.fly('preview_form').removeClass('preview');
196 |       }
197 |     },
198 |     setStylesheet : function(name){
199 |       var i, obj;
200 |       Preview.site=name;
201 |       for(i=0; i<document.getElementsByTagName("link").length; i++)
202 |       {
203 |         obj = document.getElementsByTagName("link")[i];
204 |         if(obj.getAttribute("rel").indexOf("alt") != -1 && obj.getAttribute("title")){
205 |           obj.disabled = true;
206 |           if(obj.getAttribute("title") === name){
207 |               obj.disabled = false;
208 |           }
209 |         }
210 |       }
211 |     },
212 |     swapStylesheets : function(){
213 |       if(Preview.site == 'plus'){
214 |         Ext.fly('status_label').update("http://");
215 |         Ext.fly('id_submit').dom.value = 'Attach';
216 |         Ext.fly('preview_h2').update("<span></span>News Feed");
217 |         Preview.Display.setStylesheet('fb');
218 |       }else{
219 |         Ext.fly('status_label').update("Share what's new...");
220 |         Ext.fly('id_submit').dom.value = 'Share';
221 |         Ext.fly('preview_h2').update("Stream");
222 |         Preview.Display.setStylesheet('plus');
223 |       }
224 |       Preview.Feed.populateFeed();
225 |     },
226 | 
227 |     title : function(obj){
228 |       Ext.DomHelper.insertFirst('display', 
229 |         {
230 |           'tag': 'a',
231 |           'class' : 'title',
232 |           'href' : '#',
233 |           'html' : obj.title ? obj.title : 'Click to add your own title.'
234 |         }
235 |       );
236 |     },
237 |     favicon : function(obj){
238 |       if(Preview.site == 'plus' && obj.favicon_url){
239 |         Ext.DomHelper.insertFirst('display', 
240 |           {
241 |             'tag': 'img',
242 |             'class' : 'favicon',
243 |             'src' : obj.favicon_url
244 |           }
245 |         );
246 |       }
247 |     },
248 |     description : function(obj){
249 |       Ext.DomHelper.append('display',{ 
250 |         tag : 'div',
251 |         class : 'attributes',
252 |         children : [{
253 |           'tag': 'p',
254 |           'children' : {
255 |             'tag' : 'a',
256 |             'class' : 'description',
257 |             'html' :obj.description ? obj.description : 'Click to add your own description.'
258 |           }
259 |       }]});
260 |     },
261 |     images : function(obj){
262 |       if (obj.images.length > 0){
263 |         var images = [];
264 |         // Add all the images that are in the `images` array. This allows
265 |         // the user to select which image they want to use
266 |         for (var i in obj.images){
267 |           var img = obj.images[i];
268 |           if (!img.hasOwnProperty('url')) continue;
269 |           images.push(img.url);
270 |         }
271 |         //Builds the image scroller.
272 |         Preview.Display.imageScroller(images);
273 |       }
274 |     },
275 |     
276 |     imageScroller : function(images){
277 |       // Add the first image as the current thumbnail
278 |       Ext.fly('id_thumbnail_url').dom.value = encodeURIComponent(images[0]);
279 |       
280 |       var image_data = [];
281 |       // Add all the images that are in the `images` array. This allows
282 |       // the user to select which image they want to use
283 |       Ext.each(images, function(img){
284 |         image_data.push( 
285 |           {
286 |             'tag': 'li', 
287 |             'children' : {
288 |               'tag': 'img',
289 |               'src' : img
290 |             }
291 |           }
292 |         );
293 |       });
294 |       var image_slider = {
295 |         tag : 'div',
296 |         class : 'wrap',
297 |         children: [{
298 |           tag : 'div',
299 |           class : 'controls',
300 |           children : [{
301 |               tag: 'a',
302 |               id : 'left',
303 |               class: 'button',
304 |               href :'#',
305 |               html : '&lt;'
306 |             },{
307 |               tag:   'a',
308 |               id : 'right',
309 |               class: 'button',
310 |               href :'#',
311 |               html : '&gt;'
312 |             },
313 |           ] 
314 |         },{
315 |           tag : 'div',
316 |           class : 'items',
317 |           children: [{
318 |             tag:'ul',
319 |             id : 'images',
320 |             children : image_data
321 |           }]
322 |         }]
323 |       }
324 |       Ext.DomHelper.append('display',image_slider); 
325 |     },
326 |     bind : function(){
327 |       //Scroll
328 |       Ext.getBody().on('click', Preview.Display.scrollRight, null, {delegate: '#right'});
329 |       Ext.getBody().on('click', Preview.Display.scrollLeft, null, {delegate: '#left'});
330 | 
331 |       //Equivalent to $('').live from what I understand.
332 |       Ext.getBody().on('click', Preview.Display.editTitle, null, {delegate: 'a.title'});
333 |       Ext.getBody().on('click', Preview.Display.editDescription, null, {delegate: 'a.description'});
334 |       
335 |       //Simple Expando function for the text area.
336 |       Ext.EventManager.on("id_status", 'focus', function(e, t){
337 |         var elem = Ext.get(t);
338 |         Ext.fly('status_label').dom.style.display='none'
339 |         if(Preview.site=='plus')
340 |           elem.dom.rows = 5;
341 |       });
342 |       Ext.EventManager.on("id_status", 'blur', function(e, t){
343 |         var elem = Ext.get(t);
344 |         if(elem.dom.value =='')
345 |           Ext.fly('status_label').dom.style.display='inline';
346 |         if(Preview.site=='plus')
347 |           elem.dom.rows = 1;
348 |       });
349 |     }
350 |   }
351 | 
352 |   /*
353 |     Feed Functions
354 |   */
355 |   
356 |   var Feed = {
357 |     /*
358 |     Feed Methods
359 |     ============
360 |     Methods that allow us to update the fake feed. We use window.localStorage
361 |     to save off the items to the browser.
362 |     */
363 |     //This creates and adds an item to the feed.
364 |     createFeedItem : function (data){
365 |       // We need to create an element structure
366 |       var elem = {};
367 |       
368 |       // the item div will have a bunch of data-* attributes that help us later
369 |       // with events.
370 |       Ext.each(Preview.attrs, function(n){elem['data-'+(n == 'html' ? 'embed' : n)] = encodeURIComponent(data[n])});
371 |       elem['tag'] = 'div';
372 |       elem['class'] = 'item';
373 |       
374 |       if(Preview.site=='plus')
375 |         Feed.plusFeedItem(elem, data);
376 |       else
377 |         Feed.fbFeedItem(elem, data);
378 |     },
379 |     fbFeedItem : function(elem, data){
380 |       elem['children'] = [{
381 |         tag:'img',
382 |         src:'http://www.freshlyinkedmag.com/static/images/noprofileimage.gif',
383 |         class:'profilepic'
384 |       }, {
385 |         tag:'h6',
386 |         html:'Demo User'
387 |       },{
388 |         tag:'div',
389 |         class:'embed',
390 |         children: [{
391 |           tag : 'div',
392 |           class : data.thumbnail_url? 'grid_2 alpha thumbnail': 'alpha no_thumbnail',
393 |           children : [{
394 |             tag : 'a',
395 |             href : '#',
396 |             class : data['type'] in {'video':'', 'rich':''}? 'video' : '',
397 |             children : [{
398 |               tag : 'img',
399 |               src : data.thumbnail_url
400 |             },{
401 |               tag : 'span',
402 |               class : 'player_overlay'
403 |             }]
404 |           }]
405 |         },{
406 |           tag : 'div',
407 |           class : 'info',
408 |           children:[{
409 |               tag:'a',
410 |               class : 'title',
411 |               href : data.url,
412 |               html : data.title,
413 |               target :'_blank'
414 |           },{
415 |             tag:'p',
416 |             html : data.provider_display,
417 |             target :'_blank'
418 |           },{
419 |             tag : 'p',
420 |             html : data.description
421 |           }]
422 |         },{
423 |               tag : 'p',
424 |             class : 'via',
425 |               children : [{
426 |                 tag:'img',
427 |                 src:data.favicon_url,
428 |                 class:'postIcon'
429 |               },{
430 |                 tag:'span',
431 |                 html: ' via '+data.provider_display
432 |               }]
433 |             }]
434 |       },{
435 |         tag:'div',
436 |         class:'clear',
437 |         html:''
438 |       }];
439 |       Ext.fly('feed').insertFirst(elem);
440 |     },
441 |     plusFeedItem : function(elem, data) {
442 |       elem['children'] = [{
443 |         tag:'a',
444 |         class : 'favicon',
445 |         href : data.provider_url,
446 |         title : data.provider_display,
447 |         target :'_blank',
448 |         children : [{
449 |           tag : 'img',
450 |           src : data.favicon_url
451 |         }]
452 |       },{
453 |         tag:'a',
454 |         class : 'title',
455 |         href : data.url,
456 |         html : data.title,
457 |         target :'_blank'
458 |       },{
459 |         tag : 'div',
460 |         class : data.thumbnail_url? 'grid_2 alpha thumbnail': 'alpha no_thumbnail',
461 |         children : [{
462 |             tag : 'a',
463 |             href : '#',
464 |             class : data['type'] in {'video':'', 'rich':''}? 'video' : '',
465 |             children : [{
466 |                 tag : 'img',
467 |                 src : data.thumbnail_url
468 |               },{
469 |                 tag : 'span',
470 |                 class : 'player_overlay'
471 |               }]
472 |           }]
473 |         },{
474 |         tag : 'div',
475 |         class : 'info grid_5 omega',
476 |         children : [{
477 |           tag:'a',
478 |           class: 'provider',
479 |           href : data.provider_url,
480 |           html : data.provider_display,
481 |           target :'_blank'
482 |         },
483 |         {
484 |           tag : 'p',
485 |           html : data.description
486 |         },
487 |         {
488 |           tag : 'a',
489 |           class : 'close',
490 |           href : '#',
491 |           html : 'x'
492 |         }]
493 |       },
494 |       {
495 |          tag : 'div',
496 |         class: 'clear',
497 |         html : '&nbsp;'
498 |       }];
499 |       Ext.fly('feed').insertFirst(elem);
500 |     },
501 |     // Adds the feed item to localStorage so we can display them on refresh
502 |     // You wouldn't use these in the real world. Only in testing.
503 |     storeFeedItem: function(data){
504 |       //Grab it out of localStorage.
505 |       var items = window.localStorage.getItem('items');
506 |       if (items === null) items = [];
507 |       else items = JSON.parse(items);
508 |       items.push(data);
509 |       //Set it into storage, it must be a string to save.
510 |       window.localStorage.setItem('items', JSON.stringify(items));
511 |     },
512 |     // Populates your feed on refresh.
513 |     populateFeed: function(){
514 |       // Get the items.
515 |       Ext.fly('feed').update('');
516 |       var items = window.localStorage.getItem('items');
517 |       if (items === null || items == '[]'){
518 |         //Fill with initial data
519 |         if (EMBEDLY_INITIAL_DATA !== undefined){
520 |           items = EMBEDLY_INITIAL_DATA;
521 |           window.localStorage.setItem('items', JSON.stringify(items));
522 |         } else{ 
523 |           return false;
524 |         }
525 |       } else{
526 |       //Parse the string to JSON
527 |         items = JSON.parse(items);
528 |       }
529 |       //decode the values.
530 |       Ext.each(items, function(i){Preview.Feed.createFeedItem(i)});
531 |       
532 |       //We need to add the `first` class to the first .items
533 |       Ext.fly('feed').first().addClass('first');
534 |     },
535 |     // When an Item is submitted we need to create the item in the feed and
536 |     // store it in local storage.
537 |     submitFeedItem: function(e,t){
538 |       e.preventDefault(); 
539 |       var data = {};
540 |       // Get the data we need out of the form. These are all the hidden inputs
541 |       // we used.
542 |       Ext.select('#preview_form input').each(function(e){data[e.dom.name] = decodeURIComponent(e.dom.value)});
543 |       //Create
544 |       Preview.Feed.createFeedItem(data);
545 |       //Stores
546 |       Preview.Feed.storeFeedItem(data);
547 |       
548 |       //Resets the first Attribute on the 
549 |       Ext.fly('feed').select('.item').removeClass('first');
550 |       Ext.fly('feed').first().addClass('first');
551 |       
552 |       Preview.Display.reset();
553 |     },
554 |     deleteFeedItem: function(e,t){
555 |       e.preventDefault(); 
556 |       var elem = Ext.fly(t).parent('.item');
557 |       var url = decodeURIComponent(elem.dom.getAttribute('data-url'));
558 |       elem.remove();
559 | 
560 |       //Get rid of the url in the items dir.
561 |       var items = window.localStorage.getItem('items');
562 |       if (items === null) return false;
563 |       //Parse the string to JSON
564 |       items = JSON.parse(items);
565 |       
566 |       for (var i in items){
567 |         var item = items[i];
568 |         if (item.url == url){
569 |           items.remove(item);
570 |         }
571 |       }
572 |       window.localStorage.setItem('items', JSON.stringify(items));
573 |     },
574 |         
575 |     /*
576 |     playVideo
577 |     
578 |     */
579 |     playVideo : function(e,t){
580 |       e.preventDefault(); 
581 |       var elem = Ext.fly(t).parent('.item');
582 |       //
583 |       elem.dom.innerHTML = decodeURIComponent(elem.dom.getAttribute('data-embed'));
584 |     },
585 |     
586 |     bind :function (){
587 |       //Show and Hide the little x button.
588 |       Ext.getBody().on('mouseover', function(e,t){Ext.fly(t).select('a.close').show();}, null, {delegate: 'div.item'});
589 |       Ext.getBody().on('mouseout', function(e,t){Ext.fly(t).select('a.close').hide();}, null, {delegate: 'div.item'});
590 |       //Do something about the little x button. (useful for testing.)
591 |       Ext.getBody().on('click', Preview.Feed.deleteFeedItem, null, {delegate: 'a.close'});
592 |       
593 |       //Wire up the video action
594 |       Ext.getBody().on('click', Preview.Feed.playVideo, null, {delegate: 'a.video'});
595 |     }
596 |   }
597 | 
598 | 
599 | 
600 |   var Preview = {
601 | 
602 |     //The set of attributes that we want to POST to the form.
603 |     attrs : ['type', 'original_url', 'url', 'title', 'description', 'favicon_url', 
604 |     'provider_url', 'provider_display', 'safe', 'html', 'thumbnail_url'],
605 |     
606 |     /*
607 |     Utils for handling the status.
608 |     */
609 |     getStatusUrl : function(obj){
610 |       // Grabs the status out of the Form.
611 |       var status = Ext.fly('id_status').getValue();
612 | 
613 |       //ignore the status it's blank.
614 |       if (status == ''){
615 |         return null;
616 |       }
617 | 
618 |       // Simple regex to make sure the url with a scheme is valid.
619 |       var urlexp = /^http(s?):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
620 |       var matches = status.match(urlexp);
621 | 
622 |       var url = matches? matches[0] : null
623 |   
624 |       //No urls is the status. Try for urls without scheme i.e. example.com
625 |       if (url === null){
626 |         var urlexp = /[-\w]+(\.[a-z]{2,})+(\S+)?(\/|\/[\w#!:.?+=&%@!\-\/])?/g;
627 |         var matches = status.match(urlexp);
628 |         url = matches? 'http://'+matches[0] : null
629 |       }
630 |       
631 |       //Note that in both cases we only grab the first URL.
632 |       return url;
633 |     },
634 |     
635 |     /*
636 |     Embedly Methods
637 |     ===============
638 |     This is where Embedly comes into play.
639 |     */
640 |     metadataCallback : function(obj){
641 |       //tells the loader to stop
642 |       Ext.fly('loading').hide();
643 |       Ext.fly('loading').setStyle('display', 'none');
644 | 
645 |       // Here is where you actually care about the obj
646 |       console.log(obj);
647 | 
648 |       // Every obj should have a 'type'. This is a clear sign that
649 |       // something is off. This is a basic check to make sure we should
650 |       // proceed. Generally will never happen.
651 |       if (!obj.hasOwnProperty('type')){
652 |         console.log('Embedly returned an invalid response'); 
653 |         return false;
654 |       }
655 | 
656 |       // Error. If the url was invalid, or 404'ed or something else. The
657 |       // endpoint will pass back an obj  of type 'error'. Generally this is
658 |       // were the default workflow should happen.
659 |       if (obj.type == 'error'){
660 |         console.log('URL ('+obj.url+') returned an error: '+ obj.error_message);
661 |         return false;
662 |       }
663 | 
664 |       // Generally you only want to handle preview objs that are of type
665 |       // `html` or `image`. Others could include `ppt`,`video` or `audio`
666 |       // which I don't believe you have a good solution for yet. We could
667 |       // wrap them in HTML5 tags, but won't work cross browser.
668 |       if (!(obj.type in {'html':'', 'image':''})){
669 |         console.log('URL ('+obj.url+') returned a type ('+obj.type+') not handled'); 
670 |         return false;
671 |       }
672 |       
673 |       // If this is a change in the URL we need to delete all the old
674 |       // information first.
675 |       Ext.fly('preview_form').select('input[type="hidden"]').remove();
676 |       Ext.fly('display').select('*').remove();
677 |       
678 |       //Sets all the data to a hidden inputs for the post.
679 |       Ext.each(Preview.attrs, function(n){
680 |         Ext.DomHelper.append('preview_form', {
681 |           tag:'input',
682 |           name : n,
683 |           type : 'hidden',
684 |           id : 'id_'+n,
685 |           value : obj.hasOwnProperty(n) && obj[n] ? encodeURIComponent(obj[n]): ''
686 |         });
687 |       });
688 | 
689 |       //display the display section
690 |       Ext.fly('display').show();
691 |       Ext.fly('id_submit').removeClass('disabled');
692 |       
693 |       Preview.Display.render(obj);
694 |       
695 |       
696 |     },
697 |     // Fetches the Metadata from the Embedly API
698 |     fetchMetadata: function(){
699 |       // Get a url out of the status box.
700 |       var url = Preview.getStatusUrl();
701 | 
702 |       // If there is no url return false.
703 |       if (url === null) return false;
704 |       
705 |       // If we already looked for a url, there will be an original_url hidden
706 |       // input that we should look for and compare values. If they are the
707 |       // same we will ignore.
708 |       var original_url = Ext.fly('id_original_url') ? Ext.fly('id_original_url').dom.value : null;
709 |       if (original_url == encodeURIComponent(url)) return false;
710 | 
711 |       //Tells the loaded to start
712 |       Ext.fly('loading').show();
713 | 
714 |       //sets up the data we are going to use in the request.
715 |       data = {
716 |         url:url, 
717 |         key: EMBEDLY_API_KEY, //Your Key
718 |         autoplay:true,
719 |         wmode : 'opaque',
720 |         maxwidth:500,
721 |         words:30
722 |       }
723 | 
724 |       // Make the request to Embedly. Note we are using the
725 |       // preview endpoint: http://embed.ly/docs/endpoints/1/preview
726 |       Ext.ux.JSONP.request('http://api.embed.ly/1/preview', {
727 |         callbackKey: 'callback',
728 |         params: data,
729 |         callback: Preview.metadataCallback
730 |       });      
731 |     },
732 |     
733 |     onKeyUp : function(e,t){
734 |       // Ignore Everthing but the spacebar Key event.
735 |       if (e.getKey() != 32) return null;
736 |       
737 |       //See if there is a url in the status textarea
738 |       var url = Preview.getStatusUrl();
739 |       if (url == null) return null;
740 |       
741 |       // If there is a url, then we need to unbind the event so it doesn't fire
742 |       // again. This is very common for all status updaters as otherwise it
743 |       // would create a ton of unwanted requests.
744 |       Ext.EventManager.un("id_status", 'keyup', Preview.onKeyUp);
745 |       
746 |       //Fire the fetch metadata function
747 |       Preview.fetchMetadata();
748 |     },
749 | 
750 |     //Binds all the Event Handlers
751 |     bind : function(){
752 |       //Form submission
753 |       Ext.EventManager.on("preview_form", "submit", Preview.Feed.submitFeedItem);
754 |       
755 |       //Embedly Functions
756 |       //Loses focus
757 |       Ext.EventManager.on("id_status", 'blur', Preview.fetchMetadata);
758 |       
759 |       //onPaste Event
760 |       Ext.EventManager.on("id_status", 'paste', function(){setTimeout(Preview.fetchMetadata, 250);});
761 | 
762 |       //onKeyUp Event
763 |       Ext.EventManager.on("id_status", 'keyup', Preview.onKeyUp);
764 |       
765 |       // key event listener for swapping themes, looking for CMD-' or CTRL-'
766 |       Ext.EventManager.addListener(document, 'keydown', function(e){
767 |         if(e.ctrlKey && e.getKey()=="222")
768 |           Preview.Display.swapStylesheets();
769 |       });
770 |       
771 |       //Bind the display Events
772 |       Preview.Display.bind();
773 |       
774 |       //Bind the Feed Events
775 |       Preview.Feed.bind();
776 |       
777 |     }
778 |   };
779 |   
780 |   Preview.Display = Display;
781 |   Preview.Feed = Feed;
782 |   return Preview;
783 | })();
784 | 
785 | Ext.onReady(function(){
786 |   //Once everything is ready bind the events.
787 |   Preview.bind();
788 | 
789 |   //set the default stylesheet and populate the feed accordingly
790 |   Preview.site = 'fb';
791 |   Preview.Display.swapStylesheets();
792 |   // hide the label if there's text in the form field
793 |   if(Ext.fly('id_status').dom.value != '')
794 |     Ext.fly('status_label').dom.style.display='none'
795 | });


--------------------------------------------------------------------------------
/readme.rest:
--------------------------------------------------------------------------------
  1 | Creating a Facebook-like URL submission tool with Embedly
  2 | =========================================================
  3 | 
  4 | One of our clients is currently using Ext and Embedly to implement a
  5 | Facebook-like link submission tool. While writing up some examples we went
  6 | overboard and ended up coding the whole thing. It's worth sharing with the
  7 | community as a whole, because we have seen this question many times before.
  8 | This post ended up being a lot longer than expected, some 4,000+ words
  9 | describing the process and design decisions that go into letting users submit
 10 | links. Herein lies the bible of using Embedly to create a URL submission tool
 11 | with `Ext Core <http://www.sencha.com/products/extcore/>`_.
 12 | 
 13 | First off, note that I am not an Ext expert. In fact this is the first I have
 14 | ever used the tool. While I disagree with its obsession with ids, I like how
 15 | Ext creates HTML and the ``fly`` method. If you see anything that is off or
 16 | just looks wrong, blame ignorance.
 17 | 
 18 | The final demo is hosted at `embedly.github.com/embedly-tutorial-ext
 19 | <http://embedly.github.com/embedly-tutorial-ext/>`_. You can submit a URL and
 20 | see how all the interactions work. The demo is optimized for modern browsers
 21 | and relies heavily on ``localStorage`` to display the Feed, so older browsers
 22 | will fail hard. The source code is available at 
 23 | `github.com/embedly/embedly-tutorial-ext
 24 | <https://github.com/embedly/embedly-tutorial-ext>`_. We encourage you to clone
 25 | it and follow along.
 26 | 
 27 | Overview
 28 | --------
 29 | 
 30 | What we are trying to build here is a fairly common design pattern that allows
 31 | users to preview the metadata for a link before submitting it to their feed. If
 32 | you have used Facebook, Google+, Yammer or any number of services you have seen
 33 | this before. Below are a few screenshots from various different services. 
 34 | 
 35 | Facebook
 36 | 
 37 | .. image:: https://github.com/embedly/embedly-tutorial-ext/raw/master/images/facebook.png
 38 | 
 39 | Yammer (Uses Embedly)
 40 | 
 41 | .. image:: https://github.com/embedly/embedly-tutorial-ext/raw/master/images/yammer.png
 42 | 
 43 | Google+
 44 | 
 45 | .. image:: https://github.com/embedly/embedly-tutorial-ext/raw/master/images/googleplus.png
 46 | 
 47 | The interface for all three are fairly similar. Each has a textarea for the
 48 | status and when a user enters a URL, they all recognize it and fetch the
 49 | metadata associated with the URL. The user can then select a thumbnail and
 50 | edit the title and description. The question is why? Well it turns out that
 51 | humans are much better at picking thumbnails, titles and descriptions than
 52 | algorithms will ever be. It's worth delving into an example and showing where
 53 | all the metadata comes from. We will use the `10k Apart
 54 | <http://10k.aneventapart.com/>`_ website as an example and this is a screenshot
 55 | of the homepage at the time of writing.
 56 | 
 57 | .. image:: https://github.com/embedly/embedly-tutorial-ext/raw/master/images/10kapart.png
 58 | 
 59 | Let's look at the metadata in the Facebook, Yammer, Google+ comparison from
 60 | above. The title is the same for each, but the first image and description
 61 | are different. Why is that? Each service uses a different set of algorithms to
 62 | pull data out of the page.  The `10k Apart <http://10k.aneventapart.com/>`_
 63 | site doesn't specify any ``image_src``, ``og:image``, ``decription`` or
 64 | ``og:description`` tags in the head of the html so it's everyman for themselves
 65 | . Pulling the best image or a great excerpt is hard and when we let code handle
 66 | it there is bound to be variance and incorrect data.
 67 | 
 68 | When it comes down to it though, it should be up to the user. Any of the three
 69 | images above could work, but at the end of the day a user, not code, will
 70 | always choose the best image. So the task is simple, create a form that allows
 71 | a user to input a URL and select the thumbnail, title and description they wish
 72 | to show. There are however a bunch of other considerations that you will
 73 | invariable end up coming across that we will look at as well.
 74 | 
 75 | Preview Endpoint
 76 | ----------------
 77 | 
 78 | One of Embedly's API endpoints was specifically made for this task. The 
 79 | `preview endpoint <http://embed.ly/docs/endpoints/1/preview>`_ expands on
 80 | oEmbed and passes back an array of images, content, place information, event
 81 | details as well as the normal oEmbed html data. It holds a lot of information,
 82 | but we are only going to use the following attributes. I'm going to go into
 83 | detail here because I think it's import that you know where the data is coming
 84 | from and how to use it.
 85 | 
 86 | type
 87 |     
 88 |     The type of the response that we got back from the server. 90% of the time
 89 |     you will get back a ``type`` of ``html``, but another very common one is
 90 |     ``image``. There is a whole list of `response types 
 91 |     <http://embed.ly/docs/endpoints/response#response-types>`_, but generally
 92 |     most people code for ``html`` and ``image`` and give up on the other types.
 93 |     Later we will go through what that actually means.
 94 | 
 95 | title
 96 | 
 97 |     Title of the page. Embedly looks for a title in the API response, the Open
 98 |     Graph title tag or the ``<title>`` tag in the head of the doc in that order
 99 |     . For 10k.aneventapart.com we found the title tag::
100 | 
101 |         <title>10K Apart - An Event Apart + Mix Online</title>
102 | 
103 | 
104 | description
105 | 
106 |     A description or brief excerpt from the page. Embedly looks for a title in
107 |     the API response, the Open Graph description, the
108 |     ``<meta name="description">`` tag in the head of the doc in that order. If
109 |     none of those exist, or are too short, Embedly will use an algorithm to try
110 |     to find a good excerpt from the page. It does this by looking for common
111 |     clues like a string of p tags, divs with lots of text at a similar depths
112 |     and a whole slue of other factors.
113 |    
114 |     Going back to the Facebook, Google+ and Yammer examples above here are the
115 |     descriptions that each give back
116 |    
117 |     Facebook:: 
118 |     
119 |         ''
120 | 
121 |     Google +:: 
122 |      
123 |         10k Apart Responsive Edition. Inspire the Web with Just 10k. Read the
124 |         Rules Submit an Entry. The Gallery. 1-1 of 1. Launch Details. Colorrrs.
125 |         Colorrrs. Dave Rupert. Enter Now. Enter Now. The Rules (FA...
126 | 
127 |     Yammer (Embedly)::
128 |    
129 |         Total file size including images, scripts & markup can't be over 10k
130 |         zipped. Details Use the approved list of libraries without it counting
131 |         against your 10K. Details We encourage HTML5, and apps must work
132 |         equally well in IE10 PP2, Firefox & a Webkit browser. Details
133 |         Applications need to be responsive.
134 |         
135 |     As you can see Facebook gave up and was unable to pull a description.
136 |     Google found the best first line, but quickly degrades to a bunch of
137 |     nonsense. Embedly found the largest body of text and tried to use that.
138 |     It's the longest and respects sentence structure, but the description of
139 |     the rules, not of the contest itself. The fun thing is, if you visit the
140 |     page, none of this text is initially viewable to the user. It's in divs
141 |     that are hidden by css, and therefore we have no way of knowing if they are
142 |     displayed or not.
143 |     
144 |     A user could easily intervene here and edit the description to something
145 |     that made a little more sense. As a side note, it's very easy to pull text
146 |     out of a page, it's hard to pull a good excerpt and it's even harder to
147 |     know when you should be displaying one at all.
148 | 
149 | images
150 | 
151 |     This is a JSON array of images of possible thumbnails for the user to
152 |     select. For 10k.aneventapart.com, the JSON array looks like this::
153 | 
154 |         [
155 |           {
156 |             "url": "http://10k.aneventapart.com/Uploads/501/Thumbnail1.jpg", 
157 |             "width": 600, 
158 |             "height": 400
159 |           },
160 |           {
161 |             "url": "http://10k.aneventapart.com/Content/img/enter_now.jpg", 
162 |             "width": 600, 
163 |             "height": 400
164 |           }, 
165 |           {
166 |             "url": "http://10k.aneventapart.com/Content/img/10k_logo.png", 
167 |             "width": 235, 
168 |             "height": 144
169 |           }
170 |         ]
171 | 
172 |     As you can see Embedly values the larger images in the middle of the page
173 |     greater than the smaller logo at the top of the page. Within the middle of
174 |     the page we value images that appear higher in the page.
175 | 
176 |     Images are pulled from a bunch of different sources: API responses, the
177 |     Open Graph image tag, the `image_src` link tag and the page itself. Embedly
178 |     follows all these images to get the correct height, width and verify that
179 |     they exist. Scoring these images is really complicated. Each image is
180 |     scored based on where they lie in the page, what the image type is, if they
181 |     matched a list of commonly used ad servers, did the image redirect and a
182 |     whole slew of other factors that have been added over time.
183 | 
184 |     Still with all these factors, it's hard to pick the right image every time.
185 | 
186 | provider_display
187 | 
188 |     ``provider_display`` is different from oEmbed's ``provider_name``. It is a
189 |     very easy way to get the domain of the provider. For example,
190 |     ``http://www.bbc.co.uk/news/science-environment-14391929`` has a
191 |     ``provider_display``` of ``www.bbc.co.uk`. This allows you to show a user
192 |     what domain they will be visiting.
193 | 
194 | provider_url
195 | 
196 |     ``provider_url`` works in conjunction with ``provider_display``. It's the
197 |     URL of the provider. Most of the time you can use it to link to the
198 |     provider like so::
199 |     
200 |         <a href="{{provider_url}}">{{provider_display}}</a>
201 | 
202 | object
203 | 
204 |     ``object`` is fairly similar to an oEmbed object, but striped down. The
205 |     idea here is that there is an object associated with the url that you
206 |     passed to Embedly. There are three types: ``photo``, ``video`` and ``rich``
207 |     . ``video`` and ``rich`` can be treated the same code wise when displaying
208 |     the embed. The ``html`` element can just be set to the innerHTML of the
209 |     feed item. Here is a simple example in js:
210 |     
211 |         if (preview.object.type in {'video':'', 'rich':''}){
212 |            Ext.fly('item').dom.innerHtml = preview.object.html;
213 |         }
214 |     
215 |     The ``photo`` is a little different in that it there is no ``html``
216 |     attribute, but a URL instead. You can very easily use it to build the html
217 |     though::
218 |     
219 |         if (preview.object.type == 'image'){
220 |            Ext.fly('item').dom.innerHtml = '<img src="'+preview.object.url'"/>';
221 |         }
222 |     
223 |     Note that we are *not* using the width and height attributes on the ``img``
224 |     tag. The images that are passed back are all different sizes so, it's best
225 |     to use the css style ``max-width`` like so::
226 |     
227 |         #item img {
228 |             max-width:400px;
229 |         }
230 |     
231 |     Don't bother messing with the height. People know how to scroll, so designs
232 |     that are tolerant to different heights of images are the best.
233 | 
234 | Retrieval
235 | ---------
236 | There are two sections to the feed; retrieval and display. Retrieval is the
237 | long section that describes grabbing metadata from Embedly and allowing the
238 | user to edit it before submission. Display is much shorter and just goes into
239 | tips and tricks for displaying the data.
240 | 
241 | We start off with the following simple form::
242 | 
243 |     <form action="." method="post">
244 |         <textarea id="id_status" name="status">
245 |         </textarea>
246 |         <input type="submit" value="Save"/>
247 |     </form>
248 | 
249 | And the base for our Preview obj that we will use to wire up all the supporting
250 | functions. You can use any of the 20 different object declaration patterns in
251 | JavaScript, ours just happens to look like this::
252 | 
253 |     var Preview = (function(){
254 |       var Preview = {};
255 |       return Preview;
256 |     })();
257 | 
258 | A user will come to your site in hopes of posting a status of some sort and
259 | this status may contain a link. There are a few events that we need to listen
260 | to here in order to create the desired effect: ``paste``, ``blur`` and
261 | ``keyup``.
262 | 
263 | paste
264 |     
265 |     Easily the most common way that users move links around. The event fires
266 |     after anything is pasted into the object you are listening on. In Ext you
267 |     can listen to the event like so::
268 |     
269 |         Ext.EventManager.on("id_status", 'paste', Preview.fetchMetadata);
270 |     
271 |     The ``paste`` event is a little inconsistent however and at least in Chrome
272 |     actually fires before the ``textarea`` is filled. Because of that it's
273 |     better to set a short timeout to make sure the pasted value is there::
274 |     
275 |         Ext.EventManager.on("id_status", 'paste', function(){
276 |             setTimeout(Preview.fetchMetadata, 250);
277 |         });
278 | 
279 | blur
280 | 
281 |     When the the status textarea loses focus we need to check if the user added
282 |     anything to it. While ``keyup`` and ``paste`` will catch 95% of the cases
283 |     this one is nice to have::
284 |     
285 |         Ext.EventManager.on("id_status", 'blur', Preview.fetchMetadata);
286 | 
287 | keyup
288 | 
289 |     If a user wants to be so bold that they actually type in the URL, we want
290 |     to fetch it as soon as they hit the spacebar. This one is a little more
291 |     tricky because if they are manually typing a url they may edit it a few
292 |     times causing repeat calls. While we are not going to worry about that here
293 |     it's just something to think about.
294 |     
295 |         Ext.EventManager.on("id_status", 'blur', Preview.onKeyUp);
296 |     
297 |     The ``onKeyUp`` function has a different set of rules than just
298 |     ``fetchMetadata`` as we have to listen for just the spacebar after a URL
299 |     has been entered::
300 | 
301 |         onKeyUp : function(e,t){
302 |           // Ignore Everything but the spacebar Key event.
303 |           if (e.getKey() != 32) return null;
304 | 
305 |           //See if there is a url in the status textarea
306 |           var url = Preview.getStatusUrl();
307 |           if (url == null) return null;
308 |   
309 |           // If there is a url, then we need to unbind the event so it doesn't
310 |           // fire again. This is very common for all status updaters as
311 |           // otherwise it would create a ton of unwanted requests.
312 |           Ext.EventManager.un("id_status", 'keyup', Preview.onKeyUp);
313 |   
314 |           //Fire the fetch metadata function
315 |           Preview.fetchMetadata();
316 |         },
317 | 
318 |     The ``unbind`` is very important here. A user may go back and edit the URL
319 |     a hundred times here. We assume they got it right the first time, otherwise
320 |     we will update the URL when the textarea loses focus.
321 | 
322 | Now that all the events are hooked up we need to pull the URL out of the status
323 | textarea. While we won't be handing multiple urls, it's fairly easy to pull out
324 | a single one::
325 | 
326 |     var status = Ext.fly('id_status').getValue();
327 | 
328 |     //Simple regex to make sure the url is valid.
329 |     var urlexp = /http(s?):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
330 | 
331 |     //Match the status against the urlexp
332 |     var matches = status.match(urlexp);
333 | 
334 |     return matches? matches[0] : null
335 | 
336 | This will catch any url as long as the user has entered the ``http`` or
337 | ``https`` scheme. As we know the scheme is becoming less and less prevalent and
338 | most users expect it to work if they leave out the ``http://``. For example it
339 | shouldn't matter if a user enters nyti.ms/qdGs9A or http://nyti.ms/qdGs9A. You
340 | could be clever here and just update the original regex, but I'm not, so I will
341 | create a new one.
342 | 
343 |     var urlexp = /[-\w]+(\.[a-z]{2,})+(\S+)?(\/|\/[\w#!:.?+=&%@!\-\/])?/g;
344 |     
345 |     var matches = status.match(urlexp);
346 |     
347 |     return matches? 'http://'+matches[0] : null
348 | 
349 | This regex is going to catch a number of false positives here. Users editing
350 | their statuses may type something like "I love it.seriously ..." which will
351 | trigger a request. You could do something clever with `publicsuffix.org
352 | <http://publicsuffix.org>`_ or just be better with regexes. What's interesting
353 | to note is that neither Facebook or Google Plus offer this feature. They both
354 | make you use the 'link' function in order to enter a URL without a scheme. They
355 | must know something or Facebook set the trend and Google+ just copied.
356 | 
357 | Once you actually have the URL from the status textarea we have to make a JSONP
358 | request to the Embedly Preview endpoint to get the metadata associated with
359 | that URL. I used ``jsonp.js`` that was bundled in ``examples/jsonp`` in the Ext
360 | Core download. Here is the code to get it done, then we will go into all the
361 | available options::
362 | 
363 |     // Sets up the parameters we are going to use in the request.
364 |     params = {
365 |       url:url, 
366 |       key:':key', // replace with your key. 
367 |       autoplay:true,
368 |       maxwidth:500,
369 |       wmode : 'opaque',
370 |       words : 30
371 |     }
372 | 
373 |     // Make the request to Embedly. Note we are using the preview endpoint:
374 |     // http://embed.ly/docs/endpoints/1/preview
375 |     Ext.ux.JSONP.request('http://api.embed.ly/1/preview', {
376 |       callbackKey: 'callback',
377 |       params: params,
378 |       callback: Preview.metadataCallback
379 |     });
380 | 
381 | When setting up the parameters you have a number of options. We are going to go
382 | into detail on a number of them here so you know just how each will effect your
383 | application.
384 | 
385 | url
386 | 
387 |     The ``url`` that you want to retrieve metadata for. Ext takes care of
388 |     encoding the URL, but if you aren't using a library you need to escape the
389 |     URL. Something like this works:
390 | 
391 |         var url = encodeURIComponent('http://embed.ly')
392 | 
393 | key
394 | 
395 |     Your Embedly API key. You can sign up for one at `embed.ly/pricing
396 |     <http://embed.ly/pricing>`_. This tutorial uses the Preview endpoint
397 |     which is only available at the "Starter" plan level and above.
398 | 
399 | maxwidth
400 | 
401 |     This is the maximum width of the embed in pixels. ``maxwidth`` is used for
402 |     scaling down embeds so they fit into a certain width. If the container for
403 |     an embed is 500px you should pass ``{ maxwidth: 500 }`` in the parameters.
404 |     For example, if you don’t set a ``maxwidth`` for the a Vimeo video Embedly
405 |     will return the following html::
406 | 
407 |         <iframe src="http://player.vimeo.com/video/18150336" width="1280"
408 |         height="720" frameborder="0"></iframe>
409 |     
410 |     This width may cause the embed to overflow the containing div. If we pass 
411 |     ``{ maxwidth: 500 }`` the html will be::
412 | 
413 |         <iframe src="http://player.vimeo.com/video/18150336" width="500"
414 |         height="281" frameborder="0"></iframe>
415 |     
416 |     It is highly recommended that developers pass a ``maxwidth`` to Embedly.
417 | 
418 | width
419 | 
420 |     ``width`` will scale embeds type rich and video to the exact ``width`` that
421 |     a developer specifies in pixels. Embeds smaller than this width will be
422 |     scaled up and embeds larger than this width will be scaled down. During the
423 |     scaling process the embed may become distorted, so if you can, it's best to
424 |     use the ``maxwidth`` parameter.
425 |     
426 |     Width is however really useful if you are working with a small set of
427 |     providers that you know scale really well. It will scale up embeds to give
428 |     a nice constant feel of every embed in your application.
429 | 
430 | wmode
431 | 
432 |     ``wmode`` will append the ``wmode`` value to the flash object. Possible
433 |     values include ``window``, ``opaque`` and ``transparent``. Generally you
434 |     always want to have ``{ wmode : 'opaque' }`` in the parameters. This
435 |     prevents embeds from being rendered on top of modals or other html
436 |     positioned on top of them.
437 | 
438 | autoplay
439 | 
440 |     Tells ``video`` embeds to start playing as soon as they are loaded.
441 |     Generally this is a reallyannoying feature of some sites, but in our case
442 |     it's a great feature. It allows us to start playing the video as soon as
443 |     the the user clicks on the thumbnail.
444 | 
445 | words
446 | 
447 |     The ``words`` parameter has a default value of 50 and works by trying to
448 |     split the description at the closest sentence to that word count. For
449 |     example, the following lorem ipsum description is made up of 33 words
450 |     and 5 sentences:
451 | 
452 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
453 |         dapibus auctor aliquam. Donec vitae justo ligula, id luctus ligula.
454 |         Duis eget mauris lacinia sapien aliquet vulputate a et orci. Sed eu
455 |         imperdiet sem.
456 | 
457 |     Now by default, Embedly will return all 33 words, but say you want only 20
458 |     words. By passing ``{ words : 20}`` Embedly would return:
459 | 
460 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
461 |         dapibus auctor aliquam. Donec vitae justo ligula, id luctus ligula.
462 |     
463 |     This is actually only 19 words, but we split at the closest sentence. Words
464 |     is really useful for controlling how long the descriptive text for each URL
465 |     is. In this case we are going to use 30 words to not overwhelm the page
466 |     with text.
467 |     
468 | chars
469 |     
470 |     ``chars`` is like ``words``, but instead of truncating to the nearest
471 |     sentence, Embedly will blindly truncate a description to the number of 
472 |     characters you specify adding ... at the end when needed. For the above 
473 |     description, if we set ``{ chars : 100 }`` it will return::
474 |     
475 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
476 |         dapibus auctor aliquam. Donec ...
477 | 
478 | 
479 | Display
480 | -------
481 | Once you make the request we have to deal with the data that we get back from
482 | Embedly. We discussed the different parts of the object that we are going to
483 | use earlier, now it's just putting together the pieces. A lot of this is
484 | actually up to the individual developer, but here are some tips an tricks. We
485 | declare the ``metadataCallback`` from before as::
486 | 
487 |     metadataCallback : function(obj){
488 |       // Deal with the object here.
489 |     }
490 | 
491 | The first thing you need to do is validate the request. Every obj should have a
492 | ``type``. If it's not there this is a clear sign that something is off. This is
493 | a basic check to make sure we should proceed. Generally will never happen, but
494 | it's a nice to have just in case::
495 | 
496 |     if (!obj.hasOwnProperty('type')){
497 |         console.log('Embedly returned an invalid response');
498 |         return false;
499 |     }
500 | 
501 | The next thing you need to make sure that there isn't an error. If Embedly
502 | is sent an invalid URL, the URL returns a 404 or some other error Embedly will
503 | return an object of type ``error``. In this general case the default workflow
504 | should occur. Generally you need not alert the user, just proceed as everything
505 | is happening normally::
506 | 
507 |     if (obj.type == 'error'){
508 |         console.log('URL ('+obj.url+') returned an error: '+ obj.error_message); 
509 |         return false;
510 |     }
511 | 
512 | At this point you have a response that you can work with, but you need to
513 | filter out types that you do not want to handle. In this case we will only be
514 | handling ``html`` and ``image`` type responses. Others link ``pdf`` of
515 | ``video`` we can build in another day::
516 | 
517 |     if (!(obj.type in {'html':'', 'image':''})){
518 |         console.log('URL ('+obj.url+') returned a type ('+obj.type+') not handled'); 
519 |         return false;
520 |     }
521 | 
522 | To wire up the form to work on POST we need to set all the attributes to hidden
523 | inputs within the form. When the user is done and hits submit it will send all
524 | this data back to the server for saving. To do this we iterate over a list of
525 | elements we want to save::
526 | 
527 |     Ext.each(Preview.attrs, function(n){
528 |       Ext.DomHelper.append('preview_form', {
529 |         tag:'input',
530 |         name : n,
531 |         type : 'hidden',
532 |         id : 'id_'+n,
533 |         value : obj.hasOwnProperty(n) && obj[n] ? encodeURIComponent(obj[n]): ''
534 |       });
535 |     });
536 | 
537 | You can set ``Preview.attrs`` to pretty much anything you want, but in our case
538 | we use:
539 | 
540 |     attrs : ['type', 'original_url', 'url', 'title', 'description', 
541 |             'favicon_url', 'provider_url', 'provider_display', 'safe',
542 |             'html', 'thumbnail_url'],
543 | 
544 | The last part of the ``metadataCallback`` function is handing off the obj to be
545 | rendered by a ``Display`` object. The ``Display`` object lets us change how the
546 | link preview is displayed without worrying about how it effects the ``Preview``
547 | object. It also helped us create multiple versions of the demo::
548 | 
549 |     Preview.Display.render(obj);
550 | 
551 | Rendering the link form is actually pretty boring. You show read the `code 
552 | <https://github.com/embedly/embedly-tutorial-ext/blob/master/js/preview.js#L109>`_
553 | , but at the end of the day, it's going to be up to you. The only
554 | thing to remember is to to update the hidden inputs with the correct values
555 | after the user has changed any data. For example we run this after a user has
556 | updated the title::
557 | 
558 |     Ext.fly('id_title').dom.value = encodeURIComponent(elem.dom.value);
559 | 
560 | Now it's all about saving the data. You can do it as a basic ``post``, but why
561 | make the user wait around for the save to happen? Instead we can write the
562 | status to the feed and save it asynchronously. This way, to the user, it
563 | appears as though the save happened instantaneously. First we need to bind a
564 | callback to the ``submit`` handler of the form.
565 | 
566 |     Ext.EventManager.on("preview_form", "submit", Preview.Feed.submitFeedItem);
567 | 
568 | The ``Feed`` object is like ``Display`` in that we can switch in and out
569 | different implementations for various effects. The basic ``Feed`` object holds
570 | the CRUD functions for a set of data:: 
571 | 
572 |     var Feed = {
573 |       createFeedItem : function (data){}},
574 |       storeFeedItem: function(data){},
575 |       populateFeed: function(){},
576 |       submitFeedItem: function(e,t){},
577 |       deleteFeedItem: function(e,t){}
578 |     }
579 | 
580 | The ``submitFeedItem`` call back need to pull out all the data out of the form
581 | like so::
582 | 
583 |     var data = {};
584 |     // Get the data we need out of the form.
585 |     Ext.select('#preview_form input').each(function(e){
586 |       data[e.dom.name] = decodeURIComponent(e.dom.value)
587 |     });
588 | 
589 |     //Create the Feed Item and display it in the feed.
590 |     Preview.Feed.createFeedItem(data);
591 |     
592 |     //Save the Feed Item
593 |     Preview.Feed.storeFeedItem(data);
594 | 
595 | Note that when we grab the data out of the form we need to decode it via the
596 | ``decodeURIComponent`` function. Once that data is out of the form, we can then
597 | use it to create a feed item on the fly and then save it. The basic structure
598 | of a feed item for us looks like so::
599 | 
600 |     <div class="item">
601 |       <a class="favicon" href="{{provider_url}}" title="{{provider_display}}">
602 |         <img src="{{favicon_url}}">
603 |       </a>
604 |       <a class="title" href="{{url}}">{{title}}</a>
605 |       <div class="thumbnail">
606 |         <a href="#">
607 |           <img src="{{thumbnail_url}}">
608 |         </a>
609 |       </div>
610 |       <div class="info">
611 |         <a class="provider" href="{{provider_url}}">{{provider_display}}</a>
612 |         <p>{{description}}</p>
613 |         <a class="close" href="#">x</a>
614 |       </div>
615 |     </div>
616 | 
617 | We build that via a giant JSON object that you can see `here  <https://github.com/embedly/embedly-tutorial-ext/blob/master/js/preview.js#L440>`_
618 | . The important thing here is to also save the item data into div as data
619 | properties. The HTML5 spec describes a method for saving off `custom data
620 | attributes <http://dev.w3.org/html5/spec/Overview.html#custom-data-attribute>`_
621 | that we will use here. To add these attributes the the outer div ``.item`` we
622 | can use something like this when building the JSON object::
623 | 
624 |     Ext.each(Preview.attrs, function(n){
625 |       elem['data-'+(n == 'html' ? 'embed' : n)] = encodeURIComponent(data[n])
626 |     });
627 | 
628 | We change the ``data-html`` to ``data-embed`` because it appears to be reserved
629 | by Ext or the browser, but I didn't investigate to deeply. Once this is in
630 | place we can get the title for any item like so::
631 | 
632 |     elem.dom.dataset.title;
633 | 
634 | To be on the safe side of browser bugs we still use::
635 | 
636 |     elem.dom.getAttribute('data-title')
637 | 
638 | Using these data attributes we can create an event to autoplay the video when
639 | a user clicks the thumbnail. In order the accomplish this we need to know that
640 | the url has a video associated with it. In the ``metadataCallback`` from above
641 | we actually change the ``type`` of the embed after we do a number of the checks
642 | to ``video`` or ``rich`` instead of ``html``. We do this by updating the hidden
643 | inputs to have the correct values::
644 | 
645 |     if (obj.object && obj.object.type in {'video':'', 'rich':''}){
646 |       Ext.fly('id_html').dom.value = obj.object.html;
647 |       Ext.fly('id_type').dom.value = obj.object.type;
648 |     }
649 | 
650 | If the type is ``video`` or ``rich`` we change the the thumbnail html to look
651 | like so::
652 | 
653 |     <a href="#" class="video">
654 |         <img src="{{thumbnail_url}}">
655 |         <span class="player_overlay"></span>
656 |     </a>
657 | 
658 | This creates an embed that looks like
659 | 
660 | .. image:: https://github.com/embedly/embedly-tutorial-ext/raw/master/images/rdio_item.png
661 | 
662 | We can then use Ext to bind the click event to the ``Feed.playVideo`` callback::
663 | 
664 |     Ext.getBody().on('click', Preview.Feed.playVideo, null, {delegate: 'a.video'});
665 | 
666 | When the event is fired we can then replace the contents of the '.item' div
667 | with the embed html that we saved in custom data attributes::
668 | 
669 |     playVideo : function(e,t){
670 |       e.preventDefault(); 
671 |       // Get the parent '.item' div
672 |       var elem = Ext.fly(t).parent('.item');
673 |       // Set the '.items' content to the 'data-embed' value. 
674 |       elem.dom.innerHTML = decodeURIComponent(elem.dom.getAttribute('data-embed'));
675 |     },
676 | 
677 | Once a user clicks the thumbnail, the end result looks like this:
678 | 
679 | .. image:: https://github.com/embedly/embedly-tutorial-ext/raw/master/images/rdio_expanded.png
680 | 
681 | While we could add a few other features here, we have chosen to keep it simple.
682 | Hopefully you have a good understanding of how all the parts fit together and
683 | can build on additional features. Definitely check out the `demo
684 | <http://embedly.github.com/embedly-tutorial-ext>`_ and the `source code 
685 | <https://github.com/embedly/embedly-tutorial-ext>`_ for this project. It's
686 | heavily documented and deals with some of the little things like loading
687 | notifications.
688 | 
689 | If you have any questions or comments you can send us a note to
690 | support@embed.ly or submit an `issue 
691 | <https://github.com/embedly/embedly-tutorial-ext/issues>`_.


--------------------------------------------------------------------------------