├── .gitignore ├── LICENSE.md ├── README.md └── app ├── api ├── Application.cfc ├── delete.cfm ├── index.cfm ├── list.cfm ├── models │ └── ImageCollection.cfc └── upload.cfm ├── css └── app.css ├── index.htm ├── js ├── images │ ├── image-list-uploader-directive.js │ ├── image-uploader-directive.js │ ├── images-controller.js │ └── images-service.js ├── main.js └── services │ ├── natural-sort-service.js │ └── plupload-service.js ├── less └── app.less └── vendor ├── angular └── angular-1.2.18.min.js ├── jquery └── jquery-2.1.1.min.js └── plupload ├── Moxie.swf ├── moxie.js ├── plupload.dev.js └── plupload.full.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Ignore the CodeKit 2 project file. 3 | config.codekit 4 | 5 | # Ignore the files in the uploads. 6 | app/uploads/ -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | # The MIT License (MIT) 3 | 4 | Copyright (c) 2013 [Ben Nadel][1] 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of 7 | this software and associated documentation files (the "Software"), to deal in 8 | the Software without restriction, including without limitation the rights to 9 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 10 | the Software, and to permit persons to whom the Software is furnished to do so, 11 | subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 18 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 19 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 20 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 21 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | 23 | [1]: http://www.bennadel.com -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Using Plupload To Upload Files In AngularJS 3 | 4 | by [Ben Nadel][bennadel] (on [Google+][googleplus]) 5 | 6 | I use [Plupload][plupload] a lot. It's really an amazing file-upload tool that supports all kinds 7 | off cool stuff like multiple dropzones and client-size rendering. I really can't give it enough 8 | praise - it's just totally awesome. I also use [AngularJS][angularjs] a lot, which is outstanding 9 | JavaScript framework. But, I haven't really done anything all that interesting with them together. 10 | Sure, I've used Plupload inside AngularJS before; but, I've never done anything with multiple 11 | dropzones. As such, I figured I better start experimenting. 12 | 13 | This project isn't about any one thing in particular. I just wanted to get more comfortable with 14 | using Plupload in AngularJS so that I could start to think about how I wanted to refine my 15 | approach. Which is to say, this project doesn't necessarily reflect the most refined approach - 16 | it's simply what I got working. 17 | 18 | 19 | [bennadel]: http://www.bennadel.com 20 | [googleplus]: https://plus.google.com/108976367067760160494?rel=author 21 | [plupload]: http://plupload.com 22 | [angularjs]: http://angularjs.org 23 | -------------------------------------------------------------------------------- /app/api/Application.cfc: -------------------------------------------------------------------------------- 1 | component 2 | output = false 3 | hint = "I define the application settings and event handler." 4 | { 5 | 6 | // Define the application settings. 7 | this.name = hash( getCurrentTemplatePath() ); 8 | this.applicationTimeout = createTimeSpan( 0, 1, 0, 0 ); 9 | this.sessionManagement = false; 10 | 11 | // Define the path mappings. 12 | this.mappings[ "/uploads" ] = ( getDirectoryFromPath( getCurrentTemplatePath() ) & "../uploads/" ); 13 | 14 | 15 | /** 16 | * I initialize the application and set up the shared data structures. 17 | * 18 | * @output false 19 | */ 20 | public boolean function onApplicationStart() { 21 | 22 | // I hold the image that were uploaded to the application. 23 | application.images = new models.ImageCollection(); 24 | 25 | // I hold the base image URL for the pulic uploads. Since we don't have a 26 | // real application container, we're just going to hard-code this value with 27 | // a relative path that is known for the app. 28 | application.baseImageUrl = "./uploads/"; 29 | 30 | // Return true so that the request can continue loading. 31 | return( true ); 32 | 33 | } 34 | 35 | 36 | /** 37 | * I initialize the request. 38 | * 39 | * @output false 40 | */ 41 | public boolean function onRequestStart( required string scriptName ) { 42 | 43 | // Check to see if the re-initialization flag has been passed. 44 | if ( structKeyExists( url, "init" ) ) { 45 | 46 | onApplicationStart(); 47 | 48 | } 49 | 50 | // Return true so that the request can continue loading. 51 | return( true ); 52 | 53 | } 54 | 55 | } -------------------------------------------------------------------------------- /app/api/delete.cfm: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Require the form fields. 4 | param name="form.id" type="numeric"; 5 | 6 | image = application.images.getImage( form.id ); 7 | 8 | // Delete the image "record". 9 | application.images.deleteImage( image.id ); 10 | 11 | // Delete the actual image binary. 12 | fileDelete( expandPath( "/uploads/#image.serverFile#" ) ); 13 | 14 | // Prepare API response. 15 | response.data = true; 16 | 17 | -------------------------------------------------------------------------------- /app/api/index.cfm: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Set up the response structure and default data. 4 | response = { 5 | statusCode = "200", 6 | statusText = "OK", 7 | data = "" 8 | }; 9 | 10 | // Try to route the API request. 11 | try { 12 | 13 | param name="url.action" type="string"; 14 | 15 | // By default, AngularJS posts content as JSON, as opposed to form data. To 16 | // make the API a bit easier to work with, I'm going to ASSUME that this is 17 | // always in struct format and just append it to the form. 18 | requestBody = toString( getHTTPRequestData().content ); 19 | 20 | if ( isJson( requestBody ) ) { 21 | 22 | structAppend( form, deserializeJson( requestBody ) ); 23 | 24 | } 25 | 26 | // Route the proper controller. 27 | switch ( url.action ) { 28 | 29 | case "delete": 30 | include "./delete.cfm"; 31 | break; 32 | 33 | case "list": 34 | include "./list.cfm"; 35 | break; 36 | 37 | case "upload": 38 | include "./upload.cfm"; 39 | break; 40 | 41 | default: 42 | throw( type = "App.InvalidAction" ); 43 | break; 44 | 45 | } 46 | 47 | // Catch an errors in order to normalize response. 48 | } catch ( any error ) { 49 | 50 | // Super light-weight error handling. Not the point of the experiment. 51 | response.statusCode = 500; 52 | response.statusText = "Server Error"; 53 | response.data = { 54 | "code" = -1, 55 | "message" = "Something went wrong - #error.message# - #serializeJson( duplicate( error ) )#" 56 | }; 57 | 58 | } 59 | 60 | 61 | 62 | 63 | 64 | 68 | 69 | 70 | 74 | -------------------------------------------------------------------------------- /app/api/list.cfm: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Set up the response structure. 4 | response.data = []; 5 | 6 | // Add each image to the response. 7 | // -- 8 | // NOTE: These are coming back in sort-order, so we don't have to do anything else. 9 | for ( image in application.images.getAllImages() ) { 10 | 11 | arrayAppend( 12 | response.data, 13 | { 14 | "id" = image.id, 15 | "clientFile" = image.clientFile, 16 | "serverFile" = image.serverFile, 17 | "sort" = image.sort, 18 | "url" = "#application.baseImageUrl##urlEncodedFormat( image.serverFile )#" 19 | } 20 | ); 21 | 22 | } 23 | 24 | -------------------------------------------------------------------------------- /app/api/models/ImageCollection.cfc: -------------------------------------------------------------------------------- 1 | component 2 | output = false 3 | hint = "I model the collection of images. NOTE: Image storage and URLs are managed outside of this model." 4 | { 5 | 6 | /** 7 | * I initialize the collection. 8 | * 9 | * @output false 10 | */ 11 | public any function init() { 12 | 13 | // I hold the images, in ascending sort order. 14 | images = []; 15 | 16 | return( this ); 17 | 18 | } 19 | 20 | 21 | // --- 22 | // PULIC METHODS. 23 | // --- 24 | 25 | 26 | /** 27 | * I add the given image to the collection. I return the ID of the image. 28 | * 29 | * @clientFile I am the filename as it appears on the original computer. 30 | * @serverFile I am the unique filename as it was saved on the server. 31 | * @sort I am the desires insertion point of the image in the current collection. 32 | * @output false 33 | */ 34 | public numeric function addImage( 35 | required string clientFile, 36 | required string serverFile, 37 | required numeric sort 38 | ) { 39 | 40 | // To keep this demo a super-simple as possible, we're going to use the current 41 | // tick-count to make sure the images have unique IDs. 42 | var id = getTickCount(); 43 | 44 | // If a valid sort value was not passed-in, just get the next available sort. 45 | if ( sort == -1 ) { 46 | 47 | sort = getNextSort(); 48 | 49 | } 50 | 51 | var image = { 52 | id = id, 53 | clientFile = clientFile, 54 | serverFile = serverFile, 55 | sort = sort 56 | }; 57 | 58 | // We are abount to insert the image in sort order; but, before we do that, we want 59 | // to bump each higher-sort image up so we can make room for the incoming image. 60 | incrementSortAbove( sort ); 61 | 62 | // Now that we've bumped the sort, insert the image into the sort. 63 | insertImageInSortOrder( image ); 64 | 65 | return( id ); 66 | 67 | } 68 | 69 | 70 | /** 71 | * I delete the image with the given ID. If the image could not be found, an error 72 | * is thrown. 73 | * 74 | * @id I am the unique ID of the image to delete. 75 | * @output false 76 | */ 77 | public void function deleteImage( required numeric id ) { 78 | 79 | for ( var i = 1 ; i <= arrayLen( images ) ; i++ ) { 80 | 81 | if ( images[ i ].id == id ) { 82 | 83 | arrayDeleteAt( images, i ); 84 | 85 | // The image has been deleted - nothing more to do. 86 | return; 87 | 88 | } 89 | 90 | } 91 | 92 | // If we made it this far, the image could not be found. 93 | throw( type = "App.NotFound" ); 94 | 95 | } 96 | 97 | 98 | /** 99 | * I get all of the image (in sort order). 100 | * 101 | * @output false 102 | */ 103 | public array function getAllImages() { 104 | 105 | // Return a duplicate of the collection so as not to break encapsulation. 106 | return( duplicate( images ) ); 107 | 108 | } 109 | 110 | 111 | /** 112 | * I get the image with the given ID. If the image cannot be found, an error is thrown. 113 | * 114 | * @id I am the unique ID of the image. 115 | * @output false 116 | */ 117 | public struct function getImage( required numeric id ) { 118 | 119 | for ( var image in images ) { 120 | 121 | if ( image.id == id ) { 122 | 123 | // Return a copy of the image so as not to break encapsulation. 124 | return( duplicate( image ) ); 125 | 126 | } 127 | 128 | } 129 | 130 | // If we made it this far, the image couldn't be found. 131 | throw( type = "App.NotFound" ); 132 | 133 | } 134 | 135 | 136 | // --- 137 | // PRIVATE METHODS. 138 | // --- 139 | 140 | 141 | /** 142 | * I get the next highest sort in the collection. 143 | * 144 | * @output false 145 | */ 146 | private numeric function getNextSort() { 147 | 148 | var maxSort = 0; 149 | 150 | for ( var image in images ) { 151 | 152 | maxSort = max( maxSort, image.sort ); 153 | 154 | } 155 | 156 | return( maxSort + 1 ); 157 | 158 | } 159 | 160 | 161 | /** 162 | * I increment all the sort values above the given sort value (by one). 163 | * 164 | * @sort I am the sort value at which to start the incrementing. 165 | * @output false 166 | */ 167 | private void function incrementSortAbove( required numeric sort ) { 168 | 169 | for ( var image in images ) { 170 | 171 | if ( image.sort >= sort ) { 172 | 173 | image.sort++; 174 | 175 | } 176 | 177 | } 178 | 179 | } 180 | 181 | 182 | /** 183 | * I insert the image into the images collection in the given, relative sort position 184 | * (based on the sort of the incoming image). 185 | * 186 | * @image I am the image being inserted. 187 | * @output false 188 | */ 189 | private void function insertImageInSortOrder( required struct image ) { 190 | 191 | for ( var i = 1 ; i <= arrayLen( images ) ; i++ ) { 192 | 193 | // Insert the image before the first image that we encouter that has a larger sort. 194 | if ( images[ i ].sort >= image.sort ) { 195 | 196 | arrayInsertAt( images, i, image ); 197 | 198 | // Return out - nothing else to do. 199 | return; 200 | 201 | } 202 | 203 | } 204 | 205 | // If we made it this far, the image was not been inserted - just add to the end. 206 | arrayAppend( images, image ); 207 | 208 | } 209 | 210 | } -------------------------------------------------------------------------------- /app/api/upload.cfm: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Require the form fields. 4 | param name="form.file" type="string"; 5 | param name="form.sort" type="numeric" default="-1"; 6 | 7 | // Save the actual binary. 8 | upload = fileUpload( 9 | expandPath( "/uploads/" ), 10 | "file", 11 | "", 12 | "makeUnique" 13 | ); 14 | 15 | // Add to the collection - this will assign a unique ID to the image "record". 16 | imageID = application.images.addImage( 17 | upload.clientFile, 18 | upload.serverFile, 19 | form.sort 20 | ); 21 | 22 | // Get the full image record. 23 | image = application.images.getImage( imageID ); 24 | 25 | // Prepare API response. 26 | response.data = { 27 | "id" = image.id, 28 | "clientFile" = image.clientFile, 29 | "serverFile" = image.serverFile, 30 | "sort" = image.sort, 31 | "url" = "#application.baseImageUrl##urlEncodedFormat( image.serverFile )#" 32 | }; 33 | 34 | // sleep( 1000 ); 35 | 36 | -------------------------------------------------------------------------------- /app/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #FFFFFF ; 3 | color: #333333 ; 4 | font-family: helvetica, verdana, arial ; 5 | margin: 10px 10px 10px 10px ; 6 | } 7 | a[ng-click] { 8 | cursor: pointer ; 9 | text-decoration: underline ; 10 | } 11 | div.m-uploader { 12 | background-color: #F0F0F0 ; 13 | border: 2px dashed #CCCCCC ; 14 | border-radius: 4px 4px 4px 4px ; 15 | cursor: pointer ; 16 | height: 100px ; 17 | margin: 20px 0px 20px 0px ; 18 | } 19 | div.m-uploader div.instructions { 20 | font-size: 20px ; 21 | height: 100px ; 22 | line-height: 104px ; 23 | text-align: center ; 24 | } 25 | div.m-uploader ul.queue { 26 | list-style-type: none ; 27 | margin: 0px 0px 0px 0px ; 28 | padding: 15px 15px 15px 15px ; 29 | } 30 | div.m-uploader ul.queue li.item { 31 | background-color: #FFFFFF ; 32 | border: 1px solid #CCCCCC ; 33 | border-radius: 3px 3px 3px 3px ; 34 | height: 50px ; 35 | float: left ; 36 | font-size: 14px ; 37 | font-weight: 800 ; 38 | line-height: 52px ; 39 | margin: 0px 10px 10px 0px ; 40 | text-align: center ; 41 | width: 50px ; 42 | } 43 | div.m-uploader ul.queue:after { 44 | content: ""; 45 | display: block ; 46 | clear: both ; 47 | height: 0px ; 48 | } 49 | div.m-uploader.uploading { 50 | border-color: #999999 ; 51 | } 52 | div.m-images { 53 | position: relative ; 54 | } 55 | div.m-images ul.images { 56 | list-style-type: none ; 57 | margin: 0px 0px 0px 0px ; 58 | padding: 0px 0px 0px 0px ; 59 | } 60 | div.m-images ul.images li.image { 61 | background-color: #FAFAFA ; 62 | border: 1px solid #CCCCCC ; 63 | border-radius: 3px 3px 3px 3px ; 64 | float: left ; 65 | height: 154px ; 66 | margin: 14px 14px 0px 0px ; 67 | padding: 15px 15px 1px 15px ; 68 | position: relative ; 69 | width: 150px ; 70 | } 71 | div.m-images ul.images li.image:hover a.delete { 72 | display: block ; 73 | } 74 | div.m-images ul.images div.thumbnail { 75 | border: 1px solid #E0E0E0 ; 76 | height: 115px ; 77 | margin: 0px 0px 10px 0px ; 78 | overflow: hidden ; 79 | width: 148px ; 80 | } 81 | div.m-images ul.images div.thumbnail img { 82 | border-width: 0px 0px 0px 0px ; 83 | display: block ; 84 | width: 148px ; 85 | } 86 | div.m-images ul.images div.name { 87 | font-size: 13px ; 88 | font-weight: bold ; 89 | overflow: hidden ; 90 | text-overflow: ellipsis ; 91 | white-space: nowrap ; 92 | width: 150px ; 93 | } 94 | div.m-images ul.images a.delete { 95 | background-color: #FFFFFF ; 96 | border: 2px solid #262626 ; 97 | border-radius: 20px 20px 20px 20px ; 98 | color: #262626 ; 99 | display: none ; 100 | font-weight: 800 ; 101 | height: 20px ; 102 | line-height: 20px ; 103 | position: absolute ; 104 | right: 6px ; 105 | text-align: center ; 106 | text-decoration: none ; 107 | top: 6px ; 108 | width: 20px ; 109 | } 110 | div.m-images ul.images div.drop-indicator { 111 | bottom: -10px; 112 | display: none ; 113 | left: -10px; 114 | position: absolute ; 115 | right: -10px; 116 | top: -10px; 117 | } 118 | div.m-images ul.images div.drop-indicator div.left { 119 | background-color: rgba(255, 255, 255, 0.01); 120 | bottom: 0px ; 121 | left: 0px ; 122 | position: absolute ; 123 | top: 0px ; 124 | width: 50% ; 125 | } 126 | div.m-images ul.images div.drop-indicator div.left:before { 127 | background-color: #FF33CC ; 128 | border-radius: 2px 2px 2px 2px ; 129 | bottom: 4px ; 130 | content: ""; 131 | display: none ; 132 | font-size: 1px ; 133 | left: 0px ; 134 | overflow: hidden ; 135 | position: absolute ; 136 | top: 4px ; 137 | width: 4px ; 138 | } 139 | div.m-images ul.images div.drop-indicator div.right { 140 | background-color: rgba(255, 255, 255, 0.01); 141 | bottom: 0px ; 142 | position: absolute ; 143 | right: 0px ; 144 | top: 0px ; 145 | width: 50% ; 146 | } 147 | div.m-images ul.images div.drop-indicator div.right:before { 148 | background-color: #FF33CC ; 149 | border-radius: 2px 2px 2px 2px ; 150 | bottom: 4px ; 151 | content: ""; 152 | display: none ; 153 | font-size: 1px ; 154 | overflow: hidden ; 155 | position: absolute ; 156 | right: 0px ; 157 | top: 4px ; 158 | width: 4px ; 159 | } 160 | div.m-images ul.images div.drop-indicator div.drop-here:before { 161 | display: block ; 162 | } 163 | div.m-images ul.images:after { 164 | content: ""; 165 | display: block ; 166 | clear: both ; 167 | height: 0px ; 168 | } 169 | div.m-images.pending-drop ul.images div.drop-indicator { 170 | display: block ; 171 | } 172 | -------------------------------------------------------------------------------- /app/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Using Plupload To Upload Files In AngularJS 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | Using Plupload To Upload Files In AngularJS 16 |

17 | 18 |
19 | 20 | 26 |
27 |
28 | 29 | 30 |
    31 |
  • 32 | 33 | {{ item.percent }}% 34 | 35 |
    • 36 |
37 | 38 | 39 |
40 | 41 | Select Files — or — Drag-n-Drop Files 42 | 43 |
44 | 45 |
46 |
47 | 48 | 52 |
53 | 54 |
    55 |
  • 56 | 57 |
    58 | 59 |
    60 | 61 |
    62 | {{ image.clientFile }} 63 |
    64 | 65 | × 66 | 67 | 73 |
    74 |

    75 |

    76 |
    77 | 78 |
    • 79 |
80 | 81 |
82 | 83 |
84 | 85 | 86 | 87 | 88 | 89 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /app/js/images/image-list-uploader-directive.js: -------------------------------------------------------------------------------- 1 | 2 | app.directive( 3 | "bnImageListUploader", 4 | function( $document, $rootScope, mOxie, naturalSort ) { 5 | 6 | // I bind the JavaScript events to the scope. 7 | function link( $scope, element, attributes ) { 8 | 9 | // I hold a reference to the current drop-indicator that the user is over. 10 | // This is the one with the insertion line next to it. 11 | var activeDropIndicator = null; 12 | 13 | // Since drag events are a nightmare to work with (for real, I mean like 14 | // really for real, they are horrible horrible things), we need to hack the 15 | // way we handle the de-activating of the element state. Instead of a true 16 | // leave event, we're actually just going to use a timer that will be 17 | // cancelled by the "drag" event, which fires continuously. 18 | var activeStateTeardownTimer = null; 19 | 20 | // Wiki: https://github.com/moxiecode/moxie/wiki/FileDrop 21 | var dropzone = new mOxie.FileDrop({ 22 | drop_zone: element[ 0 ] 23 | }); 24 | 25 | // Initialize the dropzone events. 26 | dropzone.bind( "drop", handleFileDrop ); 27 | dropzone.init(); 28 | 29 | // We have to kill the drag-start event otherwise, dragging elements and text 30 | // around on the page will incorrectly trigger our drag workflow. 31 | element.on( "dragstart", handleDragStartList ); 32 | 33 | // Prepare the list 34 | setupWaitingState(); 35 | 36 | // When the scope is destroyed, clean up all bindings. 37 | $scope.$on( 38 | "$destroy", 39 | function( event ) { 40 | 41 | dropzone.destroy(); 42 | 43 | } 44 | ); 45 | 46 | 47 | // --- 48 | // PRIVATE METHODS. 49 | // --- 50 | 51 | 52 | // Since you can initiate drag-events from simply clicking and dragging on 53 | // the screen, we don't want to confuse the file-based drag events. As such, 54 | // let's cancel any page-level drag events inside of the current element. 55 | function handleDragStartList( event ) { 56 | 57 | return( false ); 58 | 59 | } 60 | 61 | 62 | // I handle the drop of the file onto list the list-based dropzone. When we 63 | // catch this event, we're going to prepare the file to include the sort; 64 | // then, we're going to announce it so the other dropzone can know about it. 65 | function handleFileDrop( event ) { 66 | 67 | // If the user dropped multiple files, try to order the files using a 68 | // natural sort that treats embedded numbers like actual numbers. 69 | naturalSort( dropzone.files, "name" ); 70 | 71 | // If there is an active drop indicator, it means that the user dropped 72 | // the files into a particular portion of the list, not simply in the 73 | // general drop area. In such a case, we need to adjust the sort to 74 | // reflect the user's selected location. 75 | if ( activeDropIndicator ) { 76 | 77 | // Get the sort from the image in the current scope. 78 | var sortIndex = activeDropIndicator.scope().image.sort; 79 | 80 | // By default, we'll insert before select insert position; but, 81 | // if the "right" indicator was selected, we'll actually insert 82 | // after the current position (ie, before the next item). 83 | if ( activeDropIndicator.is( ".right" ) ) { 84 | 85 | sortIndex++; 86 | 87 | } 88 | 89 | // Since the user may have dropped multiple files at one time, we 90 | // have to adjust the sort of each file. If we don't then the files 91 | // will actually insert in reverse order. 92 | for ( var i = 0, length = dropzone.files.length ; i < length ; i++ ) { 93 | 94 | dropzone.files[ i ].sort = ( sortIndex + i ); 95 | 96 | } 97 | 98 | } 99 | 100 | // Announce the file drop so the main Plupload instance can get it. 101 | // -- 102 | // NOTE: Normally, you would need to tell AngularJS about the use of 103 | // the event system using an $apply() call; however, since all drop 104 | // events, including the ones on the primary Plupload instance, tie into 105 | // the same workflow, we can safely defer the call to $apply() to the 106 | // master Plupload instance. 107 | $rootScope.$broadcast( "imageFilesDropped", dropzone.files ); 108 | 109 | // Move back to the waiting state. 110 | teardownActiveState(); 111 | setupWaitingState(); 112 | 113 | } 114 | 115 | 116 | // I restart the activate state teardown timer, clearing it and then starting 117 | // it again. 118 | function restartActiveStateTeardownTimer() { 119 | 120 | stopActiveStateTeardownTimer(); 121 | startActiveStateTeardownTimer(); 122 | 123 | } 124 | 125 | 126 | // I set up the active state bindings. 127 | function setupActiveState() { 128 | 129 | element.addClass( "pending-drop" ); 130 | 131 | // Since the drag events are basically a NIGHTMARE to work with, we can't 132 | // simply bind to the dragleave event and deactivate the state. Instead, 133 | // we have to give the teardown a slight delay such that that a subsequent 134 | // "dragover" event may have a chance to cancel it. 135 | element.on( 136 | "dragleave", 137 | function handleDragleaveList( event ) { 138 | 139 | restartActiveStateTeardownTimer(); 140 | 141 | } 142 | ); 143 | 144 | // Since the dragenter and dragleave events are impossible to work with 145 | // across the different browsers, we're going to rely on the fact that 146 | // the dragover event fires continuously on the target element. Each time 147 | // this fires, we'll restart the "teardown" timer. 148 | // -- 149 | // NOTE: This is horribly inefficient, but I don't know what else to do. 150 | element.on( 151 | "dragover", 152 | "div.drop-indicator div.left, div.drop-indicator div.right", 153 | function( event ) { 154 | 155 | restartActiveStateTeardownTimer(); 156 | 157 | // If this is just a repeat event, ignore it (optimization). 158 | if ( activeDropIndicator && ( activeDropIndicator[ 0 ] === this ) ) { 159 | 160 | return; 161 | 162 | // Turn off the previous drop indicator. 163 | } else if ( activeDropIndicator ) { 164 | 165 | activeDropIndicator.removeClass( "drop-here" ); 166 | 167 | } 168 | 169 | activeDropIndicator = $( this ).addClass( "drop-here" ); 170 | 171 | } 172 | ); 173 | 174 | } 175 | 176 | 177 | // I setup the waiting state bindings. 178 | function setupWaitingState() { 179 | 180 | element.one( 181 | "dragover", 182 | function( event ) { 183 | 184 | setupActiveState(); 185 | 186 | } 187 | ); 188 | 189 | } 190 | 191 | 192 | // I start the active state teardown timer. 193 | function startActiveStateTeardownTimer() { 194 | 195 | activeStateTeardownTimer = setTimeout( 196 | function() { 197 | 198 | teardownActiveState(); 199 | setupWaitingState(); 200 | 201 | }, 202 | // This needs to be big enough to allow for the drag event to fire 203 | // at least once within the delayed interval. 204 | 100 205 | ); 206 | 207 | } 208 | 209 | 210 | // I clear the active state teardown timer. 211 | function stopActiveStateTeardownTimer() { 212 | 213 | clearTimeout( activeStateTeardownTimer ); 214 | 215 | } 216 | 217 | 218 | // I teardown the active state bindings. 219 | function teardownActiveState() { 220 | 221 | element 222 | .removeClass( "pending-drop" ) 223 | .off( "dragover dragleave" ) 224 | ; 225 | 226 | // If there is an active indicator, clear it. 227 | if ( activeDropIndicator ) { 228 | 229 | activeDropIndicator.removeClass( "drop-here" ); 230 | activeDropIndicator = null; 231 | 232 | } 233 | 234 | } 235 | 236 | } 237 | 238 | 239 | // Return the directive configuration. 240 | return({ 241 | link: link, 242 | restrict: "A" 243 | }); 244 | 245 | } 246 | ); 247 | -------------------------------------------------------------------------------- /app/js/images/image-uploader-directive.js: -------------------------------------------------------------------------------- 1 | 2 | app.directive( 3 | "bnImageUploader", 4 | function( $window, $document, $rootScope, $q, plupload, mOxie, naturalSort ) { 5 | 6 | // I model the queue of files exposed by the uploader to the child DOM. 7 | function PublicQueue() { 8 | 9 | // I contain the actual data structure that is exposed to the user. 10 | var queue = []; 11 | 12 | // I index the currently queued files by ID for easy reference. 13 | var fileIndex = {}; 14 | 15 | 16 | // I add the given file to the public queue. 17 | queue.addFile = function( file ) { 18 | 19 | var item = { 20 | id: file.id, 21 | name: file.name, 22 | size: file.size, 23 | loaded: file.loaded, 24 | percent: file.percent.toFixed( 0 ), 25 | status: file.status, 26 | isUploading: ( file.status === plupload.UPLOADING ) 27 | }; 28 | 29 | this.push( fileIndex[ item.id ] = item ); 30 | 31 | }; 32 | 33 | 34 | // I rebuild the queue. 35 | // -- 36 | // NOTE: Currently, the implementation of this doesn't take into account any 37 | // optimizations for rendering. If you use "track by" in your ng-repeat, 38 | // though, you should be ok. 39 | queue.rebuild = function( files ) { 40 | 41 | // Empty the queue. 42 | this.splice( 0, this.length ); 43 | 44 | // Cleaer the internal index. 45 | fileIndex = {}; 46 | 47 | // Add each file to the queue. 48 | for ( var i = 0, length = files.length ; i < length ; i++ ) { 49 | 50 | this.addFile( files[ i ] ); 51 | 52 | } 53 | 54 | }; 55 | 56 | 57 | // I update the percent loaded and state for the given file. 58 | queue.updateFile = function( file ) { 59 | 60 | // If we can't find this file, then ignore -- this can happen if the 61 | // progress event is fired AFTER the upload event (which it does 62 | // sometimes). 63 | if ( ! fileIndex.hasOwnProperty( file.id ) ) { 64 | 65 | return; 66 | 67 | } 68 | 69 | var item = fileIndex[ file.id ]; 70 | 71 | item.loaded = file.loaded; 72 | item.percent = file.percent.toFixed( 0 ); 73 | item.status = file.status; 74 | item.isUploading = ( file.status === plupload.UPLOADING ); 75 | 76 | }; 77 | 78 | 79 | return( queue ); 80 | 81 | } 82 | 83 | 84 | // I bind the JavaScript events to the scope. 85 | function link( $scope, element, attributes ) { 86 | 87 | // The uploader has to refernece the various elements using IDs. Rather than 88 | // crudding up the HTML, just insert the values dynamically here. 89 | element 90 | .attr( "id", "primaryUploaderContainer" ) 91 | .find( "div.dropzone" ) 92 | .attr( "id", "primaryUploaderDropzone" ) 93 | ; 94 | 95 | // Instantiate the Plupload uploader. 96 | var uploader = new plupload.Uploader({ 97 | 98 | // For this demo, we're only going to use the html5 runtime. I don't 99 | // want to have to deal with people who require flash - not this time, 100 | // I'm tired of it; plus, much of the point of this demo is to work with 101 | // the drag-n-drop, which isn't available in Flash. 102 | runtimes: "html5", 103 | 104 | // Upload the image to the API. 105 | url: "api/index.cfm?action=upload", 106 | 107 | // Set the name of file field (that contains the upload). 108 | file_data_name: "file", 109 | 110 | // The container, into which to inject the Input shim. 111 | container: "primaryUploaderContainer", 112 | 113 | // The ID of the drop-zone element. 114 | drop_element: "primaryUploaderDropzone", 115 | 116 | // To enable click-to-select-files, you can provide a browse button. 117 | // We can use the same one as the drop zone. 118 | browse_button: "primaryUploaderDropzone", 119 | 120 | // We don't have any parameters yet; but, let's create the object now 121 | // so that we can simply consume it later in the BeforeUpload event. 122 | multipart_params: {} 123 | 124 | }); 125 | 126 | // Initialize the plupload runtime. 127 | uploader.bind( "Error", handleError ); 128 | uploader.bind( "PostInit", handleInit ); 129 | uploader.bind( "FilesAdded", handleFilesAdded ); 130 | uploader.bind( "QueueChanged", handleQueueChanged ); 131 | uploader.bind( "BeforeUpload", handleBeforeUpload ); 132 | uploader.bind( "UploadProgress", handleUploadProgress ); 133 | uploader.bind( "FileUploaded", handleFileUploaded ); 134 | uploader.bind( "StateChanged", handleStateChanged ); 135 | uploader.init(); 136 | 137 | // I provide access to the file list inside of the directive. This can be 138 | // used to render the items being uploaded. 139 | $scope.queue = new PublicQueue(); 140 | 141 | // Wrap the window instance so we can get easy event binding. 142 | var win = $( $window ); 143 | 144 | // When the window is resized, we'll have to update the dimensions of the 145 | // input shim. 146 | win.on( "resize", handleWindowResize ); 147 | 148 | // Listen for drop events from other dropzones. 149 | $scope.$on( "imageFilesDropped", handleExternalFilesDropped ); 150 | 151 | // When the scope is destroyed, clean up bindings. 152 | $scope.$on( 153 | "$destroy", 154 | function() { 155 | 156 | win.off( "resize", handleWindowResize ); 157 | 158 | uploader.destroy(); 159 | 160 | } 161 | ); 162 | 163 | 164 | // --- 165 | // PRIVATE METHODS. 166 | // --- 167 | 168 | 169 | // I handle the before upload event where the meta data can be edited right 170 | // before the upload of a specific file, allowing for per-file settings. 171 | function handleBeforeUpload( uploader, file ) { 172 | 173 | var params = uploader.settings.multipart_params; 174 | var source = file.getSource(); 175 | 176 | // Delete any previous reference to sort. 177 | delete( params.sort ); 178 | 179 | // If the dropped/selected file has a sort option, then send it through. 180 | if ( "sort" in source ) { 181 | 182 | params.sort = source.sort; 183 | 184 | } 185 | 186 | } 187 | 188 | 189 | // I handle errors that occur during intialization or general operation of 190 | // the Plupload instance. 191 | function handleError( uploader, error ) { 192 | 193 | console.warn( "Plupload error" ); 194 | console.error( error ); 195 | 196 | } 197 | 198 | 199 | // I handle the event in which a user has dropped files onto an attached 200 | // dropzone - we just need to take those files and add them to the uploader. 201 | // This will initiate the normal files-added / queue-changed workflow. 202 | function handleExternalFilesDropped( event, files ) { 203 | 204 | uploader.addFile( files ); 205 | 206 | } 207 | 208 | 209 | // I handle the files-added event. This is different that the queue- 210 | // changed event. At this point, we have an opportunity to reject files from 211 | // the queue. 212 | function handleFilesAdded( uploader, files ) { 213 | 214 | // ------------------------------------------------------------------- // 215 | // BEGIN: JANKY SORTING HACK ----------------------------------------- // 216 | 217 | // This is a real hack; but, the files have actually ALREADY been added 218 | // to the internal Plupload queue; as such, we need to actually overwrite 219 | // the files that were just added. 220 | 221 | // If the user selected or dropped multiple files, try to order the files 222 | // using a natural sort that treats embedded numbers like actual numbers. 223 | naturalSort( files, "name" ); 224 | 225 | var length = files.length; 226 | var totalLength = uploader.files.length; 227 | 228 | // Rewrite the sort of the newly added files. 229 | for ( var i = 0 ; i < length ; i++ ) { 230 | 231 | // Swap the original insert with the sorted insert. 232 | uploader.files[ totalLength - length + i ] = files[ i ]; 233 | 234 | } 235 | 236 | // END: JANKY SORTING HACK ------------------------------------------- // 237 | // ------------------------------------------------------------------- // 238 | 239 | // Tell AngularJS that something has changed (the public queue will have 240 | // been updated at this point). 241 | $scope.$apply(); 242 | 243 | } 244 | 245 | 246 | // I handle the file-uploaded event. At this point, the image has been 247 | // uploaded and thumbnailed - we can now load that image in our uploads list. 248 | function handleFileUploaded( uploader, file, response ) { 249 | 250 | $scope.$apply( 251 | function() { 252 | 253 | // Broudcast the response from the server. 254 | $rootScope.$broadcast( 255 | "imageUploaded", 256 | angular.fromJson( response.response ) 257 | ); 258 | 259 | // Remove the file from the internal queue. 260 | uploader.removeFile( file ); 261 | 262 | } 263 | ); 264 | 265 | } 266 | 267 | 268 | // I handle the init event. At this point, we will know which runtime has 269 | // loaded, and whether or not drag-drop functionality is supported. 270 | function handleInit( uploader, params ) { 271 | 272 | // console.log( "Initialization complete." ); 273 | // console.log( "Drag-drop supported:", !! uploader.features.dragdrop ); 274 | 275 | } 276 | 277 | 278 | // I handle the queue changed event. When the queue changes, it gives us an 279 | // opportunity to programmatically start the upload process. This will be 280 | // triggered when files are both added to or removed (programmatically) from 281 | // the list (respectively). 282 | function handleQueueChanged( uploader ) { 283 | 284 | if ( uploader.files.length && isNotUploading() ){ 285 | 286 | uploader.start(); 287 | 288 | } 289 | 290 | $scope.queue.rebuild( uploader.files ); 291 | 292 | } 293 | 294 | 295 | // I handle the change in state of the uploader. 296 | function handleStateChanged( uploader ) { 297 | 298 | if ( isUploading() ) { 299 | 300 | element.addClass( "uploading" ); 301 | 302 | } else { 303 | 304 | element.removeClass( "uploading" ); 305 | 306 | } 307 | 308 | } 309 | 310 | 311 | // I get called when upload progress is made on the given file. 312 | // -- 313 | // CAUTION: This may get called one more time after the file has actually 314 | // been fully uploaded AND the uploaded event has already been called. 315 | function handleUploadProgress( uploader, file ) { 316 | 317 | $scope.$apply( 318 | function() { 319 | 320 | $scope.queue.updateFile( file ); 321 | 322 | } 323 | ); 324 | 325 | } 326 | 327 | 328 | // I handle the resizing of the browser window, which causes a resizing of 329 | // the input-shim used by the uploader. 330 | function handleWindowResize( event ) { 331 | 332 | uploader.refresh(); 333 | 334 | } 335 | 336 | 337 | // I determine if the upload is currently inactive. 338 | function isNotUploading() { 339 | 340 | return( uploader.state === plupload.STOPPED ); 341 | 342 | } 343 | 344 | 345 | // I determine if the uploader is currently uploading a file. 346 | function isUploading() { 347 | 348 | return( uploader.state === plupload.STARTED ); 349 | 350 | } 351 | 352 | } 353 | 354 | 355 | // Return the directive configuration. 356 | return({ 357 | link: link, 358 | restrict: "A", 359 | scope: true 360 | }); 361 | 362 | } 363 | ); 364 | -------------------------------------------------------------------------------- /app/js/images/images-controller.js: -------------------------------------------------------------------------------- 1 | 2 | app.controller( 3 | "ImagesController", 4 | function( $scope, imagesService ) { 5 | 6 | // I hold the uploaded images. 7 | $scope.images = []; 8 | 9 | // I handle upload events for the images (ie, the response from the server). 10 | $scope.$on( "imageUploaded", handleImageUploaded ); 11 | 12 | // Load the remote data from the server. 13 | loadRemoteData(); 14 | 15 | 16 | // --- 17 | // PUBLIC METHODS. 18 | // --- 19 | 20 | 21 | // I delete the given image. 22 | $scope.deleteImage = function( image ) { 23 | 24 | // Immediately remove the image locally - we'll assume best case scendario 25 | // with server-side communication; there's no reason that this should throw 26 | // an error on a normal usage basis. 27 | removeImage( image.id ); 28 | 29 | // Delete from remote data store. 30 | imagesService.deleteImage( image.id ).then( 31 | function( response ) { 32 | 33 | console.info( "Image deleted scucessfully." ); 34 | 35 | }, 36 | function( error ) { 37 | 38 | alert( "Oops! " + error.message ); 39 | 40 | } 41 | ); 42 | 43 | }; 44 | 45 | 46 | // --- 47 | // PRIVATE METHODS. 48 | // --- 49 | 50 | 51 | // I apply the remote data to the local scope. 52 | function applyRemoteData( images ) { 53 | 54 | $scope.images = images; 55 | 56 | } 57 | 58 | 59 | // I handle the image upload response from the server. 60 | function handleImageUploaded( event, image ) { 61 | 62 | // Before me insert the image, we have to update the sort for all of the 63 | // image that come after the image. This allows us to insert the image 64 | // with out actually refreshing the list with live data. 65 | incrementSortAbove( image.sort ); 66 | 67 | // Insert the image into the appropriate place in the collection. 68 | insertImageInSortOrder( image ); 69 | 70 | } 71 | 72 | 73 | // I increment the sort (+1) for each image sorted above the given sort. 74 | function incrementSortAbove( sort ) { 75 | 76 | for ( var i = 0, length = $scope.images.length ; i < length ; i++ ) { 77 | 78 | var image = $scope.images[ i ]; 79 | 80 | if ( image.sort >= sort ) { 81 | 82 | image.sort++; 83 | 84 | } 85 | 86 | } 87 | 88 | } 89 | 90 | 91 | // I insert the image into the appropriate place in the list (given its sort). 92 | function insertImageInSortOrder( image ) { 93 | 94 | // Insert the image before the first image that we encouter that has a 95 | // matching (or larger) sort. 96 | for ( var i = 0, length = $scope.images.length ; i < length ; i++ ) { 97 | 98 | if ( $scope.images[ i ].sort >= image.sort ) { 99 | 100 | return( $scope.images.splice( i, 0, image ) ); 101 | 102 | } 103 | 104 | } 105 | 106 | // If we made it this far, the image was not been inserted - just add to the end. 107 | $scope.images.push( image ); 108 | 109 | } 110 | 111 | 112 | // I get the remote data from the server. 113 | function loadRemoteData() { 114 | 115 | imagesService.getAllImages().then( 116 | function getAllImagesSuccess( response ) { 117 | 118 | applyRemoteData( response ); 119 | 120 | }, 121 | function getAllImagesError( error ) { 122 | 123 | 124 | alert( "Oops! " + error.message ); 125 | 126 | } 127 | ); 128 | 129 | } 130 | 131 | 132 | // I delete the image with the given ID from the local collection. 133 | function removeImage( id ) { 134 | 135 | for ( var i = 0, length = $scope.images.length ; i < length ; i++ ) { 136 | 137 | if ( $scope.images[ i ].id == id ) { 138 | 139 | return( $scope.images.splice( i, 1 ) ); 140 | 141 | } 142 | 143 | } 144 | 145 | } 146 | 147 | } 148 | ); 149 | -------------------------------------------------------------------------------- /app/js/images/images-service.js: -------------------------------------------------------------------------------- 1 | app.service( 2 | "imagesService", 3 | function( $http, $q ) { 4 | 5 | // Return the public API. 6 | return({ 7 | deleteImage: deleteImage, 8 | getAllImages: getAllImages 9 | }); 10 | 11 | 12 | // --- 13 | // PUBLIC METHODS. 14 | // --- 15 | 16 | 17 | // I delete the image with the given ID. 18 | function deleteImage( id ) { 19 | 20 | var request = $http({ 21 | method: "post", 22 | url: "api/index.cfm", 23 | params: { 24 | action: "delete" 25 | }, 26 | data: { 27 | id: id 28 | } 29 | }); 30 | 31 | return( request.then( handleSuccess, handleError ) ); 32 | 33 | } 34 | 35 | 36 | // I get all the images currently uploaded. 37 | function getAllImages() { 38 | 39 | var request = $http({ 40 | method: "get", 41 | url: "api/index.cfm", 42 | params: { 43 | action: "list" 44 | } 45 | }); 46 | 47 | return( request.then( handleSuccess, handleError ) ); 48 | 49 | } 50 | 51 | 52 | // --- 53 | // PRIVATE METHODS. 54 | // --- 55 | 56 | 57 | // I transform the error response, unwrapping the application dta from the API 58 | // response payload. 59 | function handleError( response ) { 60 | 61 | // The API response from the server should be returned in a nomralized 62 | // format. However, if the request was not handled by the server (or was 63 | // not handles properly - ex. server error), then we may have to normalize 64 | // it on our end, as best we can. 65 | if ( 66 | ! angular.isObject( response.data ) || 67 | ! response.data.message 68 | ) { 69 | 70 | return( 71 | $q.reject({ 72 | code: -1, 73 | message: "An unknown error occurred." 74 | }) 75 | ); 76 | 77 | } 78 | 79 | // Otherwise, use expected error message. 80 | return( $q.reject( response.data ) ); 81 | 82 | } 83 | 84 | 85 | // I transform the successful response, unwrapping the application data from the 86 | // API response payload. 87 | function handleSuccess( response ) { 88 | 89 | return( response.data ); 90 | 91 | } 92 | 93 | } 94 | ); -------------------------------------------------------------------------------- /app/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | // Define our AngularJS application. 3 | var app = angular.module( "PluploadApp", [] ); 4 | -------------------------------------------------------------------------------- /app/js/services/natural-sort-service.js: -------------------------------------------------------------------------------- 1 | 2 | app.factory( 3 | "naturalSort", 4 | function() { 5 | 6 | // I sort the given collection on the given top-level property using a natural 7 | // sort that attempts to treat embedded numbers like real numbers. 8 | function sort( collection, property ) { 9 | 10 | collection.sort( 11 | function( a, b ) { 12 | 13 | // Normalize the file names with fixed-width numeric data. 14 | var aMixed = normalizeMixedDataValue( a[ property ] ); 15 | var bMixed = normalizeMixedDataValue( b[ property ] ); 16 | 17 | return( aMixed < bMixed ? -1 : 1 ); 18 | 19 | } 20 | ); 21 | 22 | } 23 | 24 | 25 | // Return factory value. 26 | return( sort ); 27 | 28 | 29 | // --- 30 | // PRIVATE METHODS. 31 | // --- 32 | 33 | 34 | function normalizeMixedDataValue( value ) { 35 | 36 | var padding = "000000000000000"; 37 | 38 | // Loop over all numeric values in the string and replace them with a value 39 | // of a fixed-width for both leading (integer) and trailing (decimal) padded 40 | // zeroes. 41 | value = value.replace( 42 | /(\d+)((\.\d+)+)?/g, 43 | function( $0, integer, decimal, $3 ) { 44 | 45 | // If this numeric value has "multiple" decimal portions, then the 46 | // complexity is too high for this simple approach - just return the 47 | // padded integer. 48 | if ( decimal !== $3 ) { 49 | 50 | return( 51 | padding.slice( integer.length ) + 52 | integer + 53 | decimal 54 | ); 55 | 56 | } 57 | 58 | decimal = ( decimal || ".0" ); 59 | 60 | return( 61 | padding.slice( integer.length ) + 62 | integer + 63 | decimal + 64 | padding.slice( decimal.length ) 65 | ); 66 | 67 | } 68 | ); 69 | 70 | return( value ); 71 | 72 | } 73 | 74 | } 75 | ); 76 | -------------------------------------------------------------------------------- /app/js/services/plupload-service.js: -------------------------------------------------------------------------------- 1 | 2 | app.factory( 3 | "plupload", 4 | function() { 5 | 6 | // Return the global Plupload reference so that it can be injected, 7 | // proper-like, into our directives. 8 | return( plupload ); 9 | 10 | } 11 | ); 12 | 13 | app.factory( 14 | "mOxie", 15 | function() { 16 | 17 | // Return the global mOxie reference so that it can be injected, 18 | // proper-like, into our directives. 19 | return( mOxie ); 20 | 21 | } 22 | ); 23 | -------------------------------------------------------------------------------- /app/less/app.less: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: #FFFFFF ; 4 | color: #333333 ; 5 | font-family: helvetica, verdana, arial ; 6 | margin: 10px 10px 10px 10px ; 7 | } // END: body. 8 | 9 | a[ ng-click ] { 10 | cursor: pointer ; 11 | text-decoration: underline ; 12 | } 13 | 14 | div.m-uploader { 15 | background-color: #F0F0F0 ; 16 | border: 2px dashed #CCCCCC ; 17 | border-radius: 4px 4px 4px 4px ; 18 | cursor: pointer ; 19 | height: 100px ; 20 | margin: 20px 0px 20px 0px ; 21 | 22 | div.instructions { 23 | font-size: 20px ; 24 | height: 100px ; 25 | line-height: 104px ; 26 | text-align: center ; 27 | } 28 | 29 | ul.queue { 30 | list-style-type: none ; 31 | margin: 0px 0px 0px 0px ; 32 | padding: 15px 15px 15px 15px ; 33 | 34 | li.item { 35 | background-color: #FFFFFF ; 36 | border: 1px solid #CCCCCC ; 37 | border-radius: 3px 3px 3px 3px ; 38 | height: 50px ; 39 | float: left ; 40 | font-size: 14px ; 41 | font-weight: 800 ; 42 | line-height: 52px ; 43 | margin: 0px 10px 10px 0px ; 44 | text-align: center ; 45 | width: 50px ; 46 | } 47 | 48 | &:after { 49 | content: "" ; 50 | display: block ; 51 | clear: both ; 52 | height: 0px ; 53 | } 54 | } 55 | 56 | // div.m-uploader -- variations. 57 | 58 | &.uploading { 59 | border-color: #999999 ; 60 | } 61 | } // END: div.m-images. 62 | 63 | div.m-images { 64 | position: relative ; 65 | 66 | ul.images { 67 | list-style-type: none ; 68 | margin: 0px 0px 0px 0px ; 69 | padding: 0px 0px 0px 0px ; 70 | 71 | li.image { 72 | background-color: #FAFAFA ; 73 | border: 1px solid #CCCCCC ; 74 | border-radius: 3px 3px 3px 3px ; 75 | float: left ; 76 | height: 154px ; 77 | margin: 14px 14px 0px 0px ; 78 | padding: 15px 15px 1px 15px ; 79 | position: relative ; 80 | width: 150px ; 81 | 82 | // li.image -- variations. 83 | 84 | &:hover { 85 | a.delete { 86 | display: block ; 87 | } 88 | } 89 | } 90 | 91 | div.thumbnail { 92 | border: 1px solid #E0E0E0 ; 93 | height: 115px ; 94 | margin: 0px 0px 10px 0px ; 95 | overflow: hidden ; 96 | width: 148px ; 97 | 98 | img { 99 | border-width: 0px 0px 0px 0px ; 100 | display: block ; 101 | width: 148px ; 102 | } 103 | } 104 | 105 | div.name { 106 | font-size: 13px ; 107 | font-weight: bold ; 108 | overflow: hidden ; 109 | text-overflow: ellipsis ; 110 | white-space: nowrap ; 111 | width: 150px ; 112 | } 113 | 114 | a.delete { 115 | background-color: #FFFFFF ; 116 | border: 2px solid #262626 ; 117 | border-radius: 20px 20px 20px 20px ; 118 | color: #262626 ; 119 | display: none ; 120 | font-weight: 800 ; 121 | height: 20px ; 122 | line-height: 20px ; 123 | position: absolute ; 124 | right: 6px ; 125 | text-align: center ; 126 | text-decoration: none ; 127 | top: 6px ; 128 | width: 20px ; 129 | } 130 | 131 | div.drop-indicator { 132 | bottom: -10px ; 133 | display: none ; 134 | left: -10px ; 135 | position: absolute ; 136 | right: -10px ; 137 | top: -10px ; 138 | 139 | div.left { 140 | background-color: rgba( 255, 255, 255, .01 ) ; 141 | bottom: 0px ; 142 | left: 0px ; 143 | position: absolute ; 144 | top: 0px ; 145 | width: 50% ; 146 | 147 | &:before { 148 | background-color: #FF33CC ; 149 | border-radius: 2px 2px 2px 2px ; 150 | bottom: 4px ; 151 | content: "" ; 152 | display: none ; 153 | font-size: 1px ; 154 | left: 0px ; 155 | overflow: hidden ; 156 | position: absolute ; 157 | top: 4px ; 158 | width: 4px ; 159 | } 160 | } 161 | 162 | div.right { 163 | background-color: rgba( 255, 255, 255, .01 ) ; 164 | bottom: 0px ; 165 | position: absolute ; 166 | right: 0px ; 167 | top: 0px ; 168 | width: 50% ; 169 | 170 | &:before { 171 | background-color: #FF33CC ; 172 | border-radius: 2px 2px 2px 2px ; 173 | bottom: 4px ; 174 | content: "" ; 175 | display: none ; 176 | font-size: 1px ; 177 | overflow: hidden ; 178 | position: absolute ; 179 | right: 0px ; 180 | top: 4px ; 181 | width: 4px ; 182 | } 183 | } 184 | 185 | div.drop-here { 186 | &:before { 187 | display: block ; 188 | } 189 | } 190 | } 191 | 192 | &:after { 193 | content: "" ; 194 | display: block ; 195 | clear: both ; 196 | height: 0px ; 197 | } 198 | } 199 | 200 | // div.m-images -- variations. 201 | 202 | &.pending-drop { 203 | ul.images { 204 | div.drop-indicator { 205 | display: block ; 206 | } 207 | } 208 | } 209 | } // END: div.m-images. -------------------------------------------------------------------------------- /app/vendor/jquery/jquery-2.1.1.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v2.1.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ 2 | !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.1",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return n.each(this,a,b)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){return!n.isArray(a)&&a-parseFloat(a)>=0},isPlainObject:function(a){return"object"!==n.type(a)||a.nodeType||n.isWindow(a)?!1:a.constructor&&!j.call(a.constructor.prototype,"isPrototypeOf")?!1:!0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=l.createElement("script"),b.text=a,l.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=s(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:g.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,f=0,g=a.length,h=s(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);else for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(e=d.call(arguments,2),f=function(){return a.apply(b||this,e.concat(d.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:k}),n.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+-new Date,v=a.document,w=0,x=0,y=gb(),z=gb(),A=gb(),B=function(a,b){return a===b&&(l=!0),0},C="undefined",D=1<<31,E={}.hasOwnProperty,F=[],G=F.pop,H=F.push,I=F.push,J=F.slice,K=F.indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(this[b]===a)return b;return-1},L="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",N="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",O=N.replace("w","w#"),P="\\["+M+"*("+N+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+O+"))|)"+M+"*\\]",Q=":("+N+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+P+")*)|.*)\\)|)",R=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),S=new RegExp("^"+M+"*,"+M+"*"),T=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),V=new RegExp(Q),W=new RegExp("^"+O+"$"),X={ID:new RegExp("^#("+N+")"),CLASS:new RegExp("^\\.("+N+")"),TAG:new RegExp("^("+N.replace("w","w*")+")"),ATTR:new RegExp("^"+P),PSEUDO:new RegExp("^"+Q),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+L+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/^(?:input|select|textarea|button)$/i,Z=/^h\d$/i,$=/^[^{]+\{\s*\[native \w/,_=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ab=/[+~]/,bb=/'|\\/g,cb=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),db=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)};try{I.apply(F=J.call(v.childNodes),v.childNodes),F[v.childNodes.length].nodeType}catch(eb){I={apply:F.length?function(a,b){H.apply(a,J.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fb(a,b,d,e){var f,h,j,k,l,o,r,s,w,x;if((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,d=d||[],!a||"string"!=typeof a)return d;if(1!==(k=b.nodeType)&&9!==k)return[];if(p&&!e){if(f=_.exec(a))if(j=f[1]){if(9===k){if(h=b.getElementById(j),!h||!h.parentNode)return d;if(h.id===j)return d.push(h),d}else if(b.ownerDocument&&(h=b.ownerDocument.getElementById(j))&&t(b,h)&&h.id===j)return d.push(h),d}else{if(f[2])return I.apply(d,b.getElementsByTagName(a)),d;if((j=f[3])&&c.getElementsByClassName&&b.getElementsByClassName)return I.apply(d,b.getElementsByClassName(j)),d}if(c.qsa&&(!q||!q.test(a))){if(s=r=u,w=b,x=9===k&&a,1===k&&"object"!==b.nodeName.toLowerCase()){o=g(a),(r=b.getAttribute("id"))?s=r.replace(bb,"\\$&"):b.setAttribute("id",s),s="[id='"+s+"'] ",l=o.length;while(l--)o[l]=s+qb(o[l]);w=ab.test(a)&&ob(b.parentNode)||b,x=o.join(",")}if(x)try{return I.apply(d,w.querySelectorAll(x)),d}catch(y){}finally{r||b.removeAttribute("id")}}}return i(a.replace(R,"$1"),b,d,e)}function gb(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function hb(a){return a[u]=!0,a}function ib(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function jb(a,b){var c=a.split("|"),e=a.length;while(e--)d.attrHandle[c[e]]=b}function kb(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||D)-(~a.sourceIndex||D);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function lb(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function mb(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function nb(a){return hb(function(b){return b=+b,hb(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function ob(a){return a&&typeof a.getElementsByTagName!==C&&a}c=fb.support={},f=fb.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fb.setDocument=function(a){var b,e=a?a.ownerDocument||a:v,g=e.defaultView;return e!==n&&9===e.nodeType&&e.documentElement?(n=e,o=e.documentElement,p=!f(e),g&&g!==g.top&&(g.addEventListener?g.addEventListener("unload",function(){m()},!1):g.attachEvent&&g.attachEvent("onunload",function(){m()})),c.attributes=ib(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ib(function(a){return a.appendChild(e.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=$.test(e.getElementsByClassName)&&ib(function(a){return a.innerHTML="
",a.firstChild.className="i",2===a.getElementsByClassName("i").length}),c.getById=ib(function(a){return o.appendChild(a).id=u,!e.getElementsByName||!e.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if(typeof b.getElementById!==C&&p){var c=b.getElementById(a);return c&&c.parentNode?[c]:[]}},d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){var c=typeof a.getAttributeNode!==C&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return typeof b.getElementsByTagName!==C?b.getElementsByTagName(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return typeof b.getElementsByClassName!==C&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=$.test(e.querySelectorAll))&&(ib(function(a){a.innerHTML="",a.querySelectorAll("[msallowclip^='']").length&&q.push("[*^$]="+M+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+M+"*(?:value|"+L+")"),a.querySelectorAll(":checked").length||q.push(":checked")}),ib(function(a){var b=e.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+M+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=$.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ib(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",Q)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=$.test(o.compareDocumentPosition),t=b||$.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===e||a.ownerDocument===v&&t(v,a)?-1:b===e||b.ownerDocument===v&&t(v,b)?1:k?K.call(k,a)-K.call(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,f=a.parentNode,g=b.parentNode,h=[a],i=[b];if(!f||!g)return a===e?-1:b===e?1:f?-1:g?1:k?K.call(k,a)-K.call(k,b):0;if(f===g)return kb(a,b);c=a;while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)i.unshift(c);while(h[d]===i[d])d++;return d?kb(h[d],i[d]):h[d]===v?-1:i[d]===v?1:0},e):n},fb.matches=function(a,b){return fb(a,null,null,b)},fb.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(U,"='$1']"),!(!c.matchesSelector||!p||r&&r.test(b)||q&&q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fb(b,n,null,[a]).length>0},fb.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fb.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&E.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fb.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fb.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fb.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fb.selectors={cacheLength:50,createPseudo:hb,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(cb,db),a[3]=(a[3]||a[4]||a[5]||"").replace(cb,db),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fb.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fb.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return X.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&V.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(cb,db).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+M+")"+a+"("+M+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||typeof a.getAttribute!==C&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fb.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h;if(q){if(f){while(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){k=q[u]||(q[u]={}),j=k[a]||[],n=j[0]===w&&j[1],m=j[0]===w&&j[2],l=n&&q.childNodes[n];while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[w,n,m];break}}else if(s&&(j=(b[u]||(b[u]={}))[a])&&j[0]===w)m=j[1];else while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(s&&((l[u]||(l[u]={}))[a]=[w,m]),l===b))break;return m-=e,m===d||m%d===0&&m/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fb.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?hb(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=K.call(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:hb(function(a){var b=[],c=[],d=h(a.replace(R,"$1"));return d[u]?hb(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),!c.pop()}}),has:hb(function(a){return function(b){return fb(a,b).length>0}}),contains:hb(function(a){return function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:hb(function(a){return W.test(a||"")||fb.error("unsupported lang: "+a),a=a.replace(cb,db).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Z.test(a.nodeName)},input:function(a){return Y.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:nb(function(){return[0]}),last:nb(function(a,b){return[b-1]}),eq:nb(function(a,b,c){return[0>c?c+b:c]}),even:nb(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:nb(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:nb(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:nb(function(a,b,c){for(var d=0>c?c+b:c;++db;b++)d+=a[b].value;return d}function rb(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[u]||(b[u]={}),(h=i[d])&&h[0]===w&&h[1]===f)return j[2]=h[2];if(i[d]=j,j[2]=a(b,c,g))return!0}}}function sb(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function tb(a,b,c){for(var d=0,e=b.length;e>d;d++)fb(a,b[d],c);return c}function ub(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function vb(a,b,c,d,e,f){return d&&!d[u]&&(d=vb(d)),e&&!e[u]&&(e=vb(e,f)),hb(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||tb(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ub(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ub(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?K.call(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ub(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):I.apply(g,r)})}function wb(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=rb(function(a){return a===b},h,!0),l=rb(function(a){return K.call(b,a)>-1},h,!0),m=[function(a,c,d){return!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d))}];f>i;i++)if(c=d.relative[a[i].type])m=[rb(sb(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return vb(i>1&&sb(m),i>1&&qb(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(R,"$1"),c,e>i&&wb(a.slice(i,e)),f>e&&wb(a=a.slice(e)),f>e&&qb(a))}m.push(c)}return sb(m)}function xb(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,m,o,p=0,q="0",r=f&&[],s=[],t=j,u=f||e&&d.find.TAG("*",k),v=w+=null==t?1:Math.random()||.1,x=u.length;for(k&&(j=g!==n&&g);q!==x&&null!=(l=u[q]);q++){if(e&&l){m=0;while(o=a[m++])if(o(l,g,h)){i.push(l);break}k&&(w=v)}c&&((l=!o&&l)&&p--,f&&r.push(l))}if(p+=q,c&&q!==p){m=0;while(o=b[m++])o(r,s,g,h);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=G.call(i));s=ub(s)}I.apply(i,s),k&&!f&&s.length>0&&p+b.length>1&&fb.uniqueSort(i)}return k&&(w=v,j=t),r};return c?hb(f):f}return h=fb.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wb(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xb(e,d)),f.selector=a}return f},i=fb.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(cb,db),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=X.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(cb,db),ab.test(j[0].type)&&ob(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qb(j),!a)return I.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,ab.test(a)&&ob(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ib(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ib(function(a){return a.innerHTML="","#"===a.firstChild.getAttribute("href")})||jb("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ib(function(a){return a.innerHTML="",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||jb("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ib(function(a){return null==a.getAttribute("disabled")})||jb(L,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fb}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=n.expr.match.needsContext,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^.[^:#\[\.,]*$/;function x(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(w.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return g.call(b,a)>=0!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(x(this,a||[],!1))},not:function(a){return this.pushStack(x(this,a||[],!0))},is:function(a){return!!x(this,"string"==typeof a&&u.test(a)?n(a):a||[],!1).length}});var y,z=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,A=n.fn.init=function(a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:z.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||y).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:l,!0)),v.test(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}return d=l.getElementById(c[2]),d&&d.parentNode&&(this.length=1,this[0]=d),this.context=l,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof y.ready?y.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};A.prototype=n.fn,y=n(l);var B=/^(?:parents|prev(?:Until|All))/,C={children:!0,contents:!0,next:!0,prev:!0};n.extend({dir:function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},sibling:function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c}}),n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=u.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.unique(f):f)},index:function(a){return a?"string"==typeof a?g.call(n(a),this[0]):g.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.unique(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function D(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return n.dir(a,"parentNode")},parentsUntil:function(a,b,c){return n.dir(a,"parentNode",c)},next:function(a){return D(a,"nextSibling")},prev:function(a){return D(a,"previousSibling")},nextAll:function(a){return n.dir(a,"nextSibling")},prevAll:function(a){return n.dir(a,"previousSibling")},nextUntil:function(a,b,c){return n.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return n.dir(a,"previousSibling",c)},siblings:function(a){return n.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return n.sibling(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(C[a]||n.unique(e),B.test(a)&&e.reverse()),this.pushStack(e)}});var E=/\S+/g,F={};function G(a){var b=F[a]={};return n.each(a.match(E)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?F[a]||G(a):n.extend({},a);var b,c,d,e,f,g,h=[],i=!a.once&&[],j=function(l){for(b=a.memory&&l,c=!0,g=e||0,e=0,f=h.length,d=!0;h&&f>g;g++)if(h[g].apply(l[0],l[1])===!1&&a.stopOnFalse){b=!1;break}d=!1,h&&(i?i.length&&j(i.shift()):b?h=[]:k.disable())},k={add:function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this},remove:function(){return h&&n.each(arguments,function(a,b){var c;while((c=n.inArray(b,h,c))>-1)h.splice(c,1),d&&(f>=c&&f--,g>=c&&g--)}),this},has:function(a){return a?n.inArray(a,h)>-1:!(!h||!h.length)},empty:function(){return h=[],f=0,this},disable:function(){return h=i=b=void 0,this},disabled:function(){return!h},lock:function(){return i=void 0,b||k.disable(),this},locked:function(){return!i},fireWith:function(a,b){return!h||c&&!i||(b=b||[],b=[a,b.slice?b.slice():b],d?i.push(b):j(b)),this},fire:function(){return k.fireWith(this,arguments),this},fired:function(){return!!c}};return k},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=d.call(arguments),e=c.length,f=1!==e||a&&n.isFunction(a.promise)?e:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(e){b[a]=this,c[a]=arguments.length>1?d.call(arguments):e,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(e>1)for(i=new Array(e),j=new Array(e),k=new Array(e);e>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().done(h(b,k,c)).fail(g.reject).progress(h(b,j,i)):--f;return f||g.resolveWith(k,c),g.promise()}});var H;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(H.resolveWith(l,[n]),n.fn.triggerHandler&&(n(l).triggerHandler("ready"),n(l).off("ready"))))}});function I(){l.removeEventListener("DOMContentLoaded",I,!1),a.removeEventListener("load",I,!1),n.ready()}n.ready.promise=function(b){return H||(H=n.Deferred(),"complete"===l.readyState?setTimeout(n.ready):(l.addEventListener("DOMContentLoaded",I,!1),a.addEventListener("load",I,!1))),H.promise(b)},n.ready.promise();var J=n.access=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)n.access(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f};n.acceptData=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function K(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=n.expando+Math.random()}K.uid=1,K.accepts=n.acceptData,K.prototype={key:function(a){if(!K.accepts(a))return 0;var b={},c=a[this.expando];if(!c){c=K.uid++;try{b[this.expando]={value:c},Object.defineProperties(a,b)}catch(d){b[this.expando]=c,n.extend(a,b)}}return this.cache[c]||(this.cache[c]={}),c},set:function(a,b,c){var d,e=this.key(a),f=this.cache[e];if("string"==typeof b)f[b]=c;else if(n.isEmptyObject(f))n.extend(this.cache[e],b);else for(d in b)f[d]=b[d];return f},get:function(a,b){var c=this.cache[this.key(a)];return void 0===b?c:c[b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=this.key(a),g=this.cache[f];if(void 0===b)this.cache[f]={};else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in g?d=[b,e]:(d=e,d=d in g?[d]:d.match(E)||[])),c=d.length;while(c--)delete g[d[c]]}},hasData:function(a){return!n.isEmptyObject(this.cache[a[this.expando]]||{})},discard:function(a){a[this.expando]&&delete this.cache[a[this.expando]]}};var L=new K,M=new K,N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(O,"-$1").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}M.set(a,b,c)}else c=void 0;return c}n.extend({hasData:function(a){return M.hasData(a)||L.hasData(a)},data:function(a,b,c){return M.access(a,b,c)},removeData:function(a,b){M.remove(a,b) 3 | },_data:function(a,b,c){return L.access(a,b,c)},_removeData:function(a,b){L.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=M.get(f),1===f.nodeType&&!L.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d])));L.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){M.set(this,a)}):J(this,function(b){var c,d=n.camelCase(a);if(f&&void 0===b){if(c=M.get(f,a),void 0!==c)return c;if(c=M.get(f,d),void 0!==c)return c;if(c=P(f,d,void 0),void 0!==c)return c}else this.each(function(){var c=M.get(this,d);M.set(this,d,b),-1!==a.indexOf("-")&&void 0!==c&&M.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){M.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=L.get(a,b),c&&(!d||n.isArray(c)?d=L.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return L.get(a,c)||L.access(a,c,{empty:n.Callbacks("once memory").add(function(){L.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.lengthx",k.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var U="undefined";k.focusinBubbles="onfocusin"in a;var V=/^key/,W=/^(?:mouse|pointer|contextmenu)|click/,X=/^(?:focusinfocus|focusoutblur)$/,Y=/^([^.]*)(?:\.(.+)|)$/;function Z(){return!0}function $(){return!1}function _(){try{return l.activeElement}catch(a){}}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return typeof n!==U&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(E)||[""],j=b.length;while(j--)h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g,!1)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.hasData(a)&&L.get(a);if(r&&(i=r.events)){b=(b||"").match(E)||[""],j=b.length;while(j--)if(h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&(delete r.handle,L.remove(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,m,o,p=[d||l],q=j.call(b,"type")?b.type:b,r=j.call(b,"namespace")?b.namespace.split("."):[];if(g=h=d=d||l,3!==d.nodeType&&8!==d.nodeType&&!X.test(q+n.event.triggered)&&(q.indexOf(".")>=0&&(r=q.split("."),q=r.shift(),r.sort()),k=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=r.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},e||!o.trigger||o.trigger.apply(d,c)!==!1)){if(!e&&!o.noBubble&&!n.isWindow(d)){for(i=o.delegateType||q,X.test(i+q)||(g=g.parentNode);g;g=g.parentNode)p.push(g),h=g;h===(d.ownerDocument||l)&&p.push(h.defaultView||h.parentWindow||a)}f=0;while((g=p[f++])&&!b.isPropagationStopped())b.type=f>1?i:o.bindType||q,m=(L.get(g,"events")||{})[b.type]&&L.get(g,"handle"),m&&m.apply(g,c),m=k&&g[k],m&&m.apply&&n.acceptData(g)&&(b.result=m.apply(g,c),b.result===!1&&b.preventDefault());return b.type=q,e||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!n.acceptData(d)||k&&n.isFunction(d[q])&&!n.isWindow(d)&&(h=d[k],h&&(d[k]=null),n.event.triggered=q,d[q](),n.event.triggered=void 0,h&&(d[k]=h)),b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(L.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(g.namespace))&&(a.handleObj=g,a.data=g.data,e=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(a.result=e)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!==this;i=i.parentNode||this)if(i.disabled!==!0||"click"!==a.type){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>=0:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h]*)\/>/gi,bb=/<([\w:]+)/,cb=/<|&#?\w+;/,db=/<(?:script|style|link)/i,eb=/checked\s*(?:[^=]|=\s*.checked.)/i,fb=/^$|\/(?:java|ecma)script/i,gb=/^true\/(.*)/,hb=/^\s*\s*$/g,ib={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};ib.optgroup=ib.option,ib.tbody=ib.tfoot=ib.colgroup=ib.caption=ib.thead,ib.th=ib.td;function jb(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function kb(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function lb(a){var b=gb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function mb(a,b){for(var c=0,d=a.length;d>c;c++)L.set(a[c],"globalEval",!b||L.get(b[c],"globalEval"))}function nb(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(L.hasData(a)&&(f=L.access(a),g=L.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}M.hasData(a)&&(h=M.access(a),i=n.extend({},h),M.set(b,i))}}function ob(a,b){var c=a.getElementsByTagName?a.getElementsByTagName(b||"*"):a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function pb(a,b){var c=b.nodeName.toLowerCase();"input"===c&&T.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}n.extend({clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=ob(h),f=ob(a),d=0,e=f.length;e>d;d++)pb(f[d],g[d]);if(b)if(c)for(f=f||ob(a),g=g||ob(h),d=0,e=f.length;e>d;d++)nb(f[d],g[d]);else nb(a,h);return g=ob(h,"script"),g.length>0&&mb(g,!i&&ob(a,"script")),h},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,k=b.createDocumentFragment(),l=[],m=0,o=a.length;o>m;m++)if(e=a[m],e||0===e)if("object"===n.type(e))n.merge(l,e.nodeType?[e]:e);else if(cb.test(e)){f=f||k.appendChild(b.createElement("div")),g=(bb.exec(e)||["",""])[1].toLowerCase(),h=ib[g]||ib._default,f.innerHTML=h[1]+e.replace(ab,"<$1>")+h[2],j=h[0];while(j--)f=f.lastChild;n.merge(l,f.childNodes),f=k.firstChild,f.textContent=""}else l.push(b.createTextNode(e));k.textContent="",m=0;while(e=l[m++])if((!d||-1===n.inArray(e,d))&&(i=n.contains(e.ownerDocument,e),f=ob(k.appendChild(e),"script"),i&&mb(f),c)){j=0;while(e=f[j++])fb.test(e.type||"")&&c.push(e)}return k},cleanData:function(a){for(var b,c,d,e,f=n.event.special,g=0;void 0!==(c=a[g]);g++){if(n.acceptData(c)&&(e=c[L.expando],e&&(b=L.cache[e]))){if(b.events)for(d in b.events)f[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);L.cache[e]&&delete L.cache[e]}delete M.cache[c[M.expando]]}}}),n.fn.extend({text:function(a){return J(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?n.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||n.cleanData(ob(c)),c.parentNode&&(b&&n.contains(c.ownerDocument,c)&&mb(ob(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(ob(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return J(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!db.test(a)&&!ib[(bb.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(ab,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ob(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,n.cleanData(ob(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,m=this,o=l-1,p=a[0],q=n.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&eb.test(p))return this.each(function(c){var d=m.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(c=n.buildFragment(a,this[0].ownerDocument,!1,this),d=c.firstChild,1===c.childNodes.length&&(c=d),d)){for(f=n.map(ob(c,"script"),kb),g=f.length;l>j;j++)h=c,j!==o&&(h=n.clone(h,!0,!0),g&&n.merge(f,ob(h,"script"))),b.call(this[j],h,j);if(g)for(i=f[f.length-1].ownerDocument,n.map(f,lb),j=0;g>j;j++)h=f[j],fb.test(h.type||"")&&!L.access(h,"globalEval")&&n.contains(i,h)&&(h.src?n._evalUrl&&n._evalUrl(h.src):n.globalEval(h.textContent.replace(hb,"")))}return this}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),g=e.length-1,h=0;g>=h;h++)c=h===g?this:this.clone(!0),n(e[h])[b](c),f.apply(d,c.get());return this.pushStack(d)}});var qb,rb={};function sb(b,c){var d,e=n(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:n.css(e[0],"display");return e.detach(),f}function tb(a){var b=l,c=rb[a];return c||(c=sb(a,b),"none"!==c&&c||(qb=(qb||n("