From b976d39207dda9852ed53ac367cb321913a2fd4a Mon Sep 17 00:00:00 2001 From: Christophe Dumez Date: Sat, 5 Dec 2009 14:19:37 +0000 Subject: [PATCH] - Update to MochaUI svn/trunk * Fixes IE7/8 compatibility - Use Yui compressor on mocha.js --- src/httpconnection.cpp | 2 +- src/webui.qrc | 7 +- src/webui/css/Core.css | 54 + src/webui/css/Layout.css | 414 + src/webui/css/Tabs.css | 66 + src/webui/css/Window.css | 371 + src/webui/css/mocha.css | 1038 -- src/webui/css/style.css | 54 + src/webui/download.html | 1 - src/webui/downloadlimit.html | 2 +- src/webui/index.html | 34 +- src/webui/preferences.html | 2 +- src/webui/prop-files.html | 1 + src/webui/prop-general.html | 1 + src/webui/prop-trackers.html | 1 + src/webui/scripts/client.js | 24 +- src/webui/scripts/excanvas-compressed.js | 895 +- src/webui/scripts/mocha-init.js | 8 +- src/webui/scripts/mocha-yc.js | 1 + src/webui/scripts/mocha.js | 10873 ++++++++++++--------- src/webui/scripts/mootools-1.2-more.js | 290 +- src/webui/upload.html | 12 +- src/webui/uploadframe.html | 4 +- src/webui/uploadlimit.html | 2 +- 24 files changed, 8367 insertions(+), 5790 deletions(-) create mode 100644 src/webui/css/Core.css create mode 100644 src/webui/css/Layout.css create mode 100644 src/webui/css/Tabs.css create mode 100644 src/webui/css/Window.css delete mode 100644 src/webui/css/mocha.css create mode 100644 src/webui/scripts/mocha-yc.js diff --git a/src/httpconnection.cpp b/src/httpconnection.cpp index f9bcfb57e..b8e961ff1 100644 --- a/src/httpconnection.cpp +++ b/src/httpconnection.cpp @@ -207,7 +207,7 @@ void HttpConnection::respond() ext.clear(); QByteArray data = file.readAll(); // Translate the page - if(ext == "html" || ext == "js") { + if(ext == "html" || (ext == "js" && !list.last().startsWith("excanvas"))) { data = translateDocument(QString::fromUtf8(data.data())).toUtf8(); } generator.setStatusLine(200, "OK"); diff --git a/src/webui.qrc b/src/webui.qrc index 7864dd0d2..b6e1c0599 100644 --- a/src/webui.qrc +++ b/src/webui.qrc @@ -14,11 +14,14 @@ webui/uploadlimit.html webui/downloadlimit.html webui/preferences.html - webui/css/mocha.css + webui/css/Core.css + webui/css/Layout.css + webui/css/Window.css + webui/css/Tabs.css webui/css/dynamicTable.css webui/css/style.css webui/scripts/excanvas-compressed.js - webui/scripts/mocha.js + webui/scripts/mocha-yc.js webui/scripts/mocha-init.js webui/scripts/mootools-1.2-core-yc.js webui/scripts/mootools-1.2-more.js diff --git a/src/webui/css/Core.css b/src/webui/css/Core.css new file mode 100644 index 000000000..5475e1e52 --- /dev/null +++ b/src/webui/css/Core.css @@ -0,0 +1,54 @@ +/* + +Core.css for Mocha UI + +Theme: Default + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Notes: + CSS rules in this file: + + 1. Rules required by all MochaUI components or are shared by more than one. + 2. Theme specific ajustments to plugin styles. + 3. Miscellaneous rules that have no better place to go. + +*/ + +/* Required By All +---------------------------------------------------------------- */ + +/* Clears */ + +.clear { + clear: both; + height: 0; +} + +* html .clear { + font-size: 1px; + line-height: 1px; + overflow: hidden; + visibility: hidden; +} + +/* Miscellaneous +---------------------------------------------------------------- */ + +#themeControl { + margin-top: 2px; +} + + +/* Theme Specific Adjustments to Default Plugin Styles +---------------------------------------------------------------- */ + +/* Folder Tree */ + +.tree li a { + color: #3f3f3f !important; +} diff --git a/src/webui/css/Layout.css b/src/webui/css/Layout.css new file mode 100644 index 000000000..a3b4130ad --- /dev/null +++ b/src/webui/css/Layout.css @@ -0,0 +1,414 @@ +/* + +Core.css for Mocha UI + +Theme: Default + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Required by: + Layout.js + +*/ + +/* Layout +---------------------------------------------------------------- */ + +html, body { + background: #fff; +} + +body { + margin: 0; /* Required */ +} + +#desktop { + position: relative; + min-width: 400px; /* Helps keep header content from wrapping */ + height: 100%; + min-height: 100%; + overflow: hidden; + cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */ +} + +#desktopHeader { + background: #f2f2f2; +} + +#desktopTitlebarWrapper { + position: relative; + height: 45px; + overflow: hidden; + background: #718BA6 url(../images/skin/bg-header.gif) repeat-x; +} + +#desktopTitlebar { + padding: 7px 8px 6px 8px; + height: 32px; + background: url(../images/skin/logo.gif) no-repeat; + background-position: left 0; +} + +#desktopTitlebar h1.applicationTitle { + display: none; + margin: 0; + padding: 0 5px 0 0; + font-size: 20px; + line-height: 25px; + font-weight: bold; + color: #fff; +} + +#desktopTitlebar h2.tagline { + padding: 7px 0 0 0; + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 10px; + color: #d4dce4; + font-weight: bold; + text-align: center; + text-transform: uppercase; +} + +#desktopTitlebar h2.tagline .taglineEm { + color: #fff; + font-weight: bold; +} + +#topNav { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 10px; + position: absolute; + right: 0; + top: 0; + color: #d4dce4; + text-align: right; + padding: 13px 10px 0 0; +} + +#topNav a { + color: #fff; + font-weight: normal; +} + +#topNav a:hover { + text-decoration: none; +} + +/* Navbar */ + +#desktopNavbar { + background: #f2f2f2; + height: 30px; + margin: 0 0px; + overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */ +} + +#desktopNavbar ul { + padding: 0; + margin: 0; + list-style: none; + font-size: 12px; +} + +#desktopNavbar li { + float: left; +} + +#desktopNavbar a { + display: block; +} + +#desktopNavbar ul li a { + padding: 6px 10px 6px 10px; + color: #333; + font-weight: normal; +} + +#desktopNavbar ul li a:hover { + color: #333; +} + +#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right { + background-image: url(../images/skin/arrow-right.gif); + background-repeat: no-repeat; + background-position: right 7px; +} + +#desktopNavbar li ul { + padding: 2px; + border: 1px solid #3f3f3f; + background: #fff url(../images/skin/bg-dropdown.gif) repeat-y; + position: absolute; + width: 164px; + left: -999em; + z-index: 8000; +} + +#desktopNavbar li:hover ul ul, +#desktopNavbar li.ieHover ul ul, +#desktopNavbar li:hover ul ul ul, +#desktopNavbar li.ieHover ul ul ul { + left: -999em; +} + +#desktopNavbar li ul ul { /* third-and-above-level lists */ + margin: -22px 0 0 163px; +} + +#desktopNavbar li ul li .check { + position: absolute; + top: 8px; + left: 6px; + width: 5px; + height: 5px; + background: #555; + overflow: hidden; + line-height: 1px; + font-size: 1px; +} + +#desktopNavbar li ul li a { + position: relative; + padding: 1px 9px 1px 25px; + width: 130px; + color: #3f3f3f; + font-weight: normal; +} + +#desktopNavbar li ul li a:hover { + background: #6C98D9; + color: #fff; + -moz-border-radius: 2px; +} + +#desktopNavbar li ul li a:hover .check { + background: #fff; +} + +#desktopNavbar li:hover ul, +#desktopNavbar li.ieHover ul, +#desktopNavbar li li.ieHover ul, +#desktopNavbar li li li.ieHover ul, +#desktopNavbar li li:hover ul, +#desktopNavbar li li li:hover ul { /* lists nested under hovered list items */ + left: auto; +} + +#desktopNavbar li:hover { /* For IE7 */ + position: static; +} + +li.divider { + margin-top: 2px; + padding-top: 3px; + border-top: 1px solid #ebebeb; +} + +#pageWrapper { + position: relative; + overflow: hidden; /* This can be set to hidden or auto */ + border-top: 1px solid #909090; + border-bottom: 1px solid #909090; + /*height: 100%;*/ +} + +/* Footer */ + +#desktopFooterWrapper { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 30px; + overflow: hidden; +} + +#desktopFooter { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 10px; + height: 24px; + padding: 6px 8px 0 8px; + background: #f2f2f2; +} + + + +/* Panel Layout +---------------------------------------------------------------- */ + +/* Columns */ + +.column { + position: relative; + float: left; + overflow: hidden; /* Required by IE6 */ +} + +/* Panels */ + +.panel { + position: relative; + overflow: auto; + background: #f8f8f8; + border-bottom: 1px solid #b9b9b9; +} + +.panelWrapper.collapsed .panel-header { + border-bottom: 0; +} + +.panelAlt { + background: #f2f2f2; +} + +.bottomPanel { + border-bottom: 0; +} + +.pad { + padding: 8px; +} + +#mainPanel { + background: #fff; +} + +.panel-header { + position: relative; + background: #f1f1f1 url(../images/skin/bg-panel-header.gif) repeat-x; + height: 30px; + overflow: hidden; + border-bottom: 1px solid #d3d3d3; +} + +.panel-headerContent { + padding-top: 2px; +} + +.panel-headerContent.tabs { + background: url(../images/skin/tabs.gif) repeat-x; + background-position: left -68px; +} + +.panel-header h2 { + display: inline-block; + font-size: 12px; + margin: 0; + padding: 3px 8px 0 8px; + height: 22px; + overflow: hidden; + color: #333; +} + +.panel-collapse { + background: url(../images/skin/collapse-expand.gif) left top no-repeat; +} + +.panel-expand { + background: url(../images/skin/collapse-expand.gif) left -16px no-repeat; +} + +.icon16 { + margin: 4px 0 0 2px; + cursor: pointer; +} + +/* Column and Panel Handles */ + +.horizontalHandle { + height: 4px; + line-height: 1px; + font-size: 1px; + overflow: hidden; + background: #eee url(../images/skin/bg-handle-horizontal.gif) repeat-x; +} + +.horizontalHandle.detached .handleIcon { + background: transparent; +} + +.horizontalHandle .handleIcon { + margin: 0 auto; + height: 4px; + line-height: 1px; + font-size: 1px; + overflow: hidden; + background: url(../images/skin/handle-icon-horizontal.gif) center center no-repeat; +} + +.columnHandle { + min-height: 10px; + float: left; + width: 4px; + overflow: hidden; + background: #c3c3c3 url(../images/skin/handle-icon.gif) center center no-repeat; + border: 1px solid #909090; + border-top: 0; + border-bottom: 0; +} + +/* Toolboxes */ + +.toolbox { + float: right; + margin-top: 3px; + padding: 0 5px; + height: 24px; + overflow: hidden; + text-align: right; +} + +.panel-header-toolbox { +} + +div.toolbox.divider { /* Have to specify div here for IE6's sake */ + background: url(../images/skin/toolbox-divider.gif) repeat-y; + padding-left: 8px; +} + +.toolbox img.disabled { + cursor: default; +} + +.iconWrapper { + display: inline-block; + height: 22px; + min-width: 22px; + overflow: hidden; + border: 1px solid transparent; +} + +* html .iconWrapper { + padding: 1px; + border: 0; +} + +.iconWrapper img { + cursor: pointer; + margin: 0; + padding: 3px; +} + +.iconWrapper:hover { + border: 1px solid #a0a0a0; + -moz-border-radius: 3px; +} + +#spinnerWrapper { + width: 16px; + height: 16px; + background: url(../images/skin/spinner-placeholder.gif) no-repeat; + margin: 4px 5px 0 5px; +} + +#spinner { + display: none; + background: url(../images/skin/spinner.gif) no-repeat; + width: 16px; + height: 16px; +} + diff --git a/src/webui/css/Tabs.css b/src/webui/css/Tabs.css new file mode 100644 index 000000000..aa2985f19 --- /dev/null +++ b/src/webui/css/Tabs.css @@ -0,0 +1,66 @@ +/* + +Tabs.css for Mocha UI + +Theme: Default + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Required by: + Tabs.js + +*/ + +/* Toolbar Tabs */ + +.toolbarTabs { + padding: 0 5px 2px 2px; + background: url(../images/skin/tabs.gif) repeat-x; + background-position: left -70px; + overflow: visible; +} + +.tab-menu { + padding-top: 1px; + list-style: none; + margin: 0; + padding: 0; + line-height: 16px; + font-size: 11px; +} + +.tab-menu li { + display: block; + float: left; + margin: 0 0 5px 0; + cursor: pointer; + background: url(../images/skin/tabs.gif) repeat-x; + background-position: left -35px; +} + +.tab-menu li.selected { + background: url(../images/skin/tabs.gif) repeat-x; + background-position: left 0; +} + +.tab-menu li a { + display: block; + margin-left: 8px; + padding: 6px 15px 5px 9px; + text-align: center; + font-weight: normal; + color: #181818; + background: url(../images/skin/tabs.gif) repeat-x; + background-position: right -35px; +} + +.tab-menu li.selected a { + color: #181818; + font-weight: bold; + background: url(../images/skin/tabs.gif) repeat-x; + background-position: right 0; +} diff --git a/src/webui/css/Window.css b/src/webui/css/Window.css new file mode 100644 index 000000000..c362fdbfc --- /dev/null +++ b/src/webui/css/Window.css @@ -0,0 +1,371 @@ +/* + +Window.css for Mocha UI + +Theme: Default + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Required by: + Window.js and Modal.css + +*/ + +/* Windows +---------------------------------------------------------------- */ + +.mocha { + display: none; + overflow: hidden; + background-color: #e5e5e5; +} + +.mocha.isFocused { +} + +.mochaOverlay { + position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */ + top: 0; + left: 0; +} + +/* + + We get a little creative here in order to define a gradient in the CSS using a query + string appended to a background image. + + "from" is the top color of the gradient. "to" is the bottom color of the gradient. + + Both must be hex values without the leading # sign. + +*/ + +.mochaTitlebar { + width: 100%; + overflow: hidden; + background: url(../images/spacer.gif?from=fafafa&to=e5e5e5); +} + +.mochaTitlebar h3 { + font-size: 12px; + line-height: 15px; + font-weight: bold; + margin: 0; + padding: 5px 10px 4px 12px; + color: #888; +} + +.mocha.isFocused .mochaTitlebar h3 { + color: #181818; +} + +.mochaToolbarWrapper { + width: 100%; /* For IE */ + position: relative; + height: 29px; + background: #f1f1f1; + overflow: hidden; + border-top: 1px solid #d9d9d9; +} + +div.mochaToolbarWrapper.bottom { + border: 0; + border-bottom: 1px solid #d9d9d9; +} + +.mochaToolbar { + width: 100%; /* For IE */ + border-top: 1px solid #fff; +} + +.mochaContentBorder { + border-top: 1px solid #dadada; + border-bottom: 1px solid #dadada; +} + +.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */ + font-size: 12px; + overflow: auto; + background: #fff; +} + +.mochaContent { + padding: 10px 12px; +} + +.mocha .handle { + position: absolute; + background: #0f0; + width: 3px; + height: 3px; + z-index: 2; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ + opacity: .0; + -moz-opacity: .0; + overflow: hidden; + font-size: 1px; /* For IE6 */ +} + +.mocha .corner { /* Corner resize handles */ + width: 10px; + height: 10px; + background: #f00; +} + +.mocha .cornerSE { /* Bottom right resize handle */ + width: 20px; + height: 20px; + background: #fefefe; /* This is the color of the visible resize handle */ +} + +.mochaCanvasHeader { + position: absolute; + top: 0; + left: 0; + background: transparent; + z-index: -1; + visibility: hidden; + overflow: hidden; +} + +.mochaControls { + position: absolute; + width: 52px; + top: 8px; + right: 8px; + height: 14px; + z-index: 4; + background: transparent; +} + +.mochaCanvasControls { + position: absolute; + top: 8px; + right: 8px; + z-index: 3; + background: transparent; +} + +/* + To use images for these buttons: + 1. Set the useCanvasControls window option to false. + 2. If you use a different button size you may need to reposition the controls. + Modify the controlsOffset window option. + 2. Replcac the background-color with a background-image for each button. + +*/ +.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton { + float: right; + width: 14px; + height: 14px; + font-size: 1px; + cursor: pointer; + z-index: 4; + color: #666; + background-color: #fff; + margin-left: 5px; +} + +.mochaMinimizeButton { + margin-left: 0; +} + +.mochaMaximizeButton { +} + +.mochaCloseButton { +} + +.mochaSpinner{ + display: none; + position: absolute; + bottom: 7px; + left: 6px; + width: 16px; + height: 16px; + background: url(../images/spinner.gif) no-repeat; +} + +.mochaIframe { + width: 100%; +} + +/* Fix for IE6 select z-index issue */ +.zIndexFix { + display: block; + position: absolute; + top: 0; + left: 0; + z-index: -1; + filter: mask(); + width: 100px; + height: 100px; + border: 1px solid transparent; +} + +/* Viewport overlays +---------------------------------------------------------------- */ + +#modalOverlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + background: #000; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ + opacity: 0; + -moz-opacity: 0; + z-index: 10000; +} + +/* Fix for IE6 select z-index issue */ +#modalFix { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ + opacity: 0; + -moz-opacity: 0; + z-index: 9999; +} + +/* Underlay */ + +#windowUnderlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: #fff; +} + +* html #windowUnderlay { + position: absolute; +} + +/* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */ + +.mocha.replaced, .mochaTitlebar.replaced, .mochaMinimizeButton.replaced, .mochaMaximizeButton.replaced, .mochaCloseButton.replaced { + background-color: transparent !important; +} + +.windowClosed { + visibility: hidden; + display: none; + position: absolute; + top: -20000px; + left: -20000px; + z-index: -1; + overflow: hidden; +} + +.windowClosed .mochaContentBorder, .windowClosed .mochaToolbarWrapper, .windowClosed .mochaTitlebar, .windowClosed .mochaControls, +.windowClosed .mochaCanvasControls { + position: absolute; + top: 0; + left: 0; + visibility: hidden; + display: none; + z-index: -1; +} + +/* Modals */ + +.modal2 { + border: 8px solid #fff; +} + +.modal2 .mochaContentBorder { + border-width: 0px; +} + +/* Window Themes */ + +.mocha.no-canvas { + background: #e5e5e5; + border: 1px solid #555; +} + +.mocha.no-canvas .mochaTitlebar { + background: #e5e5e5; +} + +.mocha.transparent .mochaTitlebar h3 { + color: #fff; + display: none; +} + +.mocha.transparent .mochaContentWrapper { + background: transparent; +} + +.mocha.notification { + background: #cedff2; +} + +.mocha.notification .mochaTitlebar { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ + opacity: .0; + -moz-opacity: 0; +} + +.mocha.notification .mochaContentBorder { + border-width: 0px; +} + +.mocha.notification .mochaContentWrapper { + text-align: center; + font-size: 12px; + font-weight: bold; + background: transparent; +} + +/* Example Window Themes */ + +#about_contentWrapper { + background: #e5e5e5 url(../images/logo2.gif) 3px 3px no-repeat; +} + +#builder_contentWrapper { + background: #f5f5f7; +} + +#json01 .mochaTitlebar { + background: #6dd2db; +} + +#json02 .mochaTitlebar { + background: #6db6db; +} + +#json03 .mochaTitlebar { + background: #6d92db; +} + +.jsonExample .mochaTitlebar h3 { + color: #ddd; +} + +/* This does not work in IE6. */ +.isFocused.jsonExample .mochaTitlebar h3 { + color: #fff; +} + +#fxmorpherExample .mochaContentWrapper { + background: #577a9e; +} + +#clock { + background: #fff; +} diff --git a/src/webui/css/mocha.css b/src/webui/css/mocha.css deleted file mode 100644 index cabf0535d..000000000 --- a/src/webui/css/mocha.css +++ /dev/null @@ -1,1038 +0,0 @@ -/* - -CSS for Mocha UI - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -*/ - -/* Layout ----------------------------------------------------------------- */ - -html, body { - overflow: hidden; -} - -body { - margin: 0; /* Required */ - background: #fff; /* #6989b3 url(../images/splash.gif) center center no-repeat; */ -} - -#desktop { - visibility: hidden; - position: relative; - min-width: 750px; /* Helps keep header content from wrapping */ - height: 100%; - overflow: hidden; - cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */ -} - -#desktopHeader { - background: #f1f1f1; -} - -#desktopTitlebarWrapper { - position: relative; - height: 45px; - overflow: hidden; - background: #333 url(../images/bg-header.gif) repeat-x; -} - -#desktopTitlebar { - padding: 5px 8px 7px 8px; - background: #f0f0f0; - border-top: 1px solid #fff; - border-bottom: 1px solid #bbb; - height: 25px; -} - -#desktopTitlebar h1.applicationTitle { - /*display: none;*/ - margin: 0; - padding: 4px 0 0 0; - font-size: 18px; - font-weight: bold; - color: #e60; -} - -#desktopTitlebar h1 .version { - font-size: 12px; - color: #333; -} - -#desktopTitlebar h2.tagline { - font-size: 12px; - color: #b2b2b2; - font-weight: bold; - padding: 5px 0 0 0; - text-align: center; -} - -#desktopTitlebar h2.tagline .taglineEm { - color: #fff; - font-weight: bold; -} - -#topNav { - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 10px; - position: absolute; - right: 0; - top: 0; - color: #b2b2b2; - text-align: right; - padding: 13px 10px 0 0; -} - -#topNav a { - color: #7DD0FA; - font-weight: normal; -} - -#topNav a:hover { - text-decoration: none; -} - -/* Toolboxes */ - -.toolbox { - float: right; - padding: 6px 3px 0 5px; - height: 23px; - overflow: hidden; -} - -div.toolbox.divider { /* Have to specify div here for IE6's sake */ - background: url(../images/toolbox-divider.gif) left center no-repeat; - padding: 6px 3px 0 12px; -} - -div.toolbox.divider2 { /* Have to specify div here for IE6's sake */ - background: url(../images/toolbox-divider2.gif) left center no-repeat; - padding: 6px 4px 0 12px; -} - -.toolbox img { - cursor: pointer; - margin-right: 6px; - padding: 0; - float: left; -} - -.toolbox img.disabled { - cursor: default; -} - -#spinnerWrapper { - width: 16px; - height: 16px; - background: url(../images/spinner-placeholder.gif) no-repeat; - margin-right: 5px; -} - -#spinner { - visibility: hidden; - background: url(../images/spinner.gif) no-repeat; - width: 16px; - height: 16px; -} - -/* Navbar */ - -#desktopNavbar { - padding: 0; - background: #f0f0f0; - border-top: 1px solid #fff; - border-bottom: 1px solid #bbb; - height: 22px; -} - -#desktopNavbar ul { - padding: 0; - margin: 0; - list-style: none; - font-size: 12px; -} - -#desktopNavbar li { - float: left; -} - -#desktopNavbar a { - display: block; -} - -#desktopNavbar ul li a { - padding: 2px 9px 2px 9px; - color: #000; -} - -#desktopNavbar ul li a:hover { - background: #e4e4e4; -} - -#desktopNavbar li ul { - padding: 2px; - border: 1px solid #999; - background: #fff; - position: absolute; - width: 148px; - left: -999em; - z-index: 8000; -} - -#desktopNavbar li ul li { -} - -#desktopNavbar li ul li a { - padding: 1px 9px 1px 9px; - width: 130px; -} - -#desktopNavbar li:hover ul, #desktopNavbar li.ieHover ul { /* lists nested under hovered list items */ - left: auto; -} - -#desktopNavbar li:hover, #desktopNavbar li.hover { - position: static; -} - -#desktopNavbar li:hover { /* For IE7 */ - position: static; -} - -li.divider { - margin-top: 2px; - padding-top: 3px; - border-top: 1px solid #ebebeb; -} - -#pageWrapper { - position: relative; - overflow: hidden; /* This can be set to hidden or auto */ - /*border-top: 1px solid #222;*/ -} - -/* Footer */ -#desktopFooterWrapper { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 30px; - overflow: hidden; - border-top: 1px solid #222; -} - -#desktopFooter { - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 10px; - height: 24px; - padding: 6px 8px 0 8px; - background: #333; - color: #b2b2b2; -} - -#desktopFooter a { - color: #7DD0FA; - font-weight: normal; -} - -#desktopFooter a:hover { - text-decoration: none; -} - -/* Dock/Taskbar */ - -#dockWrapper { - display: none; - width: 100%; - border-top: 1px solid #222; -} - -#dockWrapper.top { - border: 0; -} - -#dock { - position: relative; - padding: 3px 16px 0 6px; - bottom: 0; - left: 0; - background: #4c4c4c; - min-height: 27px; - height: auto; -} - -*html #dock { - height: 30px; /* Used for IE 6.0 since it does not support min-height */ -} - -.dockTab { - float: left; - position: relative; - font-size: 11px; - width: 150px; - height: 24px; - margin: 0 3px 2px 0; - overflow: hidden; - cursor: pointer; - background: url(../images/dock-tabs.gif) left top no-repeat; -} - -.dockTab.activeDockTab { - background-position: left -24px; -} - -.dockText { - position: absolute; - top: 0; - left: 0; - display: block; - font-weight: normal; - color: #bbb; - text-align: left; - padding: 4px 10px 2px 10px; - width: 130px; - height: 19px; - overflow: hidden; -} - -.dockText:hover { - color: #fff; -} - -.dockTab.activeDockTab .dockText { - color: #fff; -} - -#dockCanvas { - position: absolute; - top: 5px; - right: 3px; - z-index: 2; -} - -#dockPlacement { - position: absolute; - top: 4px; - right: 8px; - width: 10px; - height: 9px; - opacity: 0; - filter: alpha(opacity=0); - -moz-opacity: 0; - background: #f00; /* for troubleshooting */ - cursor: pointer; - z-index: 3; /* for IE */ - text-align: right; -} - -#dockAutoHide { - position: absolute; - top: 14px; - right: 8px; - width: 10px; - height: 9px; - opacity: 0; - filter: alpha(opacity=0); - -moz-opacity: 0; - background: #f00; /* for troubleshooting */ - cursor: pointer; - z-index: 3; /* for IE */ -} - -/* Panel Layout ----------------------------------------------------------------- */ - -/* Columns */ - -.column { - position: relative; - float: left; - overflow: hidden; - background: #f1f1f1; -} - -/* Panels */ - -.panel { - position: relative; - overflow: auto; - border-bottom: 1px solid #b9b9b9; - border-top: 0; -} - -.pad { - position: absolute; - top: 0; - left: 0; - right: 0; - padding: 0; - overflow: hidden; -} - -#mainPanel { - background: #fff; -} - -.panel-header { - position: relative; - background: #f1f1f1 url(../images/bg-panel-header.gif) repeat-x; - height: 30px; - overflow: hidden; - border-bottom: 1px solid #d3d3d3; - display: none; /*FIX by Chris*/ -} - -.panel-headerContent { - /*padding-top: 2px; FIX By Chris*/ -} - -.panel-headerContent.tabs { - background: url(../images/skin/tabs.gif) repeat-x; - background-position: left -68px; -} - -.panel-header h2 { - display: inline-block; - font-size: 12px; - margin: 0; - padding: 3px 8px 0 8px; - height: 22px; - overflow: hidden; - color: #3f3f3f; -} - -.panel-header-toolbox { - float: right; - height: 26px; - margin: 2px 5px 5px 0; - text-align: right; -} - -.panel-collapse { - background: url(../images/collapse-expand.gif) left top no-repeat; -} - -.panel-expand { - background: url(../images/collapse-expand.gif) left -16px no-repeat; -} - -.icon16 { - margin: 5px 0 0 2px; - cursor: pointer; -} - -.panel-footerWrapper { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - background: #f9f9f9; - height: 30px; - overflow: hidden; - border-top: 1px solid #b9b9b9; -} - -.panel-footer { - padding: 1px 0 0 8px; -} - -.panel-footerContent { - margin-top: 5px; -} - -/* Handles */ - -.horizontalHandle { - height: 4px; - line-height: 1px; - font-size: 1px; - overflow: hidden; - background: #d1d1d1 url(../images/skin/bg-handle-horizontal.gif) repeat-x; -} - -.horizontalHandle.detached .handleIcon { - background: transparent; -} - -.horizontalHandle .handleIcon { - margin: 0 auto; - height: 4px; - line-height: 1px; - font-size: 1px; - overflow: hidden; - background: url(../images/skin/handle-icon-horizontal.gif) center center no-repeat; -} - -.columnHandle { - min-height: 10px; - float: left; - width: 4px; - overflow: hidden; - background: #bbb url(../images/skin/handle-icon.gif) center center no-repeat; - border: 1px solid #9a9a9a; - border-top: 0; -} - -/* Viewport overlays ----------------------------------------------------------------- */ - -#modalOverlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - background: #000; - opacity: 0; - filter: alpha(opacity=0); - -moz-opacity: 0; - z-index: 10000; -} - -* html #modalOverlay { - position: absolute; -} - -/* Fix for IE6 select z-index issue */ -#modalFix { - display: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - opacity: 0; - filter: alpha(opacity=0); - -moz-opacity: 0; - z-index: 9999; -} - -/* Underlay */ - -#windowUnderlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - background: #fff; -} - -* html #windowUnderlay { - position: absolute; -} - -/* Windows ----------------------------------------------------------------- */ - -.mocha { - position: absolute; - top: 0; - left: 0; - display: none; - overflow: hidden; -} - -.mocha.isFocused { -} - -.mochaOverlay { - position: absolute; - top: 0; - left: 0; -} - -.mochaTitlebar { - width: 100%; - overflow: hidden; -} - -.mochaTitlebar h3 { - font-size: 12px; - line-height: 15px; - font-weight: bold; - margin: 5px 10px 4px 12px; - padding: 0; - color: #888; -} - -.mocha.isFocused .mochaTitlebar h3 { - color: #141414; -} - -.mochaToolbarWrapper { - width: 100%; /* For IE */ - position: relative; - height: 29px; - background: #f1f1f1; - overflow: hidden; - border-top: 1px solid #d9d9d9; -} - -div.mochaToolbarWrapper.bottom { - border: 0; - border-bottom: 1px solid #d9d9d9; -} - -#mochaToolbar .divider { - background: url(../images/skin/toolbox-divider.gif) left center no-repeat; - padding: 30px 3px 0 12px; -} - -#mochaToolbar { - padding: 4px 4px 4px 4px; - background: #f0f0f0; - border-top: 1px solid #fff; - border-bottom: 1px solid #bbb; - height: 40px; - width: 100%; -} - -.mochaToolButton { - padding: 4px 4px 4px 4px; -} - -.mochaContentBorder { - border-top: 1px solid #dadada; - border-bottom: 1px solid #dadada; -} - -.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */ - font-size: 12px; - overflow: auto; -} - -.mochaContent { - padding: 10px 12px; -} - -.mocha .handle { - position: absolute; - background: #0f0; - width: 3px; - height: 3px; - z-index: 2; - opacity: .0; - filter: alpha(opacity=0); - -moz-opacity: .0; - overflow: hidden; - font-size: 1px; /* For IE6 */ -} - -.mocha .corner { /* Corner resize handles */ - background: #f00; - width: 10px; - height: 10px; -} - -.mocha .cornerSE { /* Bottom right resize handle */ - background: #f00; - width: 20px; - height: 20px; -} - -.mochaCanvasHeader { - position: absolute; - top: 0; - left: 0; - background: transparent; - z-index: -1; - display: none; - overflow: hidden; -} - -.mochaControls { - position: absolute; - width: 52px; - top: 8px; - right: 8px; - height: 14px; - z-index: 4; - background: transparent; -} - -.mochaCanvasControls { - position: absolute; - top: 8px; - right: 8px; - z-index: 3; - background: transparent; -} - -/* - To use images for these buttons: - 1. Set the useCanvasControls window option to false. - 2. If you use a different button size you may need to reposition the controls. - Modify the controlsOffset window option. - 2. Add background images to each button. - -*/ -.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton { - float: right; - width: 14px; - height: 14px; - font-size: 1px; - cursor: pointer; - z-index: 4; - background: #f00; - margin-left: 5px; -} - -.mochaMinimizeButton { - margin-left: 0; -} - -.mochaMaximizeButton { -} - -.mochaCloseButton { -} - -.mochaSpinner{ - visibility: hidden; - position: absolute; - bottom: 7px; - left: 6px; - width: 16px; - height: 16px; - background: url(../images/spinner.gif) no-repeat; -} - -.mochaIframe { - width: 100%; -} - -/* Fix for IE6 select z-index issue */ -.zIndexFix { - display: block; - position: absolute; - top: 0; - left: 0; - z-index: -1; - filter: mask(); - width: 100px; - height: 100px; - border: 1px solid transparent; -} - -/* Modals */ - -.modal2 { - border: 8px solid #fff; -} - -.modal2 .mochaContentBorder { - border-width: 0px; -} - -/* Window Themes */ - -.mocha.no-canvas { - background: #f1f1f1; - border: 2px solid #555; -} - -.mocha.no-canvas .mochaTitlebar { - background: #f1f1f1; -} - -.mocha.transparent .mochaTitlebar h3 { - color: #fff; - display: none; -} - -.mocha.notification .mochaTitlebar { - opacity: .0; - filter: alpha(opacity=0); - -moz-opacity: 0; -} - -.mocha.notification .mochaContentBorder { - border-width: 0px; -} - -.mocha.notification .mochaContentWrapper { - text-align: center; - font-size: 12px; - font-weight: bold; -} - -/* Compontents ----------------------------------------------------------------- */ - -/* Toolbar Tabs */ - -.toolbarTabs { - padding: 0 5px 2px 2px; - background: url(../images/skin/tabs.gif) repeat-x; - background-position: left -70px; - overflow: visible; -} - -.tab-menu { - padding-top: 1px; - list-style: none; - margin: 0; - padding: 0; - line-height: 16px; - font-size: 11px; -} - -.tab-menu li { - display: block; - float: left; - margin: 0 0 5px 0; - cursor: pointer; - background: url(../images/skin/tabs.gif) repeat-x; - background-position: left -35px; -} - -.tab-menu li.selected { - background: url(../images/skin/tabs.gif) repeat-x; - background-position: left 0; -} - -.tab-menu li a { - display: block; - margin-left: 8px; - padding: 6px 16px 5px 10px; - text-align: center; - font-weight: normal; - color: #141414; - background: url(../images/skin/tabs.gif) repeat-x; - background-position: right -35px; -} - -.tab-menu li.selected a { - color: #141414; - font-weight: bold; - background: url(../images/skin/tabs.gif) repeat-x; - background-position: right 0; -} - -/* Accordian */ - -.accordianWrapper { - padding: 0; - background: #fff; -} - -.accordianToggler { - margin: 0; - padding: 6px 10px; - background: #f1f1f1 url(../images/bg-panel-header.gif) repeat-x; - font-size: 12px; - cursor: pointer; - border-top: 1px solid #e3e3e3; -} - -.topToggler { - border-top: none; -} - -.accordianToggler.open { - background: #fff url(../images/bg-panel-header.gif) repeat-x; -} - -.accordianContent { - padding: 10px 10px 5px 10px; -} - -/* Sliders */ - -.slider { - clear: both; - position: relative; - font-size: 12px; - font-weight: bold; - width: 400px; - margin-bottom: 15px; -} - -.sliderWrapper { - position: relative; - font-size: 1px; - line-height: 1px; - height: 9px; - width: 422px; - margin-left: 1px; -} - -.sliderarea { - position: absolute; - top: 0; - left: 0; - height: 7px; - width: 420px; - font-size: 1px; - line-height: 1px; - background: url(../images/skin/slider-area.gif) repeat-x; - border: 1px solid #a3a3a3; - border-bottom: 1px solid #ccc; - border-left: 1px solid #ccc; - margin: 0; - padding: 0; - overflow: hidden; -} - -.sliderknob { - position: absolute; - top: 0; - left: 0; - height: 9px; - width: 19px; - font-size: 1px; - line-height: 1px; - background: url(../images/skin/knob.gif) no-repeat; - cursor: pointer; - overflow: hidden; - z-index: 2; -} - -.update { - padding-bottom: 5px; -} - -/* Folder Tree */ - -.tree { - font-size: 11px; - line-height: 15px; - margin: 0; -} - -.tree ul { - margin: 0; -} - -.tree li { - list-style-type: none; - white-space: nowrap; -} - -.tree li a { - color: #3f3f3f; -} - -.tree li img { - vertical-align: middle; - width: 18px; - height: 18px; - overflow: hidden; -} - -.tree li span { - padding-left: 2px; -} - -/* View Toggle */ - -.viewToggle { - position: absolute; - top: 4px; - right: 5px; - width: 60px; - text-align: right; -} - -.viewToggle img.viewToggleList, .viewToggle img.viewToggleGrid { - width: 28px; - height: 22px; -} - -.viewToggle img.viewToggleList { - background: url(../images/view-toggle.gif) no-repeat; - background-position: 0 -66px; -} - -.viewToggle img.viewToggleGrid { - background: url(../images/view-toggle.gif) no-repeat; - background-position: 0 0; -} - -/* Miscellaneous ----------------------------------------------------------------- */ - -/* Window Builder Form Elements */ - -#desktop form { - margin: 0 0 0 0; - padding: 5px 0 0 0; -} - -#newWindowForm { - width: 320px; -} - -#desktop .input { - width: 225px; - padding: 1px 0 1px 3px; - border: 1px solid #bbb; -} - -#desktop textarea { - width: 225px; - height: 100px; - padding: 1px 0 1px 3px; - border: 1px solid #bbb; -} - -#desktop .formLabel { - float: left; - text-align: right; - width: 80px; - margin: 0 0 5px 0; -} - -#desktop .formField { - float: right; - margin: 0 0 5px 0; - padding: 0 0 0 0; - width: 230px; -} - -#desktop form .number { - width: 40px; -} - -/* Menus */ - -.menu-right li { - list-style-type: none; - display: inline; - margin: 0 0 0 15px; -} - -/* Notifications */ - -/* Success, error & notice boxes for messages and errors. */ -.error, -.notice, -.success { padding: 8px; margin-bottom: 10px; border: 2px solid #ddd; } -.error { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; } -.notice { background: #FFF6BF; color: #817134; border-color: #FFD324; } -.success { background: #E6EFC2; color: #529214; border-color: #C6D880; } -.error a { color: #D12F19; } -.notice a { color: #817134; } -.success a { color: #529214; } - - -/* Clears */ - -.clear { - clear: both; - height: 0; -} - -*html .clear { - height: 1%; - font-size: 1px; - line-height: 1px; - overflow: hidden; - visibility: hidden; -} diff --git a/src/webui/css/style.css b/src/webui/css/style.css index b2e583198..1aba7c845 100644 --- a/src/webui/css/style.css +++ b/src/webui/css/style.css @@ -172,3 +172,57 @@ a.propButton img { #contextmenu li a.deleteHD { background-image:url(../images/skin/delete_perm22.png); } #contextmenu li a.uploadLimit { background-image:url(../images/skin/seeding.png); } #contextmenu li a.downloadLimit { background-image:url(../images/skin/download.png); } + +/* Sliders */ + +.slider { + clear: both; + position: relative; + font-size: 12px; + font-weight: bold; + width: 400px; + margin-bottom: 15px; +} + +.sliderWrapper { + position: relative; + font-size: 1px; + line-height: 1px; + height: 9px; + width: 422px; +} + +.sliderarea { + position: absolute; + top: 0; + left: 0; + height: 7px; + width: 420px; + font-size: 1px; + line-height: 1px; + background: #f2f2f2 url(../images/skin/slider-area.gif) repeat-x; + border: 1px solid #a3a3a3; + border-bottom: 1px solid #ccc; + border-left: 1px solid #ccc; + margin: 0; + padding: 0; + overflow: hidden; +} + +.sliderknob { + position: absolute; + top: 0; + left: 0; + height: 9px; + width: 19px; + font-size: 1px; + line-height: 1px; + background: url(../images/skin/knob.gif) no-repeat; + cursor: pointer; + overflow: hidden; + z-index: 2; +} + +.update { + padding-bottom: 5px; +} \ No newline at end of file diff --git a/src/webui/download.html b/src/webui/download.html index fe50e0349..9607b2cb9 100644 --- a/src/webui/download.html +++ b/src/webui/download.html @@ -4,7 +4,6 @@ _(Download from URL) - diff --git a/src/webui/downloadlimit.html b/src/webui/downloadlimit.html index 53fbab409..75a152743 100644 --- a/src/webui/downloadlimit.html +++ b/src/webui/downloadlimit.html @@ -7,7 +7,7 @@ - + diff --git a/src/webui/index.html b/src/webui/index.html index 72b9a9a72..26689829b 100644 --- a/src/webui/index.html +++ b/src/webui/index.html @@ -3,16 +3,21 @@ + qBittorrent web User Interface - - + + + + + + - + @@ -65,23 +70,22 @@
- - - - - - - - + + + + + + + + - - + + - +
-
    diff --git a/src/webui/preferences.html b/src/webui/preferences.html index 6140f0e8c..239aed460 100644 --- a/src/webui/preferences.html +++ b/src/webui/preferences.html @@ -4,7 +4,6 @@ _(Download from URL) - @@ -164,6 +163,7 @@ loadPreferences = function() { var request = new Request.JSON({ url: url, method: 'get', + noCache: true, onFailure: function() { alert("Could not contact qBittorrent"); }, diff --git a/src/webui/prop-files.html b/src/webui/prop-files.html index 408155c1b..647607e34 100644 --- a/src/webui/prop-files.html +++ b/src/webui/prop-files.html @@ -147,6 +147,7 @@ var createPriorityCombo = function(id, selected_prio) { waitingTorrentFiles=true; var request = new Request.JSON({ url: url, + noCache: true, method: 'get', onFailure: function() { $('error_div').set('html', 'qBittorrent client is not reachable'); diff --git a/src/webui/prop-general.html b/src/webui/prop-general.html index 082ca4153..00ff386ff 100644 --- a/src/webui/prop-general.html +++ b/src/webui/prop-general.html @@ -68,6 +68,7 @@ dynamic information: total_downloaded, total_uploaded, total_wasted, up_limit, d waiting=true; var request = new Request.JSON({ url: url, + noCache: true, method: 'get', onFailure: function() { $('error_div').set('html', 'qBittorrent client is not reachable'); diff --git a/src/webui/prop-trackers.html b/src/webui/prop-trackers.html index 9c2a75044..4c7815fdc 100644 --- a/src/webui/prop-trackers.html +++ b/src/webui/prop-trackers.html @@ -91,6 +91,7 @@ var trackersDynTable = new Class ({ waitingTrackers=true; var request = new Request.JSON({ url: url, + noCache: true, method: 'get', onFailure: function() { $('error_div').set('html', 'qBittorrent client is not reachable'); diff --git a/src/webui/scripts/client.js b/src/webui/scripts/client.js index 042abce59..6649f6731 100644 --- a/src/webui/scripts/client.js +++ b/src/webui/scripts/client.js @@ -28,7 +28,7 @@ setSortedColumn = function(index){ myTable.setSortedColumn(index); }; -window.addEvent('domready', function(){ +window.addEvent('load', function(){ var saveColumnSizes = function() { var filters_width = $('Filters').getSize().x; @@ -38,11 +38,13 @@ window.addEvent('domready', function(){ Cookie.write('properties_height', properties_height); } - MochaUI.Desktop = new MochaUI.Desktop(); + /*MochaUI.Desktop = new MochaUI.Desktop(); MochaUI.Desktop.desktop.setStyles({ 'background': '#fff', 'visibility': 'visible' - }); + });*/ + MochaUI.Desktop.initialize(); + var filt_w = Cookie.read('filters_width'); if($defined(filt_w)) filt_w = filt_w.toInt(); @@ -61,9 +63,12 @@ window.addEvent('domready', function(){ width: null, resizeLimit: [100, 300] }); + MochaUI.Desktop.setDesktopSize(); new MochaUI.Panel({ id: 'Filters', title: 'Panel', + header: false, + padding: { top: 0, right: 0, bottom: 0, left: 0 }, loadMethod: 'xhr', contentURL: 'filters.html', column: 'filtersColumn', @@ -72,6 +77,8 @@ window.addEvent('domready', function(){ new MochaUI.Panel({ id: 'transferList', title: 'Panel', + header: false, + padding: { top: 0, right: 0, bottom: 0, left: 0 }, loadMethod: 'xhr', contentURL: 'transferlist.html', column: 'mainColumn', @@ -86,6 +93,8 @@ window.addEvent('domready', function(){ new MochaUI.Panel({ id: 'properties', title: 'Panel', + header: false, + padding: { top: 0, right: 0, bottom: 0, left: 0 }, loadMethod: 'xhr', contentURL: 'properties.html', column: 'mainColumn', @@ -105,6 +114,7 @@ window.addEvent('domready', function(){ waiting=true; var request = new Request.JSON({ url: url, + noCache: true, method: 'get', onFailure: function() { $('error_div').set('html', 'qBittorrent client is not reachable'); @@ -189,9 +199,11 @@ function closeWindows() { // This runs when a person leaves your page. -window.addEvent('unload', function(){ - if (MochaUI) MochaUI.garbageCleanUp(); -}); +//window.addEvent('unload', function(){ +// if (MochaUI && Browser.Engine.trident != true) { +// MochaUI.garbageCleanUp(); +// } +//}); window.addEvent('keydown', function(event){ if (event.key == 'a' && event.control) { diff --git a/src/webui/scripts/excanvas-compressed.js b/src/webui/scripts/excanvas-compressed.js index 6f50b92a4..1d9ddb266 100644 --- a/src/webui/scripts/excanvas-compressed.js +++ b/src/webui/scripts/excanvas-compressed.js @@ -1,19 +1,876 @@ -if(!window.CanvasRenderingContext2D){(function(){var I=Math,i=I.round,L=I.sin,M=I.cos,m=10,A=m/2,Q={init:function(a){var b=a||document;if(/MSIE/.test(navigator.userAgent)&&!window.opera){var c=this;b.attachEvent("onreadystatechange",function(){c.r(b)})}},r:function(a){if(a.readyState=="complete"){if(!a.namespaces["s"]){a.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml")}var b=a.createStyleSheet();b.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}"; -var c=a.getElementsByTagName("canvas");for(var d=0;d"){var d="/"+a.tagName,e;while((e=a.nextSibling)&&e.tagName!=d){e.removeNode()}if(e){e.removeNode()}}a.parentNode.replaceChild(c,a);return c},initElement:function(a){a=this.q(a);a.getContext=function(){if(this.l){return this.l}return this.l=new K(this)};a.attachEvent("onpropertychange",V);a.attachEvent("onresize", -W);var b=a.attributes;if(b.width&&b.width.specified){a.style.width=b.width.nodeValue+"px"}else{a.width=a.clientWidth}if(b.height&&b.height.specified){a.style.height=b.height.nodeValue+"px"}else{a.height=a.clientHeight}return a}};function V(a){var b=a.srcElement;switch(a.propertyName){case "width":b.style.width=b.attributes.width.nodeValue+"px";b.getContext().clearRect();break;case "height":b.style.height=b.attributes.height.nodeValue+"px";b.getContext().clearRect();break}}function W(a){var b=a.srcElement; -if(b.firstChild){b.firstChild.style.width=b.clientWidth+"px";b.firstChild.style.height=b.clientHeight+"px"}}Q.init();var R=[];for(var E=0;E<16;E++){for(var F=0;F<16;F++){R[E*16+F]=E.toString(16)+F.toString(16)}}function J(){return[[1,0,0],[0,1,0],[0,0,1]]}function G(a,b){var c=J();for(var d=0;d<3;d++){for(var e=0;e<3;e++){var g=0;for(var h=0;h<3;h++){g+=a[d][h]*b[h][e]}c[d][e]=g}}return c}function N(a,b){b.fillStyle=a.fillStyle;b.lineCap=a.lineCap;b.lineJoin=a.lineJoin;b.lineWidth=a.lineWidth;b.miterLimit= -a.miterLimit;b.shadowBlur=a.shadowBlur;b.shadowColor=a.shadowColor;b.shadowOffsetX=a.shadowOffsetX;b.shadowOffsetY=a.shadowOffsetY;b.strokeStyle=a.strokeStyle;b.d=a.d;b.e=a.e}function O(a){var b,c=1;a=String(a);if(a.substring(0,3)=="rgb"){var d=a.indexOf("(",3),e=a.indexOf(")",d+1),g=a.substring(d+1,e).split(",");b="#";for(var h=0;h<3;h++){b+=R[Number(g[h])]}if(g.length==4&&a.substr(3,1)=="a"){c=g[3]}}else{b=a}return[b,c]}function S(a){switch(a){case "butt":return"flat";case "round":return"round"; -case "square":default:return"square"}}function K(a){this.a=J();this.m=[];this.k=[];this.c=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=m*1;this.globalAlpha=1;this.canvas=a;var b=a.ownerDocument.createElement("div");b.style.width=a.clientWidth+"px";b.style.height=a.clientHeight+"px";b.style.overflow="hidden";b.style.position="absolute";a.appendChild(b);this.j=b;this.d=1;this.e=1}var j=K.prototype;j.clearRect=function(){this.j.innerHTML= -"";this.c=[]};j.beginPath=function(){this.c=[]};j.moveTo=function(a,b){this.c.push({type:"moveTo",x:a,y:b});this.f=a;this.g=b};j.lineTo=function(a,b){this.c.push({type:"lineTo",x:a,y:b});this.f=a;this.g=b};j.bezierCurveTo=function(a,b,c,d,e,g){this.c.push({type:"bezierCurveTo",cp1x:a,cp1y:b,cp2x:c,cp2y:d,x:e,y:g});this.f=e;this.g=g};j.quadraticCurveTo=function(a,b,c,d){var e=this.f+0.6666666666666666*(a-this.f),g=this.g+0.6666666666666666*(b-this.g),h=e+(c-this.f)/3,l=g+(d-this.g)/3;this.bezierCurveTo(e, -g,h,l,c,d)};j.arc=function(a,b,c,d,e,g){c*=m;var h=g?"at":"wa",l=a+M(d)*c-A,n=b+L(d)*c-A,o=a+M(e)*c-A,f=b+L(e)*c-A;if(l==o&&!g){l+=0.125}this.c.push({type:h,x:a,y:b,radius:c,xStart:l,yStart:n,xEnd:o,yEnd:f})};j.rect=function(a,b,c,d){this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath()};j.strokeRect=function(a,b,c,d){this.beginPath();this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath();this.stroke()};j.fillRect=function(a, -b,c,d){this.beginPath();this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath();this.fill()};j.createLinearGradient=function(a,b,c,d){var e=new H("gradient");return e};j.createRadialGradient=function(a,b,c,d,e,g){var h=new H("gradientradial");h.n=c;h.o=g;h.i.x=a;h.i.y=b;return h};j.drawImage=function(a,b){var c,d,e,g,h,l,n,o,f=a.runtimeStyle.width,k=a.runtimeStyle.height;a.runtimeStyle.width="auto";a.runtimeStyle.height="auto";var q=a.width,r=a.height;a.runtimeStyle.width= -f;a.runtimeStyle.height=k;if(arguments.length==3){c=arguments[1];d=arguments[2];h=(l=0);n=(e=q);o=(g=r)}else if(arguments.length==5){c=arguments[1];d=arguments[2];e=arguments[3];g=arguments[4];h=(l=0);n=q;o=r}else if(arguments.length==9){h=arguments[1];l=arguments[2];n=arguments[3];o=arguments[4];c=arguments[5];d=arguments[6];e=arguments[7];g=arguments[8]}else{throw"Invalid number of arguments";}var s=this.b(c,d),t=[],v=10,w=10;t.push(" ','","");this.j.insertAdjacentHTML("BeforeEnd",t.join(""))};j.stroke=function(a){var b=[],c=O(a?this.fillStyle:this.strokeStyle),d=c[0],e=c[1]*this.globalAlpha,g=10,h=10;b.push("n.x){n.x=k.x}if(l.y== -null||k.yn.y){n.y=k.y}}}b.push(' ">');if(typeof this.fillStyle=="object"){var v={x:"50%",y:"50%"},w=n.x-l.x,x=n.y-l.y,p=w>x?w:x;v.x=i(this.fillStyle.i.x/w*100+50)+"%";v.y=i(this.fillStyle.i.y/x*100+50)+"%";var y=[];if(this.fillStyle.p=="gradientradial"){var z=this.fillStyle.n/p*100,B=this.fillStyle.o/p*100-z}else{var z=0,B=100}var C={offset:null,color:null},D={offset:null,color:null};this.fillStyle.h.sort(function(T,U){return T.offset-U.offset});for(var o=0;oC.offset||C.offset==null){C.offset=u.offset;C.color=u.color}if(u.offset')}else if(a){b.push('')}else{b.push("')}b.push("");this.j.insertAdjacentHTML("beforeEnd",b.join(""));this.c=[]};j.fill=function(){this.stroke(true)};j.closePath=function(){this.c.push({type:"close"})};j.b=function(a,b){return{x:m*(a*this.a[0][0]+b*this.a[1][0]+this.a[2][0])-A,y:m*(a*this.a[0][1]+b*this.a[1][1]+this.a[2][1])-A}};j.save=function(){var a={};N(this,a); -this.k.push(a);this.m.push(this.a);this.a=G(J(),this.a)};j.restore=function(){N(this.k.pop(),this);this.a=this.m.pop()};j.translate=function(a,b){var c=[[1,0,0],[0,1,0],[a,b,1]];this.a=G(c,this.a)};j.rotate=function(a){var b=M(a),c=L(a),d=[[b,c,0],[-c,b,0],[0,0,1]];this.a=G(d,this.a)};j.scale=function(a,b){this.d*=a;this.e*=b;var c=[[a,0,0],[0,b,0],[0,0,1]];this.a=G(c,this.a)};j.clip=function(){};j.arcTo=function(){};j.createPattern=function(){return new P};function H(a){this.p=a;this.n=0;this.o= -0;this.h=[];this.i={x:0,y:0}}H.prototype.addColorStop=function(a,b){b=O(b);this.h.push({offset:1-a,color:b})};function P(){}G_vmlCanvasManager=Q;CanvasRenderingContext2D=K;CanvasGradient=H;CanvasPattern=P})()}; +// Copyright 2006 Google Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// Known Issues: +// +// * Patterns are not implemented. +// * Radial gradient are not implemented. The VML version of these look very +// different from the canvas one. +// * Clipping paths are not implemented. +// * Coordsize. The width and height attribute have higher priority than the +// width and height style values which isn't correct. +// * Painting mode isn't implemented. +// * Canvas width/height should is using content-box by default. IE in +// Quirks mode will draw the canvas using border-box. Either change your +// doctype to HTML5 +// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) +// or use Box Sizing Behavior from WebFX +// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) +// * Non uniform scaling does not correctly scale strokes. +// * Optimize. There is always room for speed improvements. + +// Only add this code if we do not already have a canvas implementation +if (!document.createElement('canvas').getContext) { + +(function() { + + // alias some functions to make (compiled) code shorter + var m = Math; + var mr = m.round; + var ms = m.sin; + var mc = m.cos; + var abs = m.abs; + var sqrt = m.sqrt; + + // this is used for sub pixel precision + var Z = 10; + var Z2 = Z / 2; + + /** + * This funtion is assigned to the elements as element.getContext(). + * @this {HTMLElement} + * @return {CanvasRenderingContext2D_} + */ + function getContext() { + return this.context_ || + (this.context_ = new CanvasRenderingContext2D_(this)); + } + + var slice = Array.prototype.slice; + + /** + * Binds a function to an object. The returned function will always use the + * passed in {@code obj} as {@code this}. + * + * Example: + * + * g = bind(f, obj, a, b) + * g(c, d) // will do f.call(obj, a, b, c, d) + * + * @param {Function} f The function to bind the object to + * @param {Object} obj The object that should act as this when the function + * is called + * @param {*} var_args Rest arguments that will be used as the initial + * arguments when the function is called + * @return {Function} A new function that has bound this + */ + function bind(f, obj, var_args) { + var a = slice.call(arguments, 2); + return function() { + return f.apply(obj, a.concat(slice.call(arguments))); + }; + } + + var G_vmlCanvasManager_ = { + init: function(opt_doc) { + if (/MSIE/.test(navigator.userAgent) && !window.opera) { + var doc = opt_doc || document; + // Create a dummy element so that IE will allow canvas elements to be + // recognized. + doc.createElement('canvas'); + doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); + } + }, + + init_: function(doc) { + // create xmlns + if (!doc.namespaces['g_vml_']) { + doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml', + '#default#VML'); + + } + if (!doc.namespaces['g_o_']) { + doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office', + '#default#VML'); + } + + // Setup default CSS. Only add one style sheet per document + if (!doc.styleSheets['ex_canvas_']) { + var ss = doc.createStyleSheet(); + ss.owningElement.id = 'ex_canvas_'; + ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + + // default size is 300x150 in Gecko and Opera + 'text-align:left;width:300px;height:150px}' + + 'g_vml_\\:*{behavior:url(#default#VML)}' + + 'g_o_\\:*{behavior:url(#default#VML)}'; + + } + + // find all canvas elements + var els = doc.getElementsByTagName('canvas'); + for (var i = 0; i < els.length; i++) { + this.initElement(els[i]); + } + }, + + /** + * Public initializes a canvas element so that it can be used as canvas + * element from now on. This is called automatically before the page is + * loaded but if you are creating elements using createElement you need to + * make sure this is called on the element. + * @param {HTMLElement} el The canvas element to initialize. + * @return {HTMLElement} the element that was created. + */ + initElement: function(el) { + if (!el.getContext) { + + el.getContext = getContext; + + // do not use inline function because that will leak memory + el.attachEvent('onpropertychange', onPropertyChange); + el.attachEvent('onresize', onResize); + + var attrs = el.attributes; + if (attrs.width && attrs.width.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setWidth_(attrs.width.nodeValue); + el.style.width = attrs.width.nodeValue + 'px'; + } else { + el.width = el.clientWidth; + } + if (attrs.height && attrs.height.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setHeight_(attrs.height.nodeValue); + el.style.height = attrs.height.nodeValue + 'px'; + } else { + el.height = el.clientHeight; + } + //el.getContext().setCoordsize_() + } + return el; + } + }; + + function onPropertyChange(e) { + var el = e.srcElement; + + switch (e.propertyName) { + case 'width': + el.style.width = el.attributes.width.nodeValue + 'px'; + el.getContext().clearRect(); + break; + case 'height': + el.style.height = el.attributes.height.nodeValue + 'px'; + el.getContext().clearRect(); + break; + } + } + + function onResize(e) { + var el = e.srcElement; + if (el.firstChild) { + el.firstChild.style.width = el.clientWidth + 'px'; + el.firstChild.style.height = el.clientHeight + 'px'; + } + } + + G_vmlCanvasManager_.init(); + + // precompute "00" to "FF" + var dec2hex = []; + for (var i = 0; i < 16; i++) { + for (var j = 0; j < 16; j++) { + dec2hex[i * 16 + j] = i.toString(16) + j.toString(16); + } + } + + function createMatrixIdentity() { + return [ + [1, 0, 0], + [0, 1, 0], + [0, 0, 1] + ]; + } + + function matrixMultiply(m1, m2) { + var result = createMatrixIdentity(); + + for (var x = 0; x < 3; x++) { + for (var y = 0; y < 3; y++) { + var sum = 0; + + for (var z = 0; z < 3; z++) { + sum += m1[x][z] * m2[z][y]; + } + + result[x][y] = sum; + } + } + return result; + } + + function copyState(o1, o2) { + o2.fillStyle = o1.fillStyle; + o2.lineCap = o1.lineCap; + o2.lineJoin = o1.lineJoin; + o2.lineWidth = o1.lineWidth; + o2.miterLimit = o1.miterLimit; + o2.shadowBlur = o1.shadowBlur; + o2.shadowColor = o1.shadowColor; + o2.shadowOffsetX = o1.shadowOffsetX; + o2.shadowOffsetY = o1.shadowOffsetY; + o2.strokeStyle = o1.strokeStyle; + o2.globalAlpha = o1.globalAlpha; + o2.arcScaleX_ = o1.arcScaleX_; + o2.arcScaleY_ = o1.arcScaleY_; + o2.lineScale_ = o1.lineScale_; + } + + function processStyle(styleString) { + var str, alpha = 1; + + styleString = String(styleString); + if (styleString.substring(0, 3) == 'rgb') { + var start = styleString.indexOf('(', 3); + var end = styleString.indexOf(')', start + 1); + var guts = styleString.substring(start + 1, end).split(','); + + str = '#'; + for (var i = 0; i < 3; i++) { + str += dec2hex[Number(guts[i])]; + } + + if (guts.length == 4 && styleString.substr(3, 1) == 'a') { + alpha = guts[3]; + } + } else { + str = styleString; + } + + return {color: str, alpha: alpha}; + } + + function processLineCap(lineCap) { + switch (lineCap) { + case 'butt': + return 'flat'; + case 'round': + return 'round'; + case 'square': + default: + return 'square'; + } + } + + /** + * This class implements CanvasRenderingContext2D interface as described by + * the WHATWG. + * @param {HTMLElement} surfaceElement The element that the 2D context should + * be associated with + */ + function CanvasRenderingContext2D_(surfaceElement) { + this.m_ = createMatrixIdentity(); + + this.mStack_ = []; + this.aStack_ = []; + this.currentPath_ = []; + + // Canvas context properties + this.strokeStyle = '#000'; + this.fillStyle = '#000'; + + this.lineWidth = 1; + this.lineJoin = 'miter'; + this.lineCap = 'butt'; + this.miterLimit = Z * 1; + this.globalAlpha = 1; + this.canvas = surfaceElement; + + var el = surfaceElement.ownerDocument.createElement('div'); + el.style.width = surfaceElement.clientWidth + 'px'; + el.style.height = surfaceElement.clientHeight + 'px'; + el.style.overflow = 'hidden'; + el.style.position = 'absolute'; + surfaceElement.appendChild(el); + + this.element_ = el; + this.arcScaleX_ = 1; + this.arcScaleY_ = 1; + this.lineScale_ = 1; + } + + var contextPrototype = CanvasRenderingContext2D_.prototype; + contextPrototype.clearRect = function() { + this.element_.innerHTML = ''; + this.currentPath_ = []; + }; + + contextPrototype.beginPath = function() { + // TODO: Branch current matrix so that save/restore has no effect + // as per safari docs. + this.currentPath_ = []; + }; + + contextPrototype.moveTo = function(aX, aY) { + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); + this.currentX_ = p.x; + this.currentY_ = p.y; + }; + + contextPrototype.lineTo = function(aX, aY) { + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); + + this.currentX_ = p.x; + this.currentY_ = p.y; + }; + + contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, + aCP2x, aCP2y, + aX, aY) { + var p = this.getCoords_(aX, aY); + var cp1 = this.getCoords_(aCP1x, aCP1y); + var cp2 = this.getCoords_(aCP2x, aCP2y); + bezierCurveTo(this, cp1, cp2, p); + }; + + // Helper function that takes the already fixed cordinates. + function bezierCurveTo(self, cp1, cp2, p) { + self.currentPath_.push({ + type: 'bezierCurveTo', + cp1x: cp1.x, + cp1y: cp1.y, + cp2x: cp2.x, + cp2y: cp2.y, + x: p.x, + y: p.y + }); + self.currentX_ = p.x; + self.currentY_ = p.y; + } + + contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { + // the following is lifted almost directly from + // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes + + var cp = this.getCoords_(aCPx, aCPy); + var p = this.getCoords_(aX, aY); + + var cp1 = { + x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), + y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) + }; + var cp2 = { + x: cp1.x + (p.x - this.currentX_) / 3.0, + y: cp1.y + (p.y - this.currentY_) / 3.0 + }; + + bezierCurveTo(this, cp1, cp2, p); + }; + + contextPrototype.arc = function(aX, aY, aRadius, + aStartAngle, aEndAngle, aClockwise) { + aRadius *= Z; + var arcType = aClockwise ? 'at' : 'wa'; + + var xStart = aX + mc(aStartAngle) * aRadius - Z2; + var yStart = aY + ms(aStartAngle) * aRadius - Z2; + + var xEnd = aX + mc(aEndAngle) * aRadius - Z2; + var yEnd = aY + ms(aEndAngle) * aRadius - Z2; + + // IE won't render arches drawn counter clockwise if xStart == xEnd. + if (xStart == xEnd && !aClockwise) { + xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something + // that can be represented in binary + } + + var p = this.getCoords_(aX, aY); + var pStart = this.getCoords_(xStart, yStart); + var pEnd = this.getCoords_(xEnd, yEnd); + + this.currentPath_.push({type: arcType, + x: p.x, + y: p.y, + radius: aRadius, + xStart: pStart.x, + yStart: pStart.y, + xEnd: pEnd.x, + yEnd: pEnd.y}); + + }; + + contextPrototype.rect = function(aX, aY, aWidth, aHeight) { + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + }; + + contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { + // Will destroy any existing path (same as FF behaviour) + this.beginPath(); + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + this.stroke(); + this.currentPath_ = []; + }; + + contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { + // Will destroy any existing path (same as FF behaviour) + this.beginPath(); + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + this.fill(); + this.currentPath_ = []; + }; + + contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { + var gradient = new CanvasGradient_('gradient'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; + return gradient; + }; + + contextPrototype.createRadialGradient = function(aX0, aY0, aR0, + aX1, aY1, aR1) { + var gradient = new CanvasGradient_('gradientradial'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.r0_ = aR0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; + gradient.r1_ = aR1; + return gradient; + }; + + contextPrototype.drawImage = function(image, var_args) { + var dx, dy, dw, dh, sx, sy, sw, sh; + + // to find the original width we overide the width and height + var oldRuntimeWidth = image.runtimeStyle.width; + var oldRuntimeHeight = image.runtimeStyle.height; + image.runtimeStyle.width = 'auto'; + image.runtimeStyle.height = 'auto'; + + // get the original size + var w = image.width; + var h = image.height; + + // and remove overides + image.runtimeStyle.width = oldRuntimeWidth; + image.runtimeStyle.height = oldRuntimeHeight; + + if (arguments.length == 3) { + dx = arguments[1]; + dy = arguments[2]; + sx = sy = 0; + sw = dw = w; + sh = dh = h; + } else if (arguments.length == 5) { + dx = arguments[1]; + dy = arguments[2]; + dw = arguments[3]; + dh = arguments[4]; + sx = sy = 0; + sw = w; + sh = h; + } else if (arguments.length == 9) { + sx = arguments[1]; + sy = arguments[2]; + sw = arguments[3]; + sh = arguments[4]; + dx = arguments[5]; + dy = arguments[6]; + dw = arguments[7]; + dh = arguments[8]; + } else { + throw Error('Invalid number of arguments'); + } + + var d = this.getCoords_(dx, dy); + + var w2 = sw / 2; + var h2 = sh / 2; + + var vmlStr = []; + + var W = 10; + var H = 10; + + // For some reason that I've now forgotten, using divs didn't work + vmlStr.push(' ' , + '', + ''); + + this.element_.insertAdjacentHTML('BeforeEnd', + vmlStr.join('')); + }; + + contextPrototype.stroke = function(aFill) { + var lineStr = []; + var lineOpen = false; + var a = processStyle(aFill ? this.fillStyle : this.strokeStyle); + var color = a.color; + var opacity = a.alpha * this.globalAlpha; + + var W = 10; + var H = 10; + + lineStr.push(''); + + if (!aFill) { + var lineWidth = this.lineScale_ * this.lineWidth; + + // VML cannot correctly render a line if the width is less than 1px. + // In that case, we dilute the color to make the line look thinner. + if (lineWidth < 1) { + opacity *= lineWidth; + } + + lineStr.push( + '' + ); + } else if (typeof this.fillStyle == 'object') { + var fillStyle = this.fillStyle; + var angle = 0; + var focus = {x: 0, y: 0}; + + // additional offset + var shift = 0; + // scale factor for offset + var expansion = 1; + + if (fillStyle.type_ == 'gradient') { + var x0 = fillStyle.x0_ / this.arcScaleX_; + var y0 = fillStyle.y0_ / this.arcScaleY_; + var x1 = fillStyle.x1_ / this.arcScaleX_; + var y1 = fillStyle.y1_ / this.arcScaleY_; + var p0 = this.getCoords_(x0, y0); + var p1 = this.getCoords_(x1, y1); + var dx = p1.x - p0.x; + var dy = p1.y - p0.y; + angle = Math.atan2(dx, dy) * 180 / Math.PI; + + // The angle should be a non-negative number. + if (angle < 0) { + angle += 360; + } + + // Very small angles produce an unexpected result because they are + // converted to a scientific notation string. + if (angle < 1e-6) { + angle = 0; + } + } else { + var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_); + var width = max.x - min.x; + var height = max.y - min.y; + focus = { + x: (p0.x - min.x) / width, + y: (p0.y - min.y) / height + }; + + width /= this.arcScaleX_ * Z; + height /= this.arcScaleY_ * Z; + var dimension = m.max(width, height); + shift = 2 * fillStyle.r0_ / dimension; + expansion = 2 * fillStyle.r1_ / dimension - shift; + } + + // We need to sort the color stops in ascending order by offset, + // otherwise IE won't interpret it correctly. + var stops = fillStyle.colors_; + stops.sort(function(cs1, cs2) { + return cs1.offset - cs2.offset; + }); + + var length = stops.length; + var color1 = stops[0].color; + var color2 = stops[length - 1].color; + var opacity1 = stops[0].alpha * this.globalAlpha; + var opacity2 = stops[length - 1].alpha * this.globalAlpha; + + var colors = []; + for (var i = 0; i < length; i++) { + var stop = stops[i]; + colors.push(stop.offset * expansion + shift + ' ' + stop.color); + } + + // When colors attribute is used, the meanings of opacity and o:opacity2 + // are reversed. + lineStr.push(''); + } else { + lineStr.push(''); + } + + lineStr.push(''); + + this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); + }; + + contextPrototype.fill = function() { + this.stroke(true); + } + + contextPrototype.closePath = function() { + this.currentPath_.push({type: 'close'}); + }; + + /** + * @private + */ + contextPrototype.getCoords_ = function(aX, aY) { + var m = this.m_; + return { + x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, + y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 + } + }; + + contextPrototype.save = function() { + var o = {}; + copyState(this, o); + this.aStack_.push(o); + this.mStack_.push(this.m_); + this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); + }; + + contextPrototype.restore = function() { + copyState(this.aStack_.pop(), this); + this.m_ = this.mStack_.pop(); + }; + + contextPrototype.translate = function(aX, aY) { + var m1 = [ + [1, 0, 0], + [0, 1, 0], + [aX, aY, 1] + ]; + + this.m_ = matrixMultiply(m1, this.m_); + }; + + contextPrototype.rotate = function(aRot) { + var c = mc(aRot); + var s = ms(aRot); + + var m1 = [ + [c, s, 0], + [-s, c, 0], + [0, 0, 1] + ]; + + this.m_ = matrixMultiply(m1, this.m_); + }; + + contextPrototype.scale = function(aX, aY) { + this.arcScaleX_ *= aX; + this.arcScaleY_ *= aY; + var m1 = [ + [aX, 0, 0], + [0, aY, 0], + [0, 0, 1] + ]; + + var m = this.m_ = matrixMultiply(m1, this.m_); + + // Get the line scale. + // Determinant of this.m_ means how much the area is enlarged by the + // transformation. So its square root can be used as a scale factor + // for width. + var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; + this.lineScale_ = sqrt(abs(det)); + }; + + /******** STUBS ********/ + contextPrototype.clip = function() { + // TODO: Implement + }; + + contextPrototype.arcTo = function() { + // TODO: Implement + }; + + contextPrototype.createPattern = function() { + return new CanvasPattern_; + }; + + // Gradient / Pattern Stubs + function CanvasGradient_(aType) { + this.type_ = aType; + this.x0_ = 0; + this.y0_ = 0; + this.r0_ = 0; + this.x1_ = 0; + this.y1_ = 0; + this.r1_ = 0; + this.colors_ = []; + } + + CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { + aColor = processStyle(aColor); + this.colors_.push({offset: aOffset, + color: aColor.color, + alpha: aColor.alpha}); + }; + + function CanvasPattern_() {} + + // set up externs + G_vmlCanvasManager = G_vmlCanvasManager_; + CanvasRenderingContext2D = CanvasRenderingContext2D_; + CanvasGradient = CanvasGradient_; + CanvasPattern = CanvasPattern_; + +})(); + +} // if diff --git a/src/webui/scripts/mocha-init.js b/src/webui/scripts/mocha-init.js index 17a0225f0..ce8f008c5 100644 --- a/src/webui/scripts/mocha-init.js +++ b/src/webui/scripts/mocha-init.js @@ -26,14 +26,14 @@ initializeWindows = function(){ title: "_(Download from URL)", loadMethod: 'iframe', contentURL:'download.html', - scrollbars: false, + scrollbars: true, resizable: false, maximizable: false, closable: true, paddingVertical: 0, paddingHorizontal: 0, width: 500, - height: 270 + height: 280 }); }); @@ -62,13 +62,13 @@ initializeWindows = function(){ title: "_(Download local torrent)", loadMethod: 'iframe', contentURL:'upload.html', - scrollbars: false, + scrollbars: true, resizable: false, maximizable: false, paddingVertical: 0, paddingHorizontal: 0, width: 500, - height: 120 + height: 150 }); }); diff --git a/src/webui/scripts/mocha-yc.js b/src/webui/scripts/mocha-yc.js new file mode 100644 index 000000000..ebc98b4ae --- /dev/null +++ b/src/webui/scripts/mocha-yc.js @@ -0,0 +1 @@ +var MUI=MochaUI=new Hash({version:"0.9.6 development",options:new Hash({theme:"default",advancedEffects:false,standardEffects:true}),path:{source:"scripts/source/",themes:"themes/",plugins:"plugins/"},themePath:function(){return MUI.path.themes+MUI.options.theme+"/"},files:new Hash()});MUI.files[MUI.path.source+"Core/Core.js"]="loaded";MUI.extend({Windows:{instances:new Hash()},ieSupport:"excanvas",updateContent:function(c){var c=$extend({element:null,childElement:null,method:null,data:null,title:null,content:null,loadMethod:null,url:null,scrollbars:null,padding:null,require:{},onContentLoaded:$empty},c);c.require=$extend({css:[],images:[],js:[],onload:null},c.require);var b={};if(!c.element){return}var d=c.element;if(MUI.Windows.instances.get(d.id)){b.recipient="window"}else{b.recipient="panel"}var a=d.retrieve("instance");if(c.title){a.titleEl.set("html",c.title)}var e=a.contentEl;b.contentContainer=c.childElement!=null?c.childElement:a.contentEl;var g=a.contentWrapperEl;if(!c.loadMethod){if(!a.options.loadMethod){if(!c.url){c.loadMethod="html"}else{c.loadMethod="xhr"}}else{c.loadMethod=a.options.loadMethod}}var f=c.scrollbars||a.options.scrollbars;if(b.contentContainer==a.contentEl){g.setStyles({overflow:f!=false&&c.loadMethod!="iframe"?"auto":"hidden"})}if(c.padding!=null){e.setStyles({"padding-top":c.padding.top,"padding-bottom":c.padding.bottom,"padding-left":c.padding.left,"padding-right":c.padding.right})}if(b.contentContainer==e){e.empty().show();e.getAllNext(".column").destroy();e.getAllNext(".columnHandle").destroy()}b.onContentLoaded=function(){if(c.require.js.length||typeof c.require.onload=="function"){new MUI.Require({js:c.require.js,onload:function(){if(Browser.Engine.presto){c.require.onload.delay(100)}else{c.require.onload()}c.onContentLoaded?c.onContentLoaded():a.fireEvent("onContentLoaded",d)}.bind(this)})}else{c.onContentLoaded?c.onContentLoaded():a.fireEvent("onContentLoaded",d)}};if(c.require.css.length||c.require.images.length){new MUI.Require({css:c.require.css,images:c.require.images,onload:function(){this.loadSelect(a,c,b)}.bind(this)})}else{this.loadSelect(a,c,b)}},loadSelect:function(a,c,b){switch(c.loadMethod){case"xhr":this.updateContentXHR(a,c,b);break;case"iframe":this.updateContentIframe(a,c,b);break;case"html":default:this.updateContentHTML(a,c,b);break}},updateContentXHR:function(a,c,b){var f=a.contentEl;var e=b.contentContainer;var d=b.onContentLoaded;new Request.HTML({url:c.url,update:e,method:c.method!=null?c.method:"get",data:c.data!=null?new Hash(c.data).toQueryString():"",evalScripts:a.options.evalScripts,evalResponse:a.options.evalResponse,onRequest:function(){if(b.recipient=="window"&&e==f){a.showSpinner()}else{if(b.recipient=="panel"&&e==f&&$("spinner")){$("spinner").show()}}}.bind(this),onFailure:function(g){if(e==f){var j=new RegExp("[\n\rs]*(.*)[\n\rs]*","gmi");var h=j.exec(g.responseText);if(!h){h="Unknown"}e.set("html","

    Error: "+h[1]+"

    ");if(b.recipient=="window"){a.hideSpinner()}else{if(b.recipient=="panel"&&$("spinner")){$("spinner").hide()}}}}.bind(this),onSuccess:function(){if(e==f){if(b.recipient=="window"){a.hideSpinner()}else{if(b.recipient=="panel"&&$("spinner")){$("spinner").hide()}}}Browser.Engine.trident4?d.delay(750):d()}.bind(this),onComplete:function(){}.bind(this)}).send()},updateContentIframe:function(a,c,b){var f=a.contentEl;var e=b.contentContainer;var g=a.contentWrapperEl;var d=b.onContentLoaded;if(a.options.contentURL==""||e!=f){return}a.iframeEl=new Element("iframe",{id:a.options.id+"_iframe",name:a.options.id+"_iframe","class":"mochaIframe",src:c.url,marginwidth:0,marginheight:0,frameBorder:0,scrolling:"auto",styles:{height:g.offsetHeight-g.getStyle("border-top").toInt()-g.getStyle("border-bottom").toInt(),width:a.panelEl?g.offsetWidth-g.getStyle("border-left").toInt()-g.getStyle("border-right").toInt():"100%"}}).injectInside(f);a.iframeEl.addEvent("load",function(h){if(b.recipient=="window"){a.hideSpinner()}else{if(b.recipient=="panel"&&e==f&&$("spinner")){$("spinner").hide()}}Browser.Engine.trident4?d.delay(50):d()}.bind(this));if(b.recipient=="window"){a.showSpinner()}else{if(b.recipient=="panel"&&e==f&&$("spinner")){$("spinner").show()}}},updateContentHTML:function(a,c,b){var f=a.contentEl;var e=b.contentContainer;var d=b.onContentLoaded;var g=new Array("element","textnode","whitespace","collection");if(g.contains($type(c.content))){c.content.inject(e)}else{e.set("html",c.content)}if(e==f){if(b.recipient=="window"){a.hideSpinner()}else{if(b.recipient=="panel"&&$("spinner")){$("spinner").hide()}}}Browser.Engine.trident4?d.delay(50):d()},reloadIframe:function(a){Browser.Engine.gecko?$(a).src=$(a).src:top.frames[a].location.reload(true)},roundedRect:function(f,d,j,h,c,b,g,e){f.fillStyle="rgba("+g.join(",")+","+e+")";f.beginPath();f.moveTo(d,j+b);f.lineTo(d,j+c-b);f.quadraticCurveTo(d,j+c,d+b,j+c);f.lineTo(d+h-b,j+c);f.quadraticCurveTo(d+h,j+c,d+h,j+c-b);f.lineTo(d+h,j+b);f.quadraticCurveTo(d+h,j,d+h-b,j);f.lineTo(d+b,j);f.quadraticCurveTo(d,j,d,j+b);f.fill()},triangle:function(e,c,h,g,b,f,d){e.beginPath();e.moveTo(c+g,h);e.lineTo(c,h+b);e.lineTo(c+g,h+b);e.closePath();e.fillStyle="rgba("+f.join(",")+","+d+")";e.fill()},circle:function(d,b,g,f,e,c){d.beginPath();d.arc(b,g,f,0,Math.PI*2,true);d.fillStyle="rgba("+e.join(",")+","+c+")";d.fill()},notification:function(a){new MUI.Window({loadMethod:"html",closeAfter:1500,type:"notification",addClass:"notification",content:a,width:220,height:40,y:53,padding:{top:10,right:12,bottom:10,left:12},shadowBlur:5})},toggleAdvancedEffects:function(a){if(MUI.options.advancedEffects==false){MUI.options.advancedEffects=true;if(a){this.toggleAdvancedEffectsLink=new Element("div",{"class":"check",id:"toggleAdvancedEffects_check"}).inject(a)}}else{MUI.options.advancedEffects=false;if(this.toggleAdvancedEffectsLink){this.toggleAdvancedEffectsLink.destroy()}}},toggleStandardEffects:function(a){if(MUI.options.standardEffects==false){MUI.options.standardEffects=true;if(a){this.toggleStandardEffectsLink=new Element("div",{"class":"check",id:"toggleStandardEffects_check"}).inject(a)}}else{MUI.options.standardEffects=false;if(this.toggleStandardEffectsLink){this.toggleStandardEffectsLink.destroy()}}},underlayInitialize:function(){var a=new Element("div",{id:"windowUnderlay",styles:{height:parent.getCoordinates().height,opacity:0.01,display:"none"}}).inject(document.body)},setUnderlaySize:function(){$("windowUnderlay").setStyle("height",parent.getCoordinates().height)}});function fixPNG(e){if(Browser.Engine.trident4&&document.body.filters){var b=(e.id)?"id='"+e.id+"' ":"";var d=(e.className)?"class='"+e.className+"' ":"";var f=(e.title)?"title='"+e.title+"' ":"title='"+e.alt+"' ";var c="display:inline-block;"+e.style.cssText;var a="";e.outerHTML=a}}document.addEvent("mousedown",function(a){MUI.blurAll.delay(50)});window.addEvent("domready",function(){MUI.underlayInitialize()});window.addEvent("resize",function(){if($("windowUnderlay")){MUI.setUnderlaySize()}else{MUI.underlayInitialize()}});Element.implement({hide:function(){this.setStyle("display","none");return this},show:function(){this.setStyle("display","block");return this}});Element.implement({shake:function(b,h){b=b||3;h=h||500;h=(h/50).toInt()-1;var e=this.getParent();if(e!=$(document.body)&&e.getStyle("position")=="static"){e.setStyle("position","relative")}var a=this.getStyle("position");if(a=="static"){this.setStyle("position","relative");a="relative"}if(Browser.Engine.trident){e.setStyle("height",e.getStyle("height"))}var g=this.getPosition(e);if(a=="relative"&&!Browser.Engine.presto){g.x-=e.getStyle("paddingLeft").toInt();g.y-=e.getStyle("paddingTop").toInt()}var f=this.retrieve("morph");if(f){f.cancel();var c=f.options}var f=this.get("morph",{duration:50,link:"chain"});for(var d=0;d]*>([\s\S]*?)<\/body>/i);c=(b)?b[1]:c;var a=new Element("div");return a.set("html",c)}});MUI.getCSSRule=function(b){for(var c=0;c=200)&&(a<300))}});Browser.Request=function(){return $try(function(){return new ActiveXObject("MSXML2.XMLHTTP")},function(){return new XMLHttpRequest()})}}MUI.Require=new Class({Implements:[Options],options:{css:[],images:[],js:[],onload:$empty},initialize:function(a){this.setOptions(a);var a=this.options;this.assetsToLoad=a.css.length+a.images.length+a.js.length;this.assetsLoaded=0;var b=0;if(a.css.length){a.css.each(function(c){this.getAsset(c,function(){if(b==a.css.length-1){if(this.assetsLoaded==this.assetsToLoad-1){this.requireOnload()}else{this.assetsLoaded++;this.requireContinue.delay(50,this)}}else{b++;this.assetsLoaded++}}.bind(this))}.bind(this))}else{if(!a.js.length&&!a.images.length){this.options.onload();return true}else{this.requireContinue.delay(50,this)}}},requireOnload:function(){this.assetsLoaded++;if(this.assetsLoaded==this.assetsToLoad){this.options.onload();return true}},requireContinue:function(){var a=this.options;if(a.images.length){a.images.each(function(b){this.getAsset(b,this.requireOnload.bind(this))}.bind(this))}if(a.js.length){a.js.each(function(b){this.getAsset(b,this.requireOnload.bind(this))}.bind(this))}},getAsset:function(b,c){if(MUI.files[b]=="loaded"){if(typeof c=="function"){c()}return true}else{if(MUI.files[b]=="loading"){var d=0;var a=(function(){d++;if(MUI.files[b]=="loading"&&d<"100"){return}$clear(a);if(typeof c=="function"){c()}}).periodical(50)}else{MUI.files[b]="loading";properties={onload:c!="undefined"?c:$empty};var e=properties.onload;properties.onload=function(){MUI.files[b]="loaded";if(e){e()}}.bind(this);switch(b.match(/\.\w+$/)[0]){case".js":return Asset.javascript(b,properties);case".css":return Asset.css(b,properties);case".jpg":case".png":case".gif":return Asset.image(b,properties)}alert('The required file "'+b+'" could not be loaded')}}}});$extend(Asset,{javascript:function(f,d){d=$extend({onload:$empty,document:document,check:$lambda(true)},d);if($(d.id)){d.onload();return $(d.id)}var b=new Element("script",{src:f,type:"text/javascript"});var e=d.onload.bind(b),a=d.check,g=d.document;delete d.onload;delete d.check;delete d.document;if(!Browser.Engine.webkit419&&!Browser.Engine.presto){b.addEvents({load:e,readystatechange:function(){if(Browser.Engine.trident&&["loaded","complete"].contains(this.readyState)){e()}}}).setProperties(d)}else{var c=(function(){if(!$try(a)){return}$clear(c);Browser.Engine.presto?e.delay(500):e()}).periodical(50)}return b.inject(g.head)},css:function(b,a){a=$extend({id:null,media:"screen",onload:$empty},a);new Request({method:"get",url:b,onComplete:function(c){var d=new Element("link",{id:a.id,rel:"stylesheet",media:a.media,type:"text/css",href:b}).inject(document.head);a.onload()}.bind(this),onFailure:function(c){},onSuccess:function(){}.bind(this)}).send()}});MUI.extend({newWindowsFromJSON:function(a){new MUI.Require({js:[MUI.path.source+"Window/Windows-from-json.js"],onload:function(){new MUI.newWindowsFromJSON(a)}})},arrangeCascade:function(){new MUI.Require({js:[MUI.path.source+"Window/Arrange-cascade.js"],onload:function(){new MUI.arrangeCascade()}})},arrangeTile:function(){new MUI.Require({js:[MUI.path.source+"Window/Arrange-tile.js"],onload:function(){new MUI.arrangeTile()}})},saveWorkspace:function(){new MUI.Require({js:[MUI.path.source+"Layout/Workspaces.js"],onload:function(){new MUI.saveWorkspace()}})},loadWorkspace:function(){new MUI.Require({js:[MUI.path.source+"Layout/Workspaces.js"],onload:function(){new MUI.loadWorkspace()}})},Themes:{init:function(a){new MUI.Require({js:[MUI.path.source+"Utilities/Themes.js"],onload:function(){MUI.Themes.init(a)}})}}});MUI.files[MUI.path.source+"Utilities/Themes.js"]=1;MUI.Themes={init:function(a){this.newTheme=a.toLowerCase();if(!this.newTheme||this.newTheme==null||this.newTheme==MUI.options.theme.toLowerCase()){return}if($("spinner")){$("spinner").show()}this.oldURIs=[];this.oldSheets=[];$$("link").each(function(c){var b=c.get("href");if(b.contains(MUI.path.themes+MUI.options.theme)){this.oldURIs.push(b);this.oldSheets.push(c)}}.bind(this));this.newSheetURLs=this.oldURIs.map(function(c,b){return c.replace("/"+MUI.options.theme+"/","/"+MUI.Themes.newTheme+"/")}.bind(this));this.sheetsToLoad=this.oldURIs.length;this.sheetsLoaded=0;this.newSheets=[];this.newSheetURLs.each(function(d){var b=d;var c=new Request({method:"get",url:b,onComplete:function(e){var f=new Element("link",{rel:"stylesheet",media:"screen",type:"text/css",href:b});this.newSheets.push(f)}.bind(this),onFailure:function(e){this.themeLoadSuccess=false;if($("spinner")){$("spinner").hide()}MUI.notification("Stylesheets did not load.")},onSuccess:function(){this.sheetsLoaded++;if(this.sheetsLoaded==this.sheetsToLoad){this.updateThemeStylesheets();this.themeLoadSuccess=true}}.bind(this)});c.send()}.bind(this))},updateThemeStylesheets:function(){this.oldSheets.each(function(a){a.destroy()});this.newSheets.each(function(a){MUI.files[a.get("href")]=1;a.inject(document.head)});if(Browser.Engine.trident){this.redraw.delay(1250,this)}else{this.redraw.delay(250,this)}},redraw:function(){$$(".replaced").removeClass("replaced");$$(".mocha").each(function(c){var b=c.retrieve("instance");b.setColors();b.drawWindow()});if(MUI.Dock){if(MUI.Dock.options.useControls){MUI.Dock.setDockColors();MUI.Dock.renderDockControls()}}if(MUI.Desktop.desktop){var a=(function(){if(MUI.Desktop.desktop.getStyle("overflow")!="hidden"){return}$clear(a);MUI.Desktop.setDesktopSize()}).periodical(50)}if($("spinner")){$("spinner").hide()}MUI.options.theme=this.newTheme}};window.addEvent("load",function(){if($("themeControl")){$("themeControl").getElements("option").setProperty("selected","false");if($("chooseTheme")){$("chooseTheme").setProperty("selected","true")}}});MUI.files[MUI.path.source+"Window/Window.js"]="loading";MUI.extend({Windows:{instances:new Hash(),indexLevel:100,windowIDCount:0,windowsVisible:true,focusingWindow:false}});MUI.Windows.windowOptions={id:null,title:"New Window",icon:false,type:"window",require:{css:[],images:[],js:[],onload:null},loadMethod:null,method:"get",contentURL:null,data:null,closeAfter:false,evalScripts:true,evalResponse:false,content:"Window content",toolbar:false,toolbarPosition:"top",toolbarHeight:29,toolbarURL:"pages/lipsum.html",toolbarData:null,toolbarContent:"",toolbarOnload:$empty,toolbar2:false,toolbar2Position:"bottom",toolbar2Height:29,toolbar2URL:"pages/lipsum.html",toolbar2Data:null,toolbar2Content:"",toolbar2Onload:$empty,container:null,restrict:true,shape:"box",collapsible:true,minimizable:true,maximizable:true,closable:true,storeOnClose:false,modalOverlayClose:true,draggable:null,draggableGrid:false,draggableLimit:false,draggableSnap:false,resizable:null,resizeLimit:{x:[250,2500],y:[125,2000]},addClass:"",width:300,height:125,headerHeight:25,footerHeight:25,cornerRadius:8,x:null,y:null,scrollbars:true,padding:{top:10,right:12,bottom:10,left:12},shadowBlur:5,shadowOffset:{x:0,y:1},controlsOffset:{right:6,top:6},useCanvas:true,useCanvasControls:true,useSpinner:true,headerStartColor:[250,250,250],headerStopColor:[229,229,229],bodyBgColor:[229,229,229],minimizeBgColor:[255,255,255],minimizeColor:[0,0,0],maximizeBgColor:[255,255,255],maximizeColor:[0,0,0],closeBgColor:[255,255,255],closeColor:[0,0,0],resizableColor:[254,254,254],onBeforeBuild:$empty,onContentLoaded:$empty,onFocus:$empty,onBlur:$empty,onResize:$empty,onMinimize:$empty,onMaximize:$empty,onRestore:$empty,onClose:$empty,onCloseComplete:$empty};MUI.Windows.windowOptionsOriginal=$merge(MUI.Windows.windowOptions);MUI.Window=new Class({Implements:[Events,Options],options:MUI.Windows.windowOptions,initialize:function(a){this.setOptions(a);var a=this.options;$extend(this,{mochaControlsWidth:0,minimizebuttonX:0,maximizebuttonX:0,closebuttonX:0,headerFooterShadow:a.headerHeight+a.footerHeight+(a.shadowBlur*2),oldTop:0,oldLeft:0,isMaximized:false,isMinimized:false,isCollapsed:false,timestamp:$time()});if(a.type!="window"){a.container=document.body;a.minimizable=false}if(!a.container){a.container=MUI.Desktop&&MUI.Desktop.desktop?MUI.Desktop.desktop:document.body}if(a.resizable==null){if(a.type!="window"||a.shape=="gauge"){a.resizable=false}else{a.resizable=true}}if(a.draggable==null){a.draggable=a.type!="window"?false:true}if(a.shape=="gauge"||a.type=="notification"){a.collapsible=false;a.maximizable=false;a.contentBgColor="transparent";a.scrollbars=false;a.footerHeight=0}if(a.type=="notification"){a.closable=false;a.headerHeight=0}if(MUI.Dock&&$(MUI.options.dock)){if(MUI.Dock.dock&&a.type!="modal"&&a.type!="modal2"){a.minimizable=a.minimizable}}else{a.minimizable=false}a.maximizable=MUI.Desktop&&MUI.Desktop.desktop&&a.maximizable&&a.type!="modal"&&a.type!="modal2";if(this.options.type=="modal2"){this.options.shadowBlur=0;this.options.shadowOffset={x:0,y:0};this.options.useSpinner=false;this.options.useCanvas=false;this.options.footerHeight=0;this.options.headerHeight=0}a.id=a.id||"win"+(++MUI.Windows.windowIDCount);this.windowEl=$(a.id);if(a.require.css.length||a.require.images.length){new MUI.Require({css:a.require.css,images:a.require.images,onload:function(){this.newWindow()}.bind(this)})}else{this.newWindow()}return this},saveValues:function(){var a=this.windowEl.getCoordinates();this.options.x=a.left.toInt();this.options.y=a.top.toInt()},newWindow:function(d){var b=MUI.Windows.instances;var k=MUI.Windows.instances.get(this.options.id);var l=this.options;if(k){var j=k}if(this.windowEl&&!this.isClosing){if(j.isMinimized){MUI.Dock.restoreMinimized(this.windowEl)}else{if(j.isCollapsed){MUI.collapseToggle(this.windowEl);setTimeout(MUI.focusWindow.pass(this.windowEl,this),10)}else{if(this.windowEl.hasClass("windowClosed")){if(j.check){j.check.show()}this.windowEl.removeClass("windowClosed");this.windowEl.setStyle("opacity",0);this.windowEl.addClass("mocha");if(MUI.Dock&&$(MUI.options.dock)&&j.options.type=="window"){var g=$(j.options.id+"_dockTab");if(g!=null){g.show()}MUI.Desktop.setDesktopSize()}j.displayNewWindow()}else{var h=document.getCoordinates();if(this.windowEl.getStyle("left").toInt()>h.width||this.windowEl.getStyle("top").toInt()>h.height){MUI.centerWindow(this.windowEl)}setTimeout(MUI.focusWindow.pass(this.windowEl,this),10);if(MUI.options.standardEffects==true){this.windowEl.shake()}}}}return}else{b.set(l.id,this)}this.isClosing=false;this.fireEvent("onBeforeBuild");MUI.Windows.indexLevel++;this.windowEl=new Element("div",{"class":"mocha",id:l.id,styles:{position:"absolute",width:l.width,height:l.height,display:"block",opacity:0,zIndex:MUI.Windows.indexLevel+=2}});this.windowEl.store("instance",this);this.windowEl.addClass(l.addClass);if(l.type=="modal2"){this.windowEl.addClass("modal2")}if(Browser.Engine.trident&&l.shape=="gauge"){this.windowEl.setStyle("backgroundImage","url(../images/spacer.gif)")}if((this.options.type=="modal"||l.type=="modal2")&&Browser.Platform.mac&&Browser.Engine.gecko){if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){var c=new Number(RegExp.$1);if(c<3){this.windowEl.setStyle("position","fixed")}}}if(l.loadMethod=="iframe"){l.padding={top:0,right:0,bottom:0,left:0}}this.insertWindowElements();this.titleEl.set("html",l.title);this.contentWrapperEl.setStyle("overflow","hidden");this.contentEl.setStyles({"padding-top":l.padding.top,"padding-bottom":l.padding.bottom,"padding-left":l.padding.left,"padding-right":l.padding.right});if(l.shape=="gauge"){if(l.useCanvasControls){this.canvasControlsEl.setStyle("visibility","hidden")}else{this.controlsEl.setStyle("visibility","hidden")}this.windowEl.addEvent("mouseover",function(){this.mouseover=true;var m=function(){if(this.mouseover!=false){if(l.useCanvasControls){this.canvasControlsEl.setStyle("visibility","visible")}else{this.controlsEl.setStyle("visibility","visible")}this.canvasHeaderEl.setStyle("visibility","visible");this.titleEl.show()}};m.delay(0,this)}.bind(this));this.windowEl.addEvent("mouseleave",function(){this.mouseover=false;if(this.options.useCanvasControls){this.canvasControlsEl.setStyle("visibility","hidden")}else{this.controlsEl.setStyle("visibility","hidden")}this.canvasHeaderEl.setStyle("visibility","hidden");this.titleEl.hide()}.bind(this))}this.windowEl.inject(l.container);this.setColors();if(l.type!="notification"){this.setMochaControlsWidth()}MUI.updateContent({element:this.windowEl,content:l.content,method:l.method,url:l.contentURL,data:l.data,onContentLoaded:null,require:{js:l.require.js,onload:l.require.onload}});if(this.options.toolbar==true){MUI.updateContent({element:this.windowEl,childElement:this.toolbarEl,content:l.toolbarContent,loadMethod:"xhr",method:l.method,url:l.toolbarURL,data:l.toolbarData,onContentLoaded:l.toolbarOnload})}if(this.options.toolbar2==true){MUI.updateContent({element:this.windowEl,childElement:this.toolbar2El,content:l.toolbar2Content,loadMethod:"xhr",method:l.method,url:l.toolbar2URL,data:l.toolbar2Data,onContentLoaded:l.toolbar2Onload})}this.drawWindow();this.attachDraggable();this.attachResizable();this.setupEvents();if(l.resizable){this.adjustHandles()}if(l.container==document.body||l.container==MUI.Desktop.desktop){var a=window.getSize()}else{var a=$(this.options.container).getSize()}if(!l.y){if(MUI.Desktop&&MUI.Desktop.desktop){var e=(a.y*0.5)-(this.windowEl.offsetHeight*0.5);if(e<-l.shadowBlur){e=-l.shadowBlur}}else{var e=window.getScroll().y+(window.getSize().y*0.5)-(this.windowEl.offsetHeight*0.5);if(e<-l.shadowBlur){e=-l.shadowBlur}}}else{var e=l.y-l.shadowBlur}if(!this.options.x){var f=(a.x*0.5)-(this.windowEl.offsetWidth*0.5);if(f<-l.shadowBlur){f=-l.shadowBlur}}else{var f=l.x-l.shadowBlur}this.windowEl.setStyles({top:e,left:f});this.opacityMorph=new Fx.Morph(this.windowEl,{duration:350,transition:Fx.Transitions.Sine.easeInOut,onComplete:function(){if(Browser.Engine.trident){this.drawWindow()}}.bind(this)});this.displayNewWindow();this.morph=new Fx.Morph(this.windowEl,{duration:200});this.windowEl.store("morph",this.morph);this.resizeMorph=new Fx.Elements([this.contentWrapperEl,this.windowEl],{duration:400,transition:Fx.Transitions.Sine.easeInOut,onStart:function(){this.resizeAnimation=this.drawWindow.periodical(20,this)}.bind(this),onComplete:function(){$clear(this.resizeAnimation);this.drawWindow();if(this.iframeEl){this.iframeEl.setStyle("visibility","visible")}}.bind(this)});this.windowEl.store("resizeMorph",this.resizeMorph);if($(this.windowEl.id+"LinkCheck")){this.check=new Element("div",{"class":"check",id:this.options.id+"_check"}).inject(this.windowEl.id+"LinkCheck")}if(this.options.closeAfter!=false){MUI.closeWindow.delay(this.options.closeAfter,this,this.windowEl)}if(MUI.Dock&&$(MUI.options.dock)&&this.options.type=="window"){MUI.Dock.createDockTab(this.windowEl)}},displayNewWindow:function(){options=this.options;if(options.type=="modal"||options.type=="modal2"){MUI.currentModal=this.windowEl;if(Browser.Engine.trident4){$("modalFix").show()}$("modalOverlay").show();if(MUI.options.advancedEffects==false){$("modalOverlay").setStyle("opacity",0.6);this.windowEl.setStyles({zIndex:11000,opacity:1})}else{MUI.Modal.modalOverlayCloseMorph.cancel();MUI.Modal.modalOverlayOpenMorph.start({opacity:0.6});this.windowEl.setStyles({zIndex:11000});this.opacityMorph.start({opacity:1})}$$(".dockTab").removeClass("activeDockTab");$$(".mocha").removeClass("isFocused");this.windowEl.addClass("isFocused")}else{if(MUI.options.advancedEffects==false){this.windowEl.setStyle("opacity",1);setTimeout(MUI.focusWindow.pass(this.windowEl,this),10)}else{if(Browser.Engine.trident){this.drawWindow(false)}this.opacityMorph.start({opacity:1});setTimeout(MUI.focusWindow.pass(this.windowEl,this),10)}}},setupEvents:function(){var a=this.windowEl;if(this.closeButtonEl){this.closeButtonEl.addEvent("click",function(b){new Event(b).stop();MUI.closeWindow(a)}.bind(this))}if(this.options.type=="window"){a.addEvent("mousedown",function(b){if(Browser.Engine.trident){new Event(b).stop()}MUI.focusWindow(a);if(a.getStyle("top").toInt()<-this.options.shadowBlur){a.setStyle("top",-this.options.shadowBlur)}}.bind(this))}if(this.minimizeButtonEl){this.minimizeButtonEl.addEvent("click",function(b){new Event(b).stop();MUI.Dock.minimizeWindow(a)}.bind(this))}if(this.maximizeButtonEl){this.maximizeButtonEl.addEvent("click",function(b){new Event(b).stop();if(this.isMaximized){MUI.Desktop.restoreWindow(a)}else{MUI.Desktop.maximizeWindow(a)}}.bind(this))}if(this.options.collapsible==true){this.titleEl.addEvent("selectstart",function(b){b=new Event(b).stop()}.bind(this));if(Browser.Engine.trident){this.titleBarEl.addEvent("mousedown",function(b){this.titleEl.setCapture()}.bind(this));this.titleBarEl.addEvent("mouseup",function(b){this.titleEl.releaseCapture()}.bind(this))}this.titleBarEl.addEvent("dblclick",function(b){b=new Event(b).stop();MUI.collapseToggle(this.windowEl)}.bind(this))}},attachDraggable:function(){var a=this.windowEl;if(!this.options.draggable){return}this.windowDrag=new Drag.Move(a,{handle:this.titleBarEl,container:this.options.restrict==true?$(this.options.container):false,grid:this.options.draggableGrid,limit:this.options.draggableLimit,snap:this.options.draggableSnap,onStart:function(){if(this.options.type!="modal"&&this.options.type!="modal2"){MUI.focusWindow(a);$("windowUnderlay").show()}if(this.iframeEl){if(!Browser.Engine.trident){this.iframeEl.setStyle("visibility","hidden")}else{this.iframeEl.hide()}}}.bind(this),onComplete:function(){if(this.options.type!="modal"&&this.options.type!="modal2"){$("windowUnderlay").hide()}if(this.iframeEl){if(!Browser.Engine.trident){this.iframeEl.setStyle("visibility","visible")}else{this.iframeEl.show()}}this.saveValues()}.bind(this)})},attachResizable:function(){var a=this.windowEl;if(!this.options.resizable){return}this.resizable1=this.windowEl.makeResizable({handle:[this.n,this.ne,this.nw],limit:{y:[function(){return this.windowEl.getStyle("top").toInt()+this.windowEl.getStyle("height").toInt()-this.options.resizeLimit.y[1]}.bind(this),function(){return this.windowEl.getStyle("top").toInt()+this.windowEl.getStyle("height").toInt()-this.options.resizeLimit.y[0]}.bind(this)]},modifiers:{x:false,y:"top"},onStart:function(){this.resizeOnStart();this.coords=this.contentWrapperEl.getCoordinates();this.y2=this.coords.top.toInt()+this.contentWrapperEl.offsetHeight}.bind(this),onDrag:function(){this.coords=this.contentWrapperEl.getCoordinates();this.contentWrapperEl.setStyle("height",this.y2-this.coords.top.toInt());this.resizeOnDrag()}.bind(this),onComplete:function(){this.resizeOnComplete()}.bind(this)});this.resizable2=this.contentWrapperEl.makeResizable({handle:[this.e,this.ne],limit:{x:[this.options.resizeLimit.x[0]-(this.options.shadowBlur*2),this.options.resizeLimit.x[1]-(this.options.shadowBlur*2)]},modifiers:{x:"width",y:false},onStart:function(){this.resizeOnStart()}.bind(this),onDrag:function(){this.resizeOnDrag()}.bind(this),onComplete:function(){this.resizeOnComplete()}.bind(this)});this.resizable3=this.contentWrapperEl.makeResizable({container:this.options.restrict==true?$(this.options.container):false,handle:this.se,limit:{x:[this.options.resizeLimit.x[0]-(this.options.shadowBlur*2),this.options.resizeLimit.x[1]-(this.options.shadowBlur*2)],y:[this.options.resizeLimit.y[0]-this.headerFooterShadow,this.options.resizeLimit.y[1]-this.headerFooterShadow]},modifiers:{x:"width",y:"height"},onStart:function(){this.resizeOnStart()}.bind(this),onDrag:function(){this.resizeOnDrag()}.bind(this),onComplete:function(){this.resizeOnComplete()}.bind(this)});this.resizable4=this.contentWrapperEl.makeResizable({handle:[this.s,this.sw],limit:{y:[this.options.resizeLimit.y[0]-this.headerFooterShadow,this.options.resizeLimit.y[1]-this.headerFooterShadow]},modifiers:{x:false,y:"height"},onStart:function(){this.resizeOnStart()}.bind(this),onDrag:function(){this.resizeOnDrag()}.bind(this),onComplete:function(){this.resizeOnComplete()}.bind(this)});this.resizable5=this.windowEl.makeResizable({handle:[this.w,this.sw,this.nw],limit:{x:[function(){return this.windowEl.getStyle("left").toInt()+this.windowEl.getStyle("width").toInt()-this.options.resizeLimit.x[1]}.bind(this),function(){return this.windowEl.getStyle("left").toInt()+this.windowEl.getStyle("width").toInt()-this.options.resizeLimit.x[0]}.bind(this)]},modifiers:{x:"left",y:false},onStart:function(){this.resizeOnStart();this.coords=this.contentWrapperEl.getCoordinates();this.x2=this.coords.left.toInt()+this.contentWrapperEl.offsetWidth}.bind(this),onDrag:function(){this.coords=this.contentWrapperEl.getCoordinates();this.contentWrapperEl.setStyle("width",this.x2-this.coords.left.toInt());this.resizeOnDrag()}.bind(this),onComplete:function(){this.resizeOnComplete()}.bind(this)})},resizeOnStart:function(){$("windowUnderlay").show();if(this.iframeEl){if(!Browser.Engine.trident){this.iframeEl.setStyle("visibility","hidden")}else{this.iframeEl.hide()}}},resizeOnDrag:function(){if(Browser.Engine.gecko){this.windowEl.getElements(".panel").each(function(a){a.store("oldOverflow",a.getStyle("overflow"));a.setStyle("overflow","visible")})}this.drawWindow();this.adjustHandles();if(Browser.Engine.gecko){this.windowEl.getElements(".panel").each(function(a){a.setStyle("overflow",a.retrieve("oldOverflow"))})}},resizeOnComplete:function(){$("windowUnderlay").hide();if(this.iframeEl){if(!Browser.Engine.trident){this.iframeEl.setStyle("visibility","visible")}else{this.iframeEl.show();this.iframeEl.setStyle("width","99%");this.iframeEl.setStyle("height",this.contentWrapperEl.offsetHeight);this.iframeEl.setStyle("width","100%");this.iframeEl.setStyle("height",this.contentWrapperEl.offsetHeight)}}if(this.contentWrapperEl.getChildren(".column")!=null){MUI.rWidth(this.contentWrapperEl);this.contentWrapperEl.getChildren(".column").each(function(a){MUI.panelHeight(a)})}this.fireEvent("onResize",this.windowEl)},adjustHandles:function(){var d=this.options.shadowBlur;var j=d*2;var k=this.options.shadowOffset;var e=d-k.y-1;var g=d+k.x-1;var a=d+k.y-1;var c=d-k.x-1;var f=this.windowEl.getCoordinates();var b=f.width-j+2;var h=f.height-j+2;this.n.setStyles({top:e,left:c+10,width:b-20});this.e.setStyles({top:e+10,right:g,height:h-30});this.s.setStyles({bottom:a,left:c+10,width:b-30});this.w.setStyles({top:e+10,left:c,height:h-20});this.ne.setStyles({top:e,right:g});this.se.setStyles({bottom:a,right:g});this.sw.setStyles({bottom:a,left:c});this.nw.setStyles({top:e,left:c})},detachResizable:function(){this.resizable1.detach();this.resizable2.detach();this.resizable3.detach();this.resizable4.detach();this.resizable5.detach();this.windowEl.getElements(".handle").hide()},reattachResizable:function(){this.resizable1.attach();this.resizable2.attach();this.resizable3.attach();this.resizable4.attach();this.resizable5.attach();this.windowEl.getElements(".handle").show()},insertWindowElements:function(){var d=this.options;var a=d.height;var e=d.width;var f=d.id;var b={};if(Browser.Engine.trident4){b.zIndexFixEl=new Element("iframe",{id:f+"_zIndexFix","class":"zIndexFix",scrolling:"no",marginWidth:0,marginHeight:0,src:"",styles:{position:"absolute"}}).inject(this.windowEl)}b.overlayEl=new Element("div",{id:f+"_overlay","class":"mochaOverlay",styles:{position:"absolute",top:0,left:0}}).inject(this.windowEl);b.titleBarEl=new Element("div",{id:f+"_titleBar","class":"mochaTitlebar",styles:{cursor:d.draggable?"move":"default"}}).inject(b.overlayEl,"top");b.titleEl=new Element("h3",{id:f+"_title","class":"mochaTitle"}).inject(b.titleBarEl);if(d.icon!=false){b.titleEl.setStyles({"padding-left":28,background:"url("+d.icon+") 5px 4px no-repeat"})}b.contentBorderEl=new Element("div",{id:f+"_contentBorder","class":"mochaContentBorder"}).inject(b.overlayEl);if(d.toolbar){b.toolbarWrapperEl=new Element("div",{id:f+"_toolbarWrapper","class":"mochaToolbarWrapper",styles:{height:d.toolbarHeight}}).inject(b.contentBorderEl,d.toolbarPosition=="bottom"?"after":"before");if(d.toolbarPosition=="bottom"){b.toolbarWrapperEl.addClass("bottom")}b.toolbarEl=new Element("div",{id:f+"_toolbar","class":"mochaToolbar",styles:{height:d.toolbarHeight}}).inject(b.toolbarWrapperEl)}if(d.toolbar2){b.toolbar2WrapperEl=new Element("div",{id:f+"_toolbar2Wrapper","class":"mochaToolbarWrapper",styles:{height:d.toolbar2Height}}).inject(b.contentBorderEl,d.toolbar2Position=="bottom"?"after":"before");if(d.toolbar2Position=="bottom"){b.toolbar2WrapperEl.addClass("bottom")}b.toolbar2El=new Element("div",{id:f+"_toolbar2","class":"mochaToolbar",styles:{height:d.toolbar2Height}}).inject(b.toolbar2WrapperEl)}b.contentWrapperEl=new Element("div",{id:f+"_contentWrapper","class":"mochaContentWrapper",styles:{width:e+"px",height:a+"px"}}).inject(b.contentBorderEl);if(this.options.shape=="gauge"){b.contentBorderEl.setStyle("borderWidth",0)}b.contentEl=new Element("div",{id:f+"_content","class":"mochaContent"}).inject(b.contentWrapperEl);if(this.options.useCanvas==true&&Browser.Engine.trident!=true){b.canvasEl=new Element("canvas",{id:f+"_canvas","class":"mochaCanvas",width:10,height:10}).inject(this.windowEl)}if(this.options.useCanvas==true&&Browser.Engine.trident){b.canvasEl=new Element("canvas",{id:f+"_canvas","class":"mochaCanvas",width:50000,height:20000,styles:{position:"absolute",top:0,left:0}}).inject(this.windowEl);if(MUI.ieSupport=="excanvas"){G_vmlCanvasManager.initElement(b.canvasEl);b.canvasEl=this.windowEl.getElement(".mochaCanvas")}}b.controlsEl=new Element("div",{id:f+"_controls","class":"mochaControls"}).inject(b.overlayEl,"after");if(d.useCanvasControls==true){b.canvasControlsEl=new Element("canvas",{id:f+"_canvasControls","class":"mochaCanvasControls",width:14,height:14}).inject(this.windowEl);if(Browser.Engine.trident&&MUI.ieSupport=="excanvas"){G_vmlCanvasManager.initElement(b.canvasControlsEl);b.canvasControlsEl=this.windowEl.getElement(".mochaCanvasControls")}}if(d.closable){b.closeButtonEl=new Element("div",{id:f+"_closeButton","class":"mochaCloseButton mochaWindowButton",title:"Close"}).inject(b.controlsEl)}if(d.maximizable){b.maximizeButtonEl=new Element("div",{id:f+"_maximizeButton","class":"mochaMaximizeButton mochaWindowButton",title:"Maximize"}).inject(b.controlsEl)}if(d.minimizable){b.minimizeButtonEl=new Element("div",{id:f+"_minimizeButton","class":"mochaMinimizeButton mochaWindowButton",title:"Minimize"}).inject(b.controlsEl)}if(d.useSpinner==true&&d.shape!="gauge"&&d.type!="notification"){b.spinnerEl=new Element("div",{id:f+"_spinner","class":"mochaSpinner",width:16,height:16}).inject(this.windowEl,"bottom")}if(this.options.shape=="gauge"){b.canvasHeaderEl=new Element("canvas",{id:f+"_canvasHeader","class":"mochaCanvasHeader",width:this.options.width,height:26}).inject(this.windowEl,"bottom");if(Browser.Engine.trident&&MUI.ieSupport=="excanvas"){G_vmlCanvasManager.initElement(b.canvasHeaderEl);b.canvasHeaderEl=this.windowEl.getElement(".mochaCanvasHeader")}}if(Browser.Engine.trident){b.overlayEl.setStyle("zIndex",2)}if(Browser.Platform.mac&&Browser.Engine.gecko){if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){var c=new Number(RegExp.$1);if(c<3){b.overlayEl.setStyle("overflow","auto")}}}if(d.resizable){b.n=new Element("div",{id:f+"_resizeHandle_n","class":"handle",styles:{top:0,left:10,cursor:"n-resize"}}).inject(b.overlayEl,"after");b.ne=new Element("div",{id:f+"_resizeHandle_ne","class":"handle corner",styles:{top:0,right:0,cursor:"ne-resize"}}).inject(b.overlayEl,"after");b.e=new Element("div",{id:f+"_resizeHandle_e","class":"handle",styles:{top:10,right:0,cursor:"e-resize"}}).inject(b.overlayEl,"after");b.se=new Element("div",{id:f+"_resizeHandle_se","class":"handle cornerSE",styles:{bottom:0,right:0,cursor:"se-resize"}}).inject(b.overlayEl,"after");b.s=new Element("div",{id:f+"_resizeHandle_s","class":"handle",styles:{bottom:0,left:10,cursor:"s-resize"}}).inject(b.overlayEl,"after");b.sw=new Element("div",{id:f+"_resizeHandle_sw","class":"handle corner",styles:{bottom:0,left:0,cursor:"sw-resize"}}).inject(b.overlayEl,"after");b.w=new Element("div",{id:f+"_resizeHandle_w","class":"handle",styles:{top:10,left:0,cursor:"w-resize"}}).inject(b.overlayEl,"after");b.nw=new Element("div",{id:f+"_resizeHandle_nw","class":"handle corner",styles:{top:0,left:0,cursor:"nw-resize"}}).inject(b.overlayEl,"after")}$extend(this,b)},setColors:function(){if(this.options.useCanvas==true){var c=/\?(.*?)\)/;if(this.titleBarEl.getStyle("backgroundImage")!="none"){var d=this.titleBarEl.getStyle("backgroundImage");d=d.match(c)[1];d=d.parseQueryString();var a=d.from;var b=d.to.replace(/\"/,"");this.options.headerStartColor=new Color(a);this.options.headerStopColor=new Color(b);this.titleBarEl.addClass("replaced")}else{if(this.titleBarEl.getStyle("background-color")!==""&&this.titleBarEl.getStyle("background-color")!=="transparent"){this.options.headerStartColor=new Color(this.titleBarEl.getStyle("background-color")).mix("#fff",20);this.options.headerStopColor=new Color(this.titleBarEl.getStyle("background-color")).mix("#000",20);this.titleBarEl.addClass("replaced")}}if(this.windowEl.getStyle("background-color")!==""&&this.windowEl.getStyle("background-color")!=="transparent"){this.options.bodyBgColor=new Color(this.windowEl.getStyle("background-color"));this.windowEl.addClass("replaced")}if(this.options.resizable&&this.se.getStyle("background-color")!==""&&this.se.getStyle("background-color")!=="transparent"){this.options.resizableColor=new Color(this.se.getStyle("background-color"));this.se.addClass("replaced")}}if(this.options.useCanvasControls==true){if(this.minimizeButtonEl){if(this.minimizeButtonEl.getStyle("color")!==""&&this.minimizeButtonEl.getStyle("color")!=="transparent"){this.options.minimizeColor=new Color(this.minimizeButtonEl.getStyle("color"))}if(this.minimizeButtonEl.getStyle("background-color")!==""&&this.minimizeButtonEl.getStyle("background-color")!=="transparent"){this.options.minimizeBgColor=new Color(this.minimizeButtonEl.getStyle("background-color"));this.minimizeButtonEl.addClass("replaced")}}if(this.maximizeButtonEl){if(this.maximizeButtonEl.getStyle("color")!==""&&this.maximizeButtonEl.getStyle("color")!=="transparent"){this.options.maximizeColor=new Color(this.maximizeButtonEl.getStyle("color"))}if(this.maximizeButtonEl.getStyle("background-color")!==""&&this.maximizeButtonEl.getStyle("background-color")!=="transparent"){this.options.maximizeBgColor=new Color(this.maximizeButtonEl.getStyle("background-color"));this.maximizeButtonEl.addClass("replaced")}}if(this.closeButtonEl){if(this.closeButtonEl.getStyle("color")!==""&&this.closeButtonEl.getStyle("color")!=="transparent"){this.options.closeColor=new Color(this.closeButtonEl.getStyle("color"))}if(this.closeButtonEl.getStyle("background-color")!==""&&this.closeButtonEl.getStyle("background-color")!=="transparent"){this.options.closeBgColor=new Color(this.closeButtonEl.getStyle("background-color"));this.closeButtonEl.addClass("replaced")}}}},drawWindow:function(b){if(this.drawingWindow==true){return}this.drawingWindow=true;if(this.isCollapsed){this.drawWindowCollapsed(b);return}var g=this.windowEl;var m=this.options;var c=m.shadowBlur;var j=c*2;var l=this.options.shadowOffset;this.overlayEl.setStyles({width:this.contentWrapperEl.offsetWidth});if(this.iframeEl){this.iframeEl.setStyle("height",this.contentWrapperEl.offsetHeight)}var d=this.contentBorderEl.getStyle("border-top").toInt()+this.contentBorderEl.getStyle("border-bottom").toInt();var f=this.toolbarWrapperEl?this.toolbarWrapperEl.getStyle("height").toInt()+this.toolbarWrapperEl.getStyle("border-top").toInt():0;var e=this.toolbar2WrapperEl?this.toolbar2WrapperEl.getStyle("height").toInt()+this.toolbar2WrapperEl.getStyle("border-top").toInt():0;this.headerFooterShadow=m.headerHeight+m.footerHeight+j;var h=this.contentWrapperEl.getStyle("height").toInt()+this.headerFooterShadow+f+e+d;var a=this.contentWrapperEl.getStyle("width").toInt()+j;this.windowEl.setStyles({height:h,width:a});this.overlayEl.setStyles({height:h,top:c-l.y,left:c-l.x});if(this.options.useCanvas==true){if(Browser.Engine.trident){this.canvasEl.height=20000;this.canvasEl.width=50000}this.canvasEl.height=h;this.canvasEl.width=a}if(Browser.Engine.trident4){this.zIndexFixEl.setStyles({width:a,height:h})}this.titleBarEl.setStyles({width:a-j,height:m.headerHeight});if(m.useSpinner==true&&m.shape!="gauge"&&m.type!="notification"){this.spinnerEl.setStyles({left:c-l.x+3,bottom:c+l.y+4})}if(this.options.useCanvas!=false){var k=this.canvasEl.getContext("2d");k.clearRect(0,0,a,h);switch(m.shape){case"box":this.drawBox(k,a,h,c,l,b);break;case"gauge":this.drawGauge(k,a,h,c,l,b);break}if(m.resizable){MUI.triangle(k,a-(c+l.x+17),h-(c+l.y+18),11,11,m.resizableColor,1)}if(Browser.Engine.trident){MUI.triangle(k,0,0,10,10,m.resizableColor,0)}}if(m.type!="notification"&&m.useCanvasControls==true){this.drawControls(a,h,b)}if(MUI.Desktop&&this.contentWrapperEl.getChildren(".column").length!=0){MUI.rWidth(this.contentWrapperEl);this.contentWrapperEl.getChildren(".column").each(function(n){MUI.panelHeight(n)})}this.drawingWindow=false;return this},drawWindowCollapsed:function(b){var e=this.windowEl;var k=this.options;var c=k.shadowBlur;var f=c*2;var j=k.shadowOffset;var d=k.headerHeight+f+2;var g=d;var a=this.contentWrapperEl.getStyle("width").toInt()+f;this.windowEl.setStyle("height",g);this.overlayEl.setStyles({height:g,top:c-j.y,left:c-j.x});if(Browser.Engine.trident4){this.zIndexFixEl.setStyles({width:a,height:g})}this.windowEl.setStyle("width",a);this.overlayEl.setStyle("width",a);this.titleBarEl.setStyles({width:a-f,height:k.headerHeight});if(this.options.useCanvas!=false){this.canvasEl.height=g;this.canvasEl.width=a;var h=this.canvasEl.getContext("2d");h.clearRect(0,0,a,g);this.drawBoxCollapsed(h,a,g,c,j,b);if(k.useCanvasControls==true){this.drawControls(a,g,b)}if(Browser.Engine.trident){MUI.triangle(h,0,0,10,10,k.resizableColor,0)}}this.drawingWindow=false;return this},drawControls:function(g,e,h){var f=this.options;var d=f.shadowBlur;var c=f.shadowOffset;var b=f.controlsOffset;this.controlsEl.setStyles({right:d+c.x+b.right,top:d-c.y+b.top});this.canvasControlsEl.setStyles({right:d+c.x+b.right,top:d-c.y+b.top});this.closebuttonX=f.closable?this.mochaControlsWidth-7:this.mochaControlsWidth+12;this.maximizebuttonX=this.closebuttonX-(f.maximizable?19:0);this.minimizebuttonX=this.maximizebuttonX-(f.minimizable?19:0);var a=this.canvasControlsEl.getContext("2d");a.clearRect(0,0,100,100);if(this.options.closable){this.closebutton(a,this.closebuttonX,7,f.closeBgColor,1,f.closeColor,1)}if(this.options.maximizable){this.maximizebutton(a,this.maximizebuttonX,7,f.maximizeBgColor,1,f.maximizeColor,1)}if(this.options.minimizable){this.minimizebutton(a,this.minimizebuttonX,7,f.minimizeBgColor,1,f.minimizeColor,1)}if(Browser.Engine.trident){MUI.circle(a,0,0,3,this.options.resizableColor,0)}},drawBox:function(h,a,g,c,j,b){var k=this.options;var f=c*2;var d=this.options.cornerRadius;if(b!=false){for(var e=0;e<=c;e++){MUI.roundedRect(h,j.x+e,j.y+e,a-(e*2)-j.x,g-(e*2)-j.y,d+(c-e),[0,0,0],e==c?0.29:0.065+(e*0.01))}}this.bodyRoundedRect(h,c-j.x,c-j.y,a-f,g-f,d,k.bodyBgColor);if(this.options.type!="notification"){this.topRoundedRect(h,c-j.x,c-j.y,a-f,k.headerHeight,d,k.headerStartColor,k.headerStopColor)}},drawBoxCollapsed:function(h,a,g,c,j,b){var k=this.options;var f=c*2;var d=k.cornerRadius;if(b!=false){for(var e=0;e<=c;e++){MUI.roundedRect(h,j.x+e,j.y+e,a-(e*2)-j.x,g-(e*2)-j.y,d+(c-e),[0,0,0],e==c?0.3:0.06+(e*0.01))}}this.topRoundedRect2(h,c-j.x,c-j.y,a-f,k.headerHeight+2,d,k.headerStartColor,k.headerStopColor)},drawGauge:function(g,a,f,c,h,b){var j=this.options;var d=(a*0.5)-(c)+16;if(b!=false){for(var e=0;e<=c;e++){MUI.circle(g,a*0.5+h.x,(f+j.headerHeight)*0.5+h.x,(a*0.5)-(e*2)-h.x,[0,0,0],e==c?0.75:0.075+(e*0.04))}}MUI.circle(g,a*0.5-h.x,(f+j.headerHeight)*0.5-h.y,(a*0.5)-c,j.bodyBgColor,1);this.canvasHeaderEl.setStyles({top:c-h.y,left:c-h.x});var g=this.canvasHeaderEl.getContext("2d");g.clearRect(0,0,a,100);g.beginPath();g.lineWidth=24;g.lineCap="round";g.moveTo(13,13);g.lineTo(a-(c*2)-13,13);g.strokeStyle="rgba(0, 0, 0, .65)";g.stroke()},bodyRoundedRect:function(d,c,g,f,b,a,e){d.fillStyle="rgba("+e.join(",")+", 1)";d.beginPath();d.moveTo(c,g+a);d.lineTo(c,g+b-a);d.quadraticCurveTo(c,g+b,c+a,g+b);d.lineTo(c+f-a,g+b);d.quadraticCurveTo(c+f,g+b,c+f,g+b-a);d.lineTo(c+f,g+a);d.quadraticCurveTo(c+f,g,c+f-a,g);d.lineTo(c+a,g);d.quadraticCurveTo(c,g,c,g+a);d.fill()},topRoundedRect:function(j,g,f,a,h,e,c,d){var b=j.createLinearGradient(0,0,0,h);b.addColorStop(0,"rgb("+c.join(",")+")");b.addColorStop(1,"rgb("+d.join(",")+")");j.fillStyle=b;j.beginPath();j.moveTo(g,f);j.lineTo(g,f+h);j.lineTo(g+a,f+h);j.lineTo(g+a,f+e);j.quadraticCurveTo(g+a,f,g+a-e,f);j.lineTo(g+e,f);j.quadraticCurveTo(g,f,g,f+e);j.fill()},topRoundedRect2:function(j,g,f,a,h,e,c,d){if(navigator.userAgent.toLowerCase().indexOf("chrome")>-1){j.fillStyle="rgba("+d.join(",")+", 1)"}else{var b=j.createLinearGradient(0,this.options.shadowBlur-1,0,h+this.options.shadowBlur+3);b.addColorStop(0,"rgb("+c.join(",")+")");b.addColorStop(1,"rgb("+d.join(",")+")");j.fillStyle=b}j.beginPath();j.moveTo(g,f+e);j.lineTo(g,f+h-e);j.quadraticCurveTo(g,f+h,g+e,f+h);j.lineTo(g+a-e,f+h);j.quadraticCurveTo(g+a,f+h,g+a,f+h-e);j.lineTo(g+a,f+e);j.quadraticCurveTo(g+a,f,g+a-e,f);j.lineTo(g+e,f);j.quadraticCurveTo(g,f,g,f+e);j.fill()},maximizebutton:function(e,c,h,b,g,f,d){e.beginPath();e.arc(c,h,7,0,Math.PI*2,true);e.fillStyle="rgba("+b.join(",")+","+g+")";e.fill();e.strokeStyle="rgba("+f.join(",")+","+d+")";e.lineWidth=2;e.beginPath();e.moveTo(c,h-3.5);e.lineTo(c,h+3.5);e.moveTo(c-3.5,h);e.lineTo(c+3.5,h);e.stroke()},closebutton:function(e,c,h,b,g,f,d){e.beginPath();e.arc(c,h,7,0,Math.PI*2,true);e.fillStyle="rgba("+b.join(",")+","+g+")";e.fill();e.strokeStyle="rgba("+f.join(",")+","+d+")";e.lineWidth=2;e.beginPath();e.moveTo(c-3,h-3);e.lineTo(c+3,h+3);e.moveTo(c+3,h-3);e.lineTo(c-3,h+3);e.stroke()},minimizebutton:function(e,c,h,b,g,f,d){e.beginPath();e.arc(c,h,7,0,Math.PI*2,true);e.fillStyle="rgba("+b.join(",")+","+g+")";e.fill();e.strokeStyle="rgba("+f.join(",")+","+d+")";e.lineWidth=2;e.beginPath();e.moveTo(c-3.5,h);e.lineTo(c+3.5,h);e.stroke()},setMochaControlsWidth:function(){this.mochaControlsWidth=0;var a=this.options;if(a.minimizable){this.mochaControlsWidth+=(this.minimizeButtonEl.getStyle("margin-left").toInt()+this.minimizeButtonEl.getStyle("width").toInt())}if(a.maximizable){this.mochaControlsWidth+=(this.maximizeButtonEl.getStyle("margin-left").toInt()+this.maximizeButtonEl.getStyle("width").toInt())}if(a.closable){this.mochaControlsWidth+=(this.closeButtonEl.getStyle("margin-left").toInt()+this.closeButtonEl.getStyle("width").toInt())}this.controlsEl.setStyle("width",this.mochaControlsWidth);if(a.useCanvasControls==true){this.canvasControlsEl.setProperty("width",this.mochaControlsWidth)}},hideSpinner:function(){if(this.spinnerEl){this.spinnerEl.hide()}return this},showSpinner:function(){if(this.spinnerEl){this.spinnerEl.show()}return this},close:function(){if(!this.isClosing){MUI.closeWindow(this.windowEl)}return this},minimize:function(){MUI.Dock.minimizeWindow(this.windowEl);return this},maximize:function(){if(this.isMinimized){MUI.Dock.restoreMinimized(this.windowEl)}MUI.Desktop.maximizeWindow(this.windowEl);return this},restore:function(){if(this.isMinimized){MUI.Dock.restoreMinimized(this.windowEl)}else{if(this.isMaximized){MUI.Desktop.restoreWindow(this.windowEl)}}return this},resize:function(a){MUI.resizeWindow(this.windowEl,a);return this},center:function(){MUI.centerWindow(this.windowEl);return this},hide:function(){this.windowEl.setStyle("display","none");return this},show:function(){this.windowEl.setStyle("display","block");return this}});MUI.extend({closeWindow:function(c){var a=c.retrieve("instance");if(c!=$(c)||a.isClosing){return}a.isClosing=true;a.fireEvent("onClose",c);if(a.options.storeOnClose){this.storeOnClose(a,c);return}if(a.check){a.check.destroy()}if((a.options.type=="modal"||a.options.type=="modal2")&&Browser.Engine.trident4){$("modalFix").hide()}if(MUI.options.advancedEffects==false){if(a.options.type=="modal"||a.options.type=="modal2"){$("modalOverlay").setStyle("opacity",0)}MUI.closingJobs(c);return true}else{if(Browser.Engine.trident){a.drawWindow(false)}if(a.options.type=="modal"||a.options.type=="modal2"){MUI.Modal.modalOverlayCloseMorph.start({opacity:0})}var b=new Fx.Morph(c,{duration:120,onComplete:function(){MUI.closingJobs(c);return true}.bind(this)});b.start({opacity:0.4})}},closingJobs:function(e){var d=MUI.Windows.instances;var a=d.get(e.id);e.setStyle("visibility","hidden");if(Browser.Engine.trident){e.dispose()}else{e.destroy()}a.fireEvent("onCloseComplete");if(a.options.type!="notification"){var c=this.getWindowWithHighestZindex();this.focusWindow(c)}d.erase(a.options.id);if(this.loadingWorkspace==true){this.windowUnload()}if(MUI.Dock&&$(MUI.options.dock)&&a.options.type=="window"){var b=$(a.options.id+"_dockTab");if(b!=null){MUI.Dock.dockSortables.removeItems(b).destroy()}MUI.Desktop.setDesktopSize()}},storeOnClose:function(a,d){if(a.check){a.check.hide()}d.setStyles({zIndex:-1});d.addClass("windowClosed");d.removeClass("mocha");if(MUI.Dock&&$(MUI.options.dock)&&a.options.type=="window"){var c=$(a.options.id+"_dockTab");if(c!=null){c.hide()}MUI.Desktop.setDesktopSize()}a.fireEvent("onCloseComplete");if(a.options.type!="notification"){var b=this.getWindowWithHighestZindex();this.focusWindow(b)}a.isClosing=false},closeAll:function(){$$(".mocha").each(function(a){this.closeWindow(a)}.bind(this))},collapseToggle:function(c){var a=c.retrieve("instance");var b=c.getElements(".handle");if(a.isMaximized==true){return}if(a.isCollapsed==false){a.isCollapsed=true;b.hide();if(a.iframeEl){a.iframeEl.setStyle("visibility","hidden")}a.contentBorderEl.setStyles({visibility:"hidden",position:"absolute",top:-10000,left:-10000});if(a.toolbarWrapperEl){a.toolbarWrapperEl.setStyles({visibility:"hidden",position:"absolute",top:-10000,left:-10000})}a.drawWindowCollapsed()}else{a.isCollapsed=false;a.drawWindow();a.contentBorderEl.setStyles({visibility:"visible",position:null,top:null,left:null});if(a.toolbarWrapperEl){a.toolbarWrapperEl.setStyles({visibility:"visible",position:null,top:null,left:null})}if(a.iframeEl){a.iframeEl.setStyle("visibility","visible")}b.show()}},toggleWindowVisibility:function(){MUI.Windows.instances.each(function(a){if(a.options.type=="modal"||a.options.type=="modal2"||a.isMinimized==true){return}var b=$(a.options.id);if(b.getStyle("visibility")=="visible"){if(a.iframe){a.iframeEl.setStyle("visibility","hidden")}if(a.toolbarEl){a.toolbarWrapperEl.setStyle("visibility","hidden")}a.contentBorderEl.setStyle("visibility","hidden");b.setStyle("visibility","hidden");MUI.Windows.windowsVisible=false}else{b.setStyle("visibility","visible");a.contentBorderEl.setStyle("visibility","visible");if(a.iframe){a.iframeEl.setStyle("visibility","visible")}if(a.toolbarEl){a.toolbarWrapperEl.setStyle("visibility","visible")}MUI.Windows.windowsVisible=true}}.bind(this))},focusWindow:function(e,c){MUI.Windows.focusingWindow=true;var b=function(){MUI.Windows.focusingWindow=false};b.delay(170,this);if($$(".mocha").length==0){return}if(e!=$(e)||e.hasClass("isFocused")){return}var d=MUI.Windows.instances;var a=d.get(e.id);if(a.options.type=="notification"){e.setStyle("zIndex",11001);return}MUI.Windows.indexLevel+=2;e.setStyle("zIndex",MUI.Windows.indexLevel);$("windowUnderlay").setStyle("zIndex",MUI.Windows.indexLevel-1).inject($(e),"after");d.each(function(f){if(f.windowEl.hasClass("isFocused")){f.fireEvent("onBlur",f.windowEl)}f.windowEl.removeClass("isFocused")});if(MUI.Dock&&$(MUI.options.dock)&&a.options.type=="window"){MUI.Dock.makeActiveTab()}e.addClass("isFocused");if(c!=false){a.fireEvent("onFocus",e)}},getWindowWithHighestZindex:function(){this.highestZindex=0;$$(".mocha").each(function(a){this.zIndex=a.getStyle("zIndex");if(this.zIndex>=this.highestZindex){this.highestZindex=this.zIndex}}.bind(this));$$(".mocha").each(function(a){if(a.getStyle("zIndex")==this.highestZindex){this.windowWithHighestZindex=a}}.bind(this));return this.windowWithHighestZindex},blurAll:function(){if(MUI.Windows.focusingWindow==false){$$(".mocha").each(function(b){var a=b.retrieve("instance");if(a.options.type!="modal"&&a.options.type!="modal2"){b.removeClass("isFocused")}});$$(".dockTab").removeClass("activeDockTab")}},centerWindow:function(f){if(!f){MUI.Windows.instances.each(function(g){if(g.windowEl.hasClass("isFocused")){f=g.windowEl}})}var a=f.retrieve("instance");var b=a.options;var d=b.container.getCoordinates();var c=window.getScroll().y+(window.getSize().y*0.5)-(f.offsetHeight*0.5);if(c<-a.options.shadowBlur){c=-a.options.shadowBlur}var e=(d.width*0.5)-(f.offsetWidth*0.5);if(e<-a.options.shadowBlur){e=-a.options.shadowBlur}if(MUI.options.advancedEffects==true){a.morph.start({top:c,left:e})}else{f.setStyles({top:c,left:e})}},resizeWindow:function(f,j){var g=f.retrieve("instance");$extend({width:null,height:null,top:null,left:null,centered:true},j);var c=f.getStyle("width").toInt();var h=f.getStyle("height").toInt();var d=f.getStyle("top").toInt();var b=f.getStyle("left").toInt();if(j.centered){var e=j.top||d-((j.height-h)*0.5);var a=j.left||b-((j.width-c)*0.5)}else{var e=j.top||d;var a=j.left||b}if(MUI.options.advancedEffects==false){f.setStyles({top:e,left:a});g.contentWrapperEl.setStyles({height:j.height,width:j.width});g.drawWindow();if(g.iframeEl){if(!Browser.Engine.trident){g.iframeEl.setStyle("visibility","visible")}else{g.iframeEl.show()}}}else{f.retrieve("resizeMorph").start({"0":{height:j.height,width:j.width},"1":{top:e,left:a}})}return g},dynamicResize:function(d){var a=d.retrieve("instance");var c=a.contentWrapperEl;var b=a.contentEl;c.setStyles({height:b.offsetHeight,width:b.offsetWidth});a.drawWindow()}});document.addEvent("keydown",function(a){if(a.key=="q"&&a.control&&a.alt){MUI.toggleWindowVisibility()}});MUI.files[MUI.path.source+"Window/Modal.js"]="loaded";MUI.Modal=new Class({Extends:MUI.Window,options:{type:"modal"},initialize:function(a){if(!$("modalOverlay")){this.modalInitialize();window.addEvent("resize",function(){this.setModalSize()}.bind(this))}this.parent(a)},modalInitialize:function(){var a=new Element("div",{id:"modalOverlay",styles:{height:document.getCoordinates().height,opacity:0.6}}).inject(document.body);a.setStyles({position:Browser.Engine.trident4?"absolute":"fixed"});a.addEvent("click",function(d){var c=MUI.Windows.instances.get(MUI.currentModal.id);if(c.options.modalOverlayClose==true){MUI.closeWindow(MUI.currentModal)}});if(Browser.Engine.trident4){var b=new Element("iframe",{id:"modalFix",scrolling:"no",marginWidth:0,marginHeight:0,src:"",styles:{height:document.getCoordinates().height}}).inject(document.body)}MUI.Modal.modalOverlayOpenMorph=new Fx.Morph($("modalOverlay"),{duration:150});MUI.Modal.modalOverlayCloseMorph=new Fx.Morph($("modalOverlay"),{duration:150,onComplete:function(){$("modalOverlay").hide();if(Browser.Engine.trident4){$("modalFix").hide()}}.bind(this)})},setModalSize:function(){$("modalOverlay").setStyle("height",document.getCoordinates().height);if(Browser.Engine.trident4){$("modalFix").setStyle("height",document.getCoordinates().height)}}});MUI.files[MUI.path.source+"Window/Windows-from-html.js"]="loaded";MUI.extend({NewWindowsFromHTML:function(){$$(".mocha").each(function(b){if(Browser.Engine.presto||Browser.Engine.trident5){b.hide()}var d=b.getElement("h3.mochaTitle");if(Browser.Engine.presto){b.show()}var c=b.getStyles("height","width");var a={id:b.getProperty("id"),height:c.height.toInt(),width:c.width.toInt(),x:b.getStyle("left").toInt(),y:b.getStyle("top").toInt()};if(d){a.title=d.innerHTML;d.destroy()}a.content=b.innerHTML;b.destroy();new MUI.Window(a,true)}.bind(this))}});MUI.files[MUI.path.source+"Window/Windows-from-json.js"]="loaded";MUI.extend({newWindowsFromJSON:function(newWindows){newWindows.each(function(options){var temp=new Hash(options);temp.each(function(value,key,hash){if($type(value)!="string"){return}if(value.substring(0,8)=="function"){eval("options."+key+" = "+value)}});new MUI.Window(options)})}});MUI.files[MUI.path.source+"Window/Arrange-cascade.js"]="loaded";MUI.extend({arrangeCascade:function(){var g=30;var a=20;var k=50;var c=40;var j=document.getCoordinates();var d=0;MUI.Windows.instances.each(function(l){if(!l.isMinimized&&l.options.draggable){d++}});if((k*(d+1))>=(j.height-g)){var e=(j.height-g)/(d+1)}else{var e=k}if((c*(d+1))>=(j.width-a-20)){var b=(j.width-a-20)/(d+1)}else{var b=c}var h=a;var f=g;$$(".mocha").each(function(n){var l=n.retrieve("instance");if(!l.isMinimized&&!l.isMaximized&&l.options.draggable){id=n.id;MUI.focusWindow(n);h+=b;f+=e;if(MUI.options.advancedEffects==false){n.setStyles({top:f,left:h})}else{var m=new Fx.Morph(n,{duration:550});m.start({top:f,left:h})}}}.bind(this))}});MUI.files[MUI.path.source+"Window/Arrange-tile.js"]="loaded";MUI.extend({arrangeTile:function(){var g=30;var b=20;var j=10;var f=80;var a=MUI.Windows.instances;var l=0;a.each(function(o){if(!o.isMinimized&&!o.isMaximized){l++}});var h=3;var n=Math.ceil(l/h);var k=document.getCoordinates();var e=((k.width-b)/h);var d=((k.height-g)/n);var m=0;var c=0;a.each(function(x){if(!x.isMinimized&&!x.isMaximized&&x.options.draggable){var t=x.contentWrapperEl;var o=t.getCoordinates();var w=x.windowEl.getCoordinates();var s=o.top-w.top;var v=w.height-o.height-s;var r=o.left-w.left;var y=w.width-o.width-r;var p=(j+(c*e));var u=(f+(m*d));x.drawWindow();MUI.focusWindow(x.windowEl);if(MUI.options.advancedEffects==false){x.windowEl.setStyles({top:u,left:p})}else{var q=new Fx.Morph(x.windowEl,{duration:550});q.start({top:u,left:p})}if(++c===h){m++;c=0}}}.bind(this))}});MUI.files[MUI.path.source+"Components/Tabs.js"]="loaded";MUI.extend({initializeTabs:function(a){$(a).setStyle("list-style","none");$(a).getElements("li").addEvent("click",function(b){MUI.selected(this,a)})},selected:function(b,a){$(a).getChildren().each(function(c){c.removeClass("selected")});b.addClass("selected")}});MUI.files[MUI.path.source+"Layout/Layout.js"]="loaded";MUI.extend({Columns:{instances:new Hash(),columnIDCount:0},Panels:{instances:new Hash(),panelIDCount:0}});MUI.Desktop={options:{desktop:"desktop",desktopHeader:"desktopHeader",desktopFooter:"desktopFooter",desktopNavBar:"desktopNavbar",pageWrapper:"pageWrapper",page:"page",desktopFooter:"desktopFooterWrapper"},initialize:function(){this.desktop=$(this.options.desktop);this.desktopHeader=$(this.options.desktopHeader);this.desktopNavBar=$(this.options.desktopNavBar);this.pageWrapper=$(this.options.pageWrapper);this.page=$(this.options.page);this.desktopFooter=$(this.options.desktopFooter);if(this.desktop){($$("body")).setStyles({overflow:"hidden",height:"100%",margin:0});($$("html")).setStyles({overflow:"hidden",height:"100%"})}if(!MUI.Dock){this.setDesktopSize()}this.menuInitialize();window.addEvent("resize",function(a){this.onBrowserResize()}.bind(this));if(MUI.myChain){MUI.myChain.callChain()}},menuInitialize:function(){if(Browser.Engine.trident4&&this.desktopNavBar){this.desktopNavBar.getElements("li").each(function(a){a.addEvent("mouseenter",function(){this.addClass("ieHover")});a.addEvent("mouseleave",function(){this.removeClass("ieHover")})})}},onBrowserResize:function(){this.setDesktopSize();setTimeout(function(){MUI.Windows.instances.each(function(a){if(a.isMaximized){if(a.iframeEl){a.iframeEl.setStyle("visibility","hidden")}var d=document.getCoordinates();var b=a.contentBorderEl.getStyle("border-top").toInt()+a.contentBorderEl.getStyle("border-bottom").toInt();var c=a.toolbarWrapperEl?a.toolbarWrapperEl.getStyle("height").toInt()+a.toolbarWrapperEl.getStyle("border-top").toInt():0;a.contentWrapperEl.setStyles({height:d.height-a.options.headerHeight-a.options.footerHeight-b-c,width:d.width});a.drawWindow();if(a.iframeEl){a.iframeEl.setStyles({height:a.contentWrapperEl.getStyle("height")});a.iframeEl.setStyle("visibility","visible")}}}.bind(this))}.bind(this),100)},setDesktopSize:function(){var d=window.getCoordinates();var b=$(MUI.options.dockWrapper);if(this.desktop){this.desktop.setStyle("height",d.height)}if(this.pageWrapper){var a=MUI.dockVisible?b.offsetHeight:0;var c=d.height;c-=this.pageWrapper.getStyle("border-top").toInt();c-=this.pageWrapper.getStyle("border-bottom").toInt();if(this.desktopHeader){c-=this.desktopHeader.offsetHeight}if(this.desktopFooter){c-=this.desktopFooter.offsetHeight}c-=a;if(c<0){c=0}this.pageWrapper.setStyle("height",c)}if(MUI.Columns.instances.getKeys().length>0){MUI.Desktop.resizePanels()}},resizePanels:function(){MUI.panelHeight();MUI.rWidth()},maximizeWindow:function(f){var g=MUI.Windows.instances.get(f.id);var j=g.options;var c=g.windowDrag;if(f!=$(f)||g.isMaximized){return}if(g.isCollapsed){MUI.collapseToggle(f)}g.isMaximized=true;if(g.options.restrict){c.detach();if(j.resizable){g.detachResizable()}g.titleBarEl.setStyle("cursor","default")}if(j.container!=this.desktop){this.desktop.grab(f);if(this.options.restrict){c.container=this.desktop}}g.oldTop=f.getStyle("top");g.oldLeft=f.getStyle("left");var d=g.contentWrapperEl;d.oldWidth=d.getStyle("width");d.oldHeight=d.getStyle("height");if(g.iframeEl){if(!Browser.Engine.trident){g.iframeEl.setStyle("visibility","hidden")}else{g.iframeEl.hide()}}var b=document.getCoordinates();var j=g.options;var e=j.shadowBlur;var h=j.shadowOffset;var a=b.height-j.headerHeight-j.footerHeight;a-=g.contentBorderEl.getStyle("border-top").toInt();a-=g.contentBorderEl.getStyle("border-bottom").toInt();a-=(g.toolbarWrapperEl?g.toolbarWrapperEl.getStyle("height").toInt()+g.toolbarWrapperEl.getStyle("border-top").toInt():0);MUI.resizeWindow(f,{width:b.width,height:a,top:h.y-e,left:h.x-e});g.fireEvent("onMaximize",f);if(g.maximizeButtonEl){g.maximizeButtonEl.setProperty("title","Restore")}MUI.focusWindow(f)},restoreWindow:function(d){var a=d.retrieve("instance");if(d!=$(d)||!a.isMaximized){return}var b=a.options;a.isMaximized=false;if(b.restrict){a.windowDrag.attach();if(b.resizable){a.reattachResizable()}a.titleBarEl.setStyle("cursor","move")}if(a.iframeEl){if(!Browser.Engine.trident){a.iframeEl.setStyle("visibility","hidden")}else{a.iframeEl.hide()}}var c=a.contentWrapperEl;MUI.resizeWindow(d,{width:c.oldWidth,height:c.oldHeight,top:a.oldTop,left:a.oldLeft});a.fireEvent("onRestore",d);if(a.maximizeButtonEl){a.maximizeButtonEl.setProperty("title","Maximize")}}};MUI.Column=new Class({Implements:[Events,Options],options:{id:null,container:null,placement:null,width:null,resizeLimit:[],sortable:true,onResize:$empty,onCollapse:$empty,onExpand:$empty},initialize:function(b){this.setOptions(b);$extend(this,{timestamp:$time(),isCollapsed:false,oldWidth:0});if(this.options.id==null){this.options.id="column"+(++MUI.Columns.columnIDCount)}var b=this.options;var g=MUI.Columns.instances;var d=g.get(b.id);if(b.container==null){b.container=MUI.Desktop.pageWrapper}else{$(b.container).setStyle("overflow","hidden")}if(typeof this.options.container=="string"){this.options.container=$(this.options.container)}if(d){var a=d}if(this.columnEl){return}else{g.set(b.id,this)}if($(b.container).getElement(".pad")!=null){$(b.container).getElement(".pad").hide()}if($(b.container).getElement(".mochaContent")!=null){$(b.container).getElement(".mochaContent").hide()}this.columnEl=new Element("div",{id:this.options.id,"class":"column expanded",styles:{width:b.placement=="main"?null:b.width}}).inject($(b.container));this.columnEl.store("instance",this);var c=this.columnEl.getParent();var f=c.getStyle("height").toInt();this.columnEl.setStyle("height",f);if(this.options.sortable){if(!this.options.container.retrieve("sortables")){var e=new Sortables(this.columnEl,{opacity:1,handle:".panel-header",constrain:false,revert:false,onSort:function(){$$(".column").each(function(h){h.getChildren(".panelWrapper").each(function(j){j.getElement(".panel").removeClass("bottomPanel")});if(h.getChildren(".panelWrapper").getLast()){h.getChildren(".panelWrapper").getLast().getElement(".panel").addClass("bottomPanel")}MUI.panelHeight()}.bind(this))}.bind(this)});this.options.container.store("sortables",e)}else{this.options.container.retrieve("sortables").addLists(this.columnEl)}}if(b.placement=="main"){this.columnEl.addClass("rWidth")}switch(this.options.placement){case"left":this.handleEl=new Element("div",{id:this.options.id+"_handle","class":"columnHandle"}).inject(this.columnEl,"after");this.handleIconEl=new Element("div",{id:b.id+"_handle_icon","class":"handleIcon"}).inject(this.handleEl);addResizeRight(this.columnEl,b.resizeLimit[0],b.resizeLimit[1]);break;case"right":this.handleEl=new Element("div",{id:this.options.id+"_handle","class":"columnHandle"}).inject(this.columnEl,"before");this.handleIconEl=new Element("div",{id:b.id+"_handle_icon","class":"handleIcon"}).inject(this.handleEl);addResizeLeft(this.columnEl,b.resizeLimit[0],b.resizeLimit[1]);break}if(this.handleEl!=null){this.handleEl.addEvent("dblclick",function(){this.columnToggle()}.bind(this))}MUI.rWidth()},columnToggle:function(){var a=this.columnEl;if(this.isCollapsed==false){this.oldWidth=a.getStyle("width").toInt();this.resize.detach();this.handleEl.removeEvents("dblclick");this.handleEl.addEvent("click",function(){this.columnToggle()}.bind(this));this.handleEl.setStyle("cursor","pointer").addClass("detached");a.setStyle("width",0);this.isCollapsed=true;a.addClass("collapsed");a.removeClass("expanded");MUI.rWidth();this.fireEvent("onCollapse")}else{a.setStyle("width",this.oldWidth);this.isCollapsed=false;a.addClass("expanded");a.removeClass("collapsed");this.handleEl.removeEvents("click");this.handleEl.addEvent("dblclick",function(){this.columnToggle()}.bind(this));this.resize.attach();this.handleEl.setStyle("cursor",Browser.Engine.webkit?"col-resize":"e-resize").addClass("attached");MUI.rWidth();this.fireEvent("onExpand")}}});MUI.Column.implement(new Options,new Events);MUI.Panel=new Class({Implements:[Events,Options],options:{id:null,title:"New Panel",column:null,require:{css:[],images:[],js:[],onload:null},loadMethod:null,contentURL:null,method:"get",data:null,evalScripts:true,evalResponse:false,content:"Panel content",tabsURL:null,tabsData:null,tabsOnload:$empty,header:true,headerToolbox:false,headerToolboxURL:"pages/lipsum.html",headerToolboxOnload:$empty,height:125,addClass:"",scrollbars:true,padding:{top:8,right:8,bottom:8,left:8},collapsible:true,onBeforeBuild:$empty,onContentLoaded:$empty,onResize:$empty,onCollapse:$empty,onExpand:$empty},initialize:function(b){this.setOptions(b);$extend(this,{timestamp:$time(),isCollapsed:false,oldHeight:0,partner:null});if(this.options.id==null){this.options.id="panel"+(++MUI.Panels.panelIDCount)}var f=MUI.Panels.instances;var c=f.get(this.options.id);var b=this.options;if(c){var a=c}if(this.panelEl){return}else{f.set(this.options.id,this)}this.fireEvent("onBeforeBuild");if(b.loadMethod=="iframe"){b.padding={top:0,right:0,bottom:0,left:0}}this.showHandle=true;if($(b.column).getChildren().length==0){this.showHandle=false}this.panelWrapperEl=new Element("div",{id:this.options.id+"_wrapper","class":"panelWrapper expanded"}).inject($(b.column));this.panelEl=new Element("div",{id:this.options.id,"class":"panel expanded",styles:{height:b.height}}).inject(this.panelWrapperEl);this.panelEl.store("instance",this);this.panelEl.addClass(b.addClass);this.contentEl=new Element("div",{id:b.id+"_pad","class":"pad"}).inject(this.panelEl);this.contentWrapperEl=this.panelEl;this.contentEl.setStyles({"padding-top":b.padding.top,"padding-bottom":b.padding.bottom,"padding-left":b.padding.left,"padding-right":b.padding.right});this.panelHeaderEl=new Element("div",{id:this.options.id+"_header","class":"panel-header",styles:{display:b.header?"block":"none"}}).inject(this.panelEl,"before");var d=MUI.Columns.instances;var e=d.get(this.options.column);if(e.options.sortable){this.panelHeaderEl.setStyle("cursor","move");e.options.container.retrieve("sortables").addItems(this.panelWrapperEl)}if(this.options.collapsible){this.collapseToggleInit()}if(this.options.headerToolbox){this.panelHeaderToolboxEl=new Element("div",{id:b.id+"_headerToolbox","class":"panel-header-toolbox"}).inject(this.panelHeaderEl)}this.panelHeaderContentEl=new Element("div",{id:b.id+"_headerContent","class":"panel-headerContent"}).inject(this.panelHeaderEl);this.titleEl=new Element("h2",{id:b.id+"_title"}).inject(this.panelHeaderContentEl);this.handleEl=new Element("div",{id:b.id+"_handle","class":"horizontalHandle",styles:{display:this.showHandle==true?"block":"none"}}).inject(this.panelEl,"after");this.handleIconEl=new Element("div",{id:b.id+"_handle_icon","class":"handleIcon"}).inject(this.handleEl);addResizeBottom(b.id);if(b.require.css.length||b.require.images.length){new MUI.Require({css:b.require.css,images:b.require.images,onload:function(){this.newPanel()}.bind(this)})}else{this.newPanel()}},newPanel:function(){options=this.options;if(this.options.headerToolbox){MUI.updateContent({element:this.panelEl,childElement:this.panelHeaderToolboxEl,loadMethod:"xhr",url:options.headerToolboxURL,onContentLoaded:options.headerToolboxOnload})}if(options.tabsURL==null){this.titleEl.set("html",options.title)}else{this.panelHeaderContentEl.addClass("tabs");MUI.updateContent({element:this.panelEl,childElement:this.panelHeaderContentEl,loadMethod:"xhr",url:options.tabsURL,data:options.tabsData,onContentLoaded:options.tabsOnload})}MUI.updateContent({element:this.panelEl,content:options.content,method:options.method,data:options.data,url:options.contentURL,onContentLoaded:null,require:{js:options.require.js,onload:options.require.onload}});$(options.column).getChildren(".panelWrapper").each(function(a){a.getElement(".panel").removeClass("bottomPanel")});$(options.column).getChildren(".panelWrapper").getLast().getElement(".panel").addClass("bottomPanel");MUI.panelHeight(options.column,this.panelEl,"new")},collapseToggleInit:function(a){var a=this.options;this.panelHeaderCollapseBoxEl=new Element("div",{id:a.id+"_headerCollapseBox","class":"toolbox"}).inject(this.panelHeaderEl);if(a.headerToolbox){this.panelHeaderCollapseBoxEl.addClass("divider")}this.collapseToggleEl=new Element("div",{id:a.id+"_collapseToggle","class":"panel-collapse icon16",styles:{width:16,height:16},title:"Collapse Panel"}).inject(this.panelHeaderCollapseBoxEl);this.collapseToggleEl.addEvent("click",function(f){var b=this.panelEl;var c=this.panelWrapperEl;var g=MUI.Panels.instances;var e=[];c.getAllPrevious(".panelWrapper").each(function(j){var h=g.get(j.getElement(".panel").id);if(h.isCollapsed==false){e.push(j.getElement(".panel").id)}});c.getAllNext(".panelWrapper").each(function(j){var h=g.get(j.getElement(".panel").id);if(h.isCollapsed==false){e.push(j.getElement(".panel").id)}});if(this.isCollapsed==false){var d=MUI.Columns.instances.get($(a.column).id);if(e.length==0&&d.options.placement!="main"){var d=MUI.Columns.instances.get($(a.column).id);d.columnToggle();return}else{if(e.length==0&&d.options.placement=="main"){return}}this.oldHeight=b.getStyle("height").toInt();if(this.oldHeight<10){this.oldHeight=20}this.contentEl.setStyle("position","absolute");b.setStyle("height",0);this.isCollapsed=true;c.addClass("collapsed");c.removeClass("expanded");MUI.panelHeight(a.column,b,"collapsing");MUI.panelHeight();this.collapseToggleEl.removeClass("panel-collapsed");this.collapseToggleEl.addClass("panel-expand");this.collapseToggleEl.setProperty("title","Expand Panel");this.fireEvent("onCollapse")}else{this.contentEl.setStyle("position",null);b.setStyle("height",this.oldHeight);this.isCollapsed=false;c.addClass("expanded");c.removeClass("collapsed");MUI.panelHeight(this.options.column,b,"expanding");MUI.panelHeight();this.collapseToggleEl.removeClass("panel-expand");this.collapseToggleEl.addClass("panel-collapsed");this.collapseToggleEl.setProperty("title","Collapse Panel");this.fireEvent("onExpand")}}.bind(this))}});MUI.Panel.implement(new Options,new Events);MUI.extend({panelHeight:function(a,c,b){if(a!=null){MUI.panelHeight2($(a),c,b)}else{$$(".column").each(function(d){MUI.panelHeight2(d)}.bind(this))}},panelHeight2:function(e,m,f){var b=MUI.Panels.instances;var j=e.getParent();var h=j.getStyle("height").toInt();if(Browser.Engine.trident4&&j==MUI.Desktop.pageWrapper){h-=1}e.setStyle("height",h);var g=[];e.getChildren(".panelWrapper").each(function(n){g.push(n.getElement(".panel"))}.bind(this));var k=[];e.getChildren(".expanded").each(function(n){k.push(n.getElement(".panel"))}.bind(this));var c=[];var d;var a=0;this.panelsTotalHeight=0;this.height=0;g.each(function(n){instance=b.get(n.id);if(n.getParent().hasClass("expanded")&&n.getParent().getNext(".expanded")){instance.partner=n.getParent().getNext(".expanded").getElement(".panel");instance.resize.attach();instance.handleEl.setStyles({display:"block",cursor:Browser.Engine.webkit?"row-resize":"n-resize"}).removeClass("detached")}else{instance.resize.detach();instance.handleEl.setStyles({display:"none",cursor:null}).addClass("detached")}if(n.getParent().getNext(".panelWrapper")==null){instance.handleEl.hide()}}.bind(this));e.getChildren().each(function(n){n.getChildren().each(function(p){if(p.hasClass("panel")){var o=b.get(p.id);anyNextSiblingsExpanded=function(q){var r;q.getParent().getAllNext(".panelWrapper").each(function(s){var t=b.get(s.getElement(".panel").id);if(t.isCollapsed==false){r=true}}.bind(this));return r}.bind(this);anyExpandingNextSiblingsExpanded=function(q){var r;m.getParent().getAllNext(".panelWrapper").each(function(s){var t=b.get(s.getElement(".panel").id);if(t.isCollapsed==false){r=true}}.bind(this));return r}.bind(this);anyNextContainsChanging=function(r){var q=[];r.getParent().getAllNext(".panelWrapper").each(function(t){q.push(t.getElement(".panel"))}.bind(this));var s=q.contains(m);return s}.bind(this);nextExpandedChanging=function(q){var r;if(q.getParent().getNext(".expanded")){if(q.getParent().getNext(".expanded").getElement(".panel")==m){r=true}}return r};if(f=="new"){if(!o.isCollapsed&&p!=m){c.push(p);this.panelsTotalHeight+=p.offsetHeight.toInt()}}else{if(f==null||f=="collapsing"){if(!o.isCollapsed&&(!anyNextContainsChanging(p)||!anyNextSiblingsExpanded(p))){c.push(p);this.panelsTotalHeight+=p.offsetHeight.toInt()}}else{if(f=="expanding"&&!o.isCollapsed&&p!=m){if(!anyNextContainsChanging(p)||(!anyExpandingNextSiblingsExpanded(p)&&nextExpandedChanging(p))){c.push(p);this.panelsTotalHeight+=p.offsetHeight.toInt()}}}}if(p.style.height){this.height+=p.getStyle("height").toInt()}}else{this.height+=p.offsetHeight.toInt()}}.bind(this))}.bind(this));var l=e.offsetHeight.toInt()-this.height;this.height=0;e.getChildren().each(function(n){this.height+=n.offsetHeight.toInt()}.bind(this));var l=e.offsetHeight.toInt()-this.height;c.each(function(n){var p=this.panelsTotalHeight/n.offsetHeight.toInt();var o=n.getStyle("height").toInt()+(l/p);if(o<1){o=0}n.setStyle("height",o)}.bind(this));this.height=0;e.getChildren().each(function(n){n.getChildren().each(function(o){this.height+=o.offsetHeight.toInt();if(o.hasClass("panel")&&o.getStyle("height").toInt()>a){d=o;a=o.getStyle("height").toInt()}}.bind(this))}.bind(this));var l=e.offsetHeight.toInt()-this.height;if(l!=0&&a>0){d.setStyle("height",d.getStyle("height").toInt()+l);if(d.getStyle("height")<1){d.setStyle("height",0)}}j.getChildren(".columnHandle").each(function(p){var o=p.getParent();if(o.getStyle("height").toInt()<1){return}var n=o.getStyle("height").toInt()-p.getStyle("border-top").toInt()-p.getStyle("border-bottom").toInt();if(Browser.Engine.trident4&&o==MUI.Desktop.pageWrapper){n-=1}p.setStyle("height",n)});k.each(function(n){MUI.resizeChildren(n)}.bind(this))},resizeChildren:function(b){var d=MUI.Panels.instances;var a=d.get(b.id);var c=a.contentWrapperEl;if(a.iframeEl){if(!Browser.Engine.trident){a.iframeEl.setStyles({height:c.getStyle("height"),width:c.offsetWidth-c.getStyle("border-left").toInt()-c.getStyle("border-right").toInt()})}else{a.iframeEl.setStyles({height:c.getStyle("height"),width:c.offsetWidth-c.getStyle("border-left").toInt()-c.getStyle("border-right").toInt()-1});a.iframeEl.setStyles({width:c.offsetWidth-c.getStyle("border-left").toInt()-c.getStyle("border-right").toInt()})}}},rWidth:function(a){if(a==null){var a=MUI.Desktop.desktop}a.getElements(".rWidth").each(function(e){var b=e.offsetWidth.toInt();b-=e.getStyle("border-left").toInt();b-=e.getStyle("border-right").toInt();var d=e.getParent();this.width=0;d.getChildren().each(function(g){if(g.hasClass("mocha")!=true){this.width+=g.offsetWidth.toInt()}}.bind(this));var c=d.offsetWidth.toInt()-this.width;var f=b+c;if(f<1){f=0}e.setStyle("width",f);e.getChildren(".panel").each(function(g){g.setStyle("width",f-g.getStyle("border-left").toInt()-g.getStyle("border-right").toInt());MUI.resizeChildren(g)}.bind(this))})}});function addResizeRight(d,c,b){if(!$(d)){return}d=$(d);var f=MUI.Columns.instances;var a=f.get(d.id);var e=d.getNext(".columnHandle");e.setStyle("cursor",Browser.Engine.webkit?"col-resize":"e-resize");if(!c){c=50}if(!b){b=250}if(Browser.Engine.trident){e.addEvents({mousedown:function(){e.setCapture()},mouseup:function(){e.releaseCapture()}})}a.resize=d.makeResizable({handle:e,modifiers:{x:"width",y:false},limit:{x:[c,b]},onStart:function(){d.getElements("iframe").setStyle("visibility","hidden");d.getNext(".column").getElements("iframe").setStyle("visibility","hidden")}.bind(this),onDrag:function(){if(Browser.Engine.gecko){$$(".panel").each(function(g){if(g.getElements(".mochaIframe").length==0){g.hide()}})}MUI.rWidth(d.getParent());if(Browser.Engine.gecko){$$(".panel").show()}if(Browser.Engine.trident4){d.getChildren().each(function(h){var g=$(d).getStyle("width").toInt();g-=h.getStyle("border-right").toInt();g-=h.getStyle("border-left").toInt();g-=h.getStyle("padding-right").toInt();g-=h.getStyle("padding-left").toInt();h.setStyle("width",g)}.bind(this))}}.bind(this),onComplete:function(){MUI.rWidth(d.getParent());d.getElements("iframe").setStyle("visibility","visible");d.getNext(".column").getElements("iframe").setStyle("visibility","visible");a.fireEvent("onResize")}.bind(this)})}function addResizeLeft(d,c,b){if(!$(d)){return}d=$(d);var g=MUI.Columns.instances;var a=g.get(d.id);var f=d.getPrevious(".columnHandle");f.setStyle("cursor",Browser.Engine.webkit?"col-resize":"e-resize");var e=d.getPrevious(".column");if(!c){c=50}if(!b){b=250}if(Browser.Engine.trident){f.addEvents({mousedown:function(){f.setCapture()},mouseup:function(){f.releaseCapture()}})}a.resize=d.makeResizable({handle:f,modifiers:{x:"width",y:false},invert:true,limit:{x:[c,b]},onStart:function(){$(d).getElements("iframe").setStyle("visibility","hidden");e.getElements("iframe").setStyle("visibility","hidden")}.bind(this),onDrag:function(){MUI.rWidth(d.getParent())}.bind(this),onComplete:function(){MUI.rWidth(d.getParent());$(d).getElements("iframe").setStyle("visibility","visible");e.getElements("iframe").setStyle("visibility","visible");a.fireEvent("onResize")}.bind(this)})}function addResizeBottom(b){if(!$(b)){return}var b=$(b);var d=MUI.Panels.instances;var a=d.get(b.id);var c=a.handleEl;c.setStyle("cursor",Browser.Engine.webkit?"row-resize":"n-resize");partner=a.partner;min=0;max=function(){return b.getStyle("height").toInt()+partner.getStyle("height").toInt()}.bind(this);if(Browser.Engine.trident){c.addEvents({mousedown:function(){c.setCapture()},mouseup:function(){c.releaseCapture()}})}a.resize=b.makeResizable({handle:c,modifiers:{x:false,y:"height"},limit:{y:[min,max]},invert:false,onBeforeStart:function(){partner=a.partner;this.originalHeight=b.getStyle("height").toInt();this.partnerOriginalHeight=partner.getStyle("height").toInt()}.bind(this),onStart:function(){if(a.iframeEl){if(!Browser.Engine.trident){a.iframeEl.setStyle("visibility","hidden");partner.getElements("iframe").setStyle("visibility","hidden")}else{a.iframeEl.hide();partner.getElements("iframe").hide()}}}.bind(this),onDrag:function(){partnerHeight=partnerOriginalHeight;partnerHeight+=(this.originalHeight-b.getStyle("height").toInt());partner.setStyle("height",partnerHeight);MUI.resizeChildren(b,b.getStyle("height").toInt());MUI.resizeChildren(partner,partnerHeight);b.getChildren(".column").each(function(e){MUI.panelHeight(e)});partner.getChildren(".column").each(function(e){MUI.panelHeight(e)})}.bind(this),onComplete:function(){partnerHeight=partnerOriginalHeight;partnerHeight+=(this.originalHeight-b.getStyle("height").toInt());partner.setStyle("height",partnerHeight);MUI.resizeChildren(b,b.getStyle("height").toInt());MUI.resizeChildren(partner,partnerHeight);b.getChildren(".column").each(function(f){MUI.panelHeight(f)});partner.getChildren(".column").each(function(f){MUI.panelHeight(f)});if(a.iframeEl){if(!Browser.Engine.trident){a.iframeEl.setStyle("visibility","visible");partner.getElements("iframe").setStyle("visibility","visible")}else{a.iframeEl.show();partner.getElements("iframe").show();var e=a.iframeEl.getStyle("width").toInt();a.iframeEl.setStyle("width",e-1);MUI.rWidth();a.iframeEl.setStyle("width",e)}}a.fireEvent("onResize")}.bind(this)})}MUI.extend({closeColumn:function(b){var d=MUI.Columns.instances;var a=d.get(b.id);if(b!=$(b)||a.isClosing){return}a.isClosing=true;if(a.options.sortable){a.container.retrieve("sortables").removeLists(this.columnEl)}var c=b.getChildren(".panel");c.each(function(e){MUI.closePanel($(e.id))}.bind(this));if(Browser.Engine.trident){b.dispose();if(a.handleEl!=null){a.handleEl.dispose()}}else{b.destroy();if(a.handleEl!=null){a.handleEl.destroy()}}if(MUI.Desktop){MUI.Desktop.resizePanels()}d.erase(a.options.id);return true},closePanel:function(f){var e=MUI.Panels.instances;var a=e.get(f.id);if(f!=$(f)||a.isClosing){return}var b=a.options.column;a.isClosing=true;var c=MUI.Columns.instances;var d=c.get(b);if(d.options.sortable){d.options.container.retrieve("sortables").removeItems(a.panelWrapperEl)}a.panelWrapperEl.destroy();if(MUI.Desktop){MUI.Desktop.resizePanels()}$(b).getChildren(".panelWrapper").each(function(g){g.getElement(".panel").removeClass("bottomPanel")});$(b).getChildren(".panelWrapper").getLast().getElement(".panel").addClass("bottomPanel");e.erase(a.options.id);return true}});MUI.files[MUI.path.source+"Layout/Dock.js"]="loaded";MUI.options.extend({dockWrapper:"dockWrapper",dock:"dock"});MUI.extend({minimizeAll:function(){$$(".mocha").each(function(b){var a=b.retrieve("instance");if(!a.isMinimized&&a.options.minimizable==true){MUI.Dock.minimizeWindow(b)}}.bind(this))}});MUI.Dock={options:{useControls:true,dockPosition:"bottom",trueButtonColor:[70,245,70],enabledButtonColor:[115,153,191],disabledButtonColor:[170,170,170]},initialize:function(a){if(!MUI.Desktop){return}MUI.dockVisible=true;this.dockWrapper=$(MUI.options.dockWrapper);this.dock=$(MUI.options.dock);this.autoHideEvent=null;this.dockAutoHide=false;if(!this.dockWrapper){return}if(!this.options.useControls){if($("dockPlacement")){$("dockPlacement").setStyle("cursor","default")}if($("dockAutoHide")){$("dockAutoHide").setStyle("cursor","default")}}this.dockWrapper.setStyles({display:"block",position:"absolute",top:null,bottom:MUI.Desktop.desktopFooter?MUI.Desktop.desktopFooter.offsetHeight:0,left:0});if(this.options.useControls){this.initializeDockControls()}if($("dockLinkCheck")){this.sidebarCheck=new Element("div",{"class":"check",id:"dock_check"}).inject($("dockLinkCheck"))}this.dockSortables=new Sortables("#dockSort",{opacity:1,constrain:true,clone:false,revert:false});MUI.Desktop.setDesktopSize();if(MUI.myChain){MUI.myChain.callChain()}},initializeDockControls:function(){this.setDockColors();if(this.options.useControls){var b=new Element("canvas",{id:"dockCanvas",width:"15",height:"18"}).inject(this.dock);if(Browser.Engine.trident&&MUI.ieSupport=="excanvas"){G_vmlCanvasManager.initElement(b)}}var a=$("dockPlacement");var c=$("dockAutoHide");a.setProperty("title","Position Dock Top");a.addEvent("click",function(){this.moveDock()}.bind(this));c.setProperty("title","Turn Auto Hide On");c.addEvent("click",function(e){if(this.dockWrapper.getProperty("dockPosition")=="top"){return false}var d=$("dockCanvas").getContext("2d");this.dockAutoHide=!this.dockAutoHide;if(this.dockAutoHide){$("dockAutoHide").setProperty("title","Turn Auto Hide Off");MUI.circle(d,5,14,3,this.options.trueButtonColor,1);this.autoHideEvent=function(g){if(!this.dockAutoHide){return}if(!MUI.Desktop.desktopFooter){var f=this.dockWrapper.offsetHeight;if(f<25){f=25}}else{if(MUI.Desktop.desktopFooter){var f=this.dockWrapper.offsetHeight+MUI.Desktop.desktopFooter.offsetHeight;if(f<25){f=25}}}if(!MUI.Desktop.desktopFooter&&g.client.y>(document.getCoordinates().height-f)){if(!MUI.dockVisible){this.dockWrapper.show();MUI.dockVisible=true;MUI.Desktop.setDesktopSize()}}else{if(MUI.Desktop.desktopFooter&&g.client.y>(document.getCoordinates().height-f)){if(!MUI.dockVisible){this.dockWrapper.show();MUI.dockVisible=true;MUI.Desktop.setDesktopSize()}}else{if(MUI.dockVisible){this.dockWrapper.hide();MUI.dockVisible=false;MUI.Desktop.setDesktopSize()}}}}.bind(this);document.addEvent("mousemove",this.autoHideEvent)}else{$("dockAutoHide").setProperty("title","Turn Auto Hide On");MUI.circle(d,5,14,3,this.options.enabledButtonColor,1);document.removeEvent("mousemove",this.autoHideEvent)}}.bind(this));this.renderDockControls();if(this.options.dockPosition=="top"){this.moveDock()}},setDockColors:function(){var c=MUI.getCSSRule(".dockButtonEnabled");if(c&&c.style.backgroundColor){this.options.enabledButtonColor=new Color(c.style.backgroundColor)}var a=MUI.getCSSRule(".dockButtonDisabled");if(a&&a.style.backgroundColor){this.options.disabledButtonColor=new Color(a.style.backgroundColor)}var b=MUI.getCSSRule(".dockButtonTrue");if(b&&b.style.backgroundColor){this.options.trueButtonColor=new Color(b.style.backgroundColor)}},renderDockControls:function(){var a=$("dockCanvas").getContext("2d");a.clearRect(0,0,100,100);MUI.circle(a,5,4,3,this.options.enabledButtonColor,1);if(this.dockWrapper.getProperty("dockPosition")=="top"){MUI.circle(a,5,14,3,this.options.disabledButtonColor,1)}else{if(this.dockAutoHide){MUI.circle(a,5,14,3,this.options.trueButtonColor,1)}else{MUI.circle(a,5,14,3,this.options.enabledButtonColor,1)}}},moveDock:function(){var a=$("dockCanvas").getContext("2d");if(this.dockWrapper.getStyle("position")!="relative"){this.dockWrapper.setStyles({position:"relative",bottom:null});this.dockWrapper.addClass("top");MUI.Desktop.setDesktopSize();this.dockWrapper.setProperty("dockPosition","top");a.clearRect(0,0,100,100);MUI.circle(a,5,4,3,this.options.enabledButtonColor,1);MUI.circle(a,5,14,3,this.options.disabledButtonColor,1);$("dockPlacement").setProperty("title","Position Dock Bottom");$("dockAutoHide").setProperty("title","Auto Hide Disabled in Top Dock Position");this.dockAutoHide=false}else{this.dockWrapper.setStyles({position:"absolute",bottom:MUI.Desktop.desktopFooter?MUI.Desktop.desktopFooter.offsetHeight:0});this.dockWrapper.removeClass("top");MUI.Desktop.setDesktopSize();this.dockWrapper.setProperty("dockPosition","bottom");a.clearRect(0,0,100,100);MUI.circle(a,5,4,3,this.options.enabledButtonColor,1);MUI.circle(a,5,14,3,this.options.enabledButtonColor,1);$("dockPlacement").setProperty("title","Position Dock Top");$("dockAutoHide").setProperty("title","Turn Auto Hide On")}},createDockTab:function(e){var a=e.retrieve("instance");var d=new Element("div",{id:a.options.id+"_dockTab","class":"dockTab",title:b}).inject($("dockClear"),"before");d.addEvent("mousedown",function(f){new Event(f).stop();this.timeDown=$time()});d.addEvent("mouseup",function(f){this.timeUp=$time();if((this.timeUp-this.timeDown)<275){if(MUI.Windows.windowsVisible==false){MUI.toggleWindowVisibility();if(a.isMinimized==true){MUI.Dock.restoreMinimized.delay(25,MUI.Dock,e)}else{MUI.focusWindow(e)}return}if(a.isMinimized==true){MUI.Dock.restoreMinimized.delay(25,MUI.Dock,e)}else{if(a.windowEl.hasClass("isFocused")&&a.options.minimizable==true){MUI.Dock.minimizeWindow(e)}else{MUI.focusWindow(e)}var g=document.getCoordinates();if(e.getStyle("left").toInt()>g.width||e.getStyle("top").toInt()>g.height){MUI.centerWindow(e)}}}});this.dockSortables.addItems(d);var b=a.titleEl.innerHTML;var c=new Element("div",{id:a.options.id+"_dockTabText","class":"dockText"}).set("html",b.substring(0,19)+(b.length>19?"...":"")).inject($(d));if(a.options.icon!=false){}MUI.Desktop.setDesktopSize()},makeActiveTab:function(){var c=MUI.getWindowWithHighestZindex();var a=c.retrieve("instance");$$(".dockTab").removeClass("activeDockTab");if(a.isMinimized!=true){a.windowEl.addClass("isFocused");var b=$(a.options.id+"_dockTab");if(b!=null){b.addClass("activeDockTab")}}else{a.windowEl.removeClass("isFocused")}},minimizeWindow:function(c){if(c!=$(c)){return}var a=c.retrieve("instance");a.isMinimized=true;if(a.iframeEl){if(!Browser.Engine.trident){a.iframeEl.setStyle("visibility","hidden")}else{a.iframeEl.hide()}}a.contentBorderEl.setStyle("visibility","hidden");if(a.toolbarWrapperEl){a.toolbarWrapperEl.hide()}c.setStyle("visibility","hidden");if(Browser.Platform.mac&&Browser.Engine.gecko){if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){var b=new Number(RegExp.$1);if(b<3){a.contentWrapperEl.setStyle("overflow","hidden")}}}MUI.Desktop.setDesktopSize();setTimeout(function(){c.setStyle("zIndex",1);c.removeClass("isFocused");this.makeActiveTab()}.bind(this),100);a.fireEvent("onMinimize",c)},restoreMinimized:function(b){var a=b.retrieve("instance");if(a.isMinimized==false){return}if(MUI.Windows.windowsVisible==false){MUI.toggleWindowVisibility()}MUI.Desktop.setDesktopSize();if(a.options.scrollbars==true&&!a.iframeEl){a.contentWrapperEl.setStyle("overflow","auto")}if(a.isCollapsed){MUI.collapseToggle(b)}b.setStyle("visibility","visible");a.contentBorderEl.setStyle("visibility","visible");if(a.toolbarWrapperEl){a.toolbarWrapperEl.show()}if(a.iframeEl){if(!Browser.Engine.trident){a.iframeEl.setStyle("visibility","visible")}else{a.iframeEl.show()}}a.isMinimized=false;MUI.focusWindow(b);a.fireEvent("onRestore",b)}};MUI.files[MUI.path.source+"Layout/Workspaces.js"]="loaded";MUI.extend({saveWorkspace:function(){this.cookie=new Hash.Cookie("mochaUIworkspaceCookie",{duration:3600});this.cookie.empty();MUI.Windows.instances.each(function(a){a.saveValues();this.cookie.set(a.options.id,{id:a.options.id,top:a.options.y,left:a.options.x,width:a.contentWrapperEl.getStyle("width").toInt(),height:a.contentWrapperEl.getStyle("height").toInt()})}.bind(this));this.cookie.save();new MUI.Window({loadMethod:"html",type:"notification",addClass:"notification",content:"Workspace saved.",closeAfter:"1400",width:200,height:40,y:53,padding:{top:10,right:12,bottom:10,left:12},shadowBlur:5,bodyBgColor:[255,255,255]})},windowUnload:function(){if($$(".mocha").length==0&&this.myChain){this.myChain.callChain()}},loadWorkspace2:function(workspaceWindows){workspaceWindows.each(function(workspaceWindow){windowFunction=eval("MUI."+workspaceWindow.id+"Window");if(windowFunction){eval("MUI."+workspaceWindow.id+"Window({width:"+workspaceWindow.width+",height:"+workspaceWindow.height+"});");var windowEl=$(workspaceWindow.id);windowEl.setStyles({top:workspaceWindow.top,left:workspaceWindow.left});var instance=windowEl.retrieve("instance");instance.contentWrapperEl.setStyles({width:workspaceWindow.width,height:workspaceWindow.height});instance.drawWindow()}}.bind(this));this.loadingWorkspace=false},loadWorkspace:function(){cookie=new Hash.Cookie("mochaUIworkspaceCookie",{duration:3600});workspaceWindows=cookie.load();if(!cookie.getKeys().length){new MUI.Window({loadMethod:"html",type:"notification",addClass:"notification",content:"You have no saved workspace.",closeAfter:"1400",width:220,height:40,y:25,padding:{top:10,right:12,bottom:10,left:12},shadowBlur:5,bodyBgColor:[255,255,255]});return}if($$(".mocha").length!=0){this.loadingWorkspace=true;this.myChain=new Chain();this.myChain.chain(function(){$$(".mocha").each(function(a){this.closeWindow(a)}.bind(this))}.bind(this),function(){this.loadWorkspace2(workspaceWindows)}.bind(this));this.myChain.callChain()}else{this.loadWorkspace2(workspaceWindows)}}}); \ No newline at end of file diff --git a/src/webui/scripts/mocha.js b/src/webui/scripts/mocha.js index d6733341b..1fbe3a0f1 100644 --- a/src/webui/scripts/mocha.js +++ b/src/webui/scripts/mocha.js @@ -1,4594 +1,6279 @@ -/* - -Script: Core.js - MochaUI - A Web Applications User Interface Framework. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Contributors: - - Scott F. Frederick - - Joel Lindau - -Note: - This documentation is taken directly from the javascript source files. It is built using Natural Docs. - -Todo: - Consider making title tooltips optional and using them more often. - -*/ - -var MochaUI = new Hash({ - options: new Hash({ - useEffects: true // Toggles the majority of window fade and move effects. - }), - Columns: { - instances: new Hash() - }, - Panels: { - instances: new Hash() - }, - Windows: { - instances: new Hash(), - indexLevel: 100, // Used for z-Index - windowIDCount: 0, // Used for windows without an ID defined by the user - windowsVisible: true // Ctrl-Alt-Q to toggle window visibility - }, - ieSupport: 'excanvas', // Makes it easier to switch between Excanvas and Moocanvas for testing - focusingWindow: 'false', - /* - - Function: updateContent - Replace the content of a window or panel. - - Arguments: - element - The parent window or panel. - childElement - The child element of the window or panel recieving the content. - title - (string) Change this if you want to change the title of the window or panel. - content - (string or element) An html loadMethod option. - loadMethod - ('html', 'xhr', or 'iframe') Defaults to 'html'. - url - Used if loadMethod is set to 'xhr' or 'iframe'. - padding - (object) - - */ - updateContent: function(updateOptions){ - - var options = { - 'element': null, - 'childElement': null, - 'title': null, - 'content': null, - 'loadMethod': null, - 'url': null, - 'padding': null - }; - $extend(options, updateOptions); - - if (!options.element) return; - var element = options.element; - - if (MochaUI.Windows.instances.get(element.id)) { - var recipient = 'window'; - var currentInstance = MochaUI.Windows.instances.get(element.id); - var spinnerEl = currentInstance.spinnerEl; - if (options.title) { - currentInstance.titleEl.set('html', options.title); - } - } - else { - var recipient = 'panel'; - var currentInstance = MochaUI.Panels.instances.get(element.id); - if (options.title) { - currentInstance.titleEl.set('html', options.title); - } - } - - var contentEl = currentInstance.contentEl; - if (options.childElement != null) { - var contentContainer = options.childElement; - } - else { - var contentContainer = currentInstance.contentEl; - } - - var loadMethod = options.loadMethod != null ? options.loadMethod : currentInstance.options.loadMethod; - - // Set scrollbars if loading content in main content container. - // Always use 'hidden' for iframe windows - if (contentContainer == currentInstance.contentEl) { - currentInstance.contentWrapperEl.setStyles({ - 'overflow': currentInstance.options.scrollbars == true && loadMethod != 'iframe' ? 'auto' : 'hidden' - }); - } - - var contentWrapperEl = currentInstance.contentWrapperEl; - - if (options.padding != null) { - contentEl.setStyles({ - 'padding-top': options.padding.top, - 'padding-bottom': options.padding.bottom, - 'padding-left': options.padding.left, - 'padding-right': options.padding.right - }); - } - - // Remove old content. - if (contentContainer == contentEl){ - contentEl.empty(); - } - - // Load new content. - switch(loadMethod){ - case 'xhr': - new Request.HTML({ - url: options.url, - update: contentContainer, - evalScripts: currentInstance.options.evalScripts, - evalResponse: currentInstance.options.evalResponse, - onRequest: function(){ - if (recipient == 'window' && contentContainer == contentEl){ - currentInstance.showSpinner(spinnerEl); - } - else if (recipient == 'panel' && contentContainer == contentEl && $('spinner')){ - $('spinner').setStyle('visibility','visible'); - } - }.bind(this), - onFailure: function(){ - if (contentContainer == contentEl){ - contentContainer.set('html','

    Error Loading XMLHttpRequest

    '); - if (recipient == 'window') { - currentInstance.hideSpinner(spinnerEl); - } - else if (recipient == 'panel' && $('spinner')) { - $('spinner').setStyle('visibility', 'hidden'); - } - } - }.bind(this), - onException: function(){}.bind(this), - onSuccess: function(){ - if (contentContainer == contentEl){ - if (recipient == 'window'){ - currentInstance.hideSpinner(spinnerEl); - } - else if (recipient == 'panel' && $('spinner')){ - $('spinner').setStyle('visibility', 'hidden'); - } - currentInstance.fireEvent('onContentLoaded', element); - } - }.bind(this), - onComplete: function(){}.bind(this) - }).get(); - break; - case 'iframe': // May be able to streamline this if the iframe already exists. - if ( currentInstance.options.contentURL == '' || contentContainer != contentEl) { - break; - } - currentInstance.iframeEl = new Element('iframe', { - 'id': currentInstance.options.id + '_iframe', - 'name': currentInstance.options.id + '_iframe', - 'class': 'mochaIframe', - 'src': options.url, - 'marginwidth': 0, - 'marginheight': 0, - 'frameBorder': 0, - 'scrolling': 'auto', - 'styles': { - 'height': contentWrapperEl.offsetHeight - contentWrapperEl.getStyle('border-top').toInt() - contentWrapperEl.getStyle('border-bottom').toInt(), - 'width': currentInstance.panelEl ? contentWrapperEl.offsetWidth - contentWrapperEl.getStyle('border-left').toInt() - contentWrapperEl.getStyle('border-right').toInt() : '100%' - } - }).injectInside(contentEl); - - // Add onload event to iframe so we can hide the spinner and run onContentLoaded() - currentInstance.iframeEl.addEvent('load', function(e) { - if (recipient == 'window') { - currentInstance.hideSpinner(spinnerEl); - } - else if (recipient == 'panel' && contentContainer == contentEl && $('spinner')) { - $('spinner').setStyle('visibility', 'hidden'); - } - currentInstance.fireEvent('onContentLoaded', element); - }.bind(this)); - if (recipient == 'window') { - currentInstance.showSpinner(spinnerEl); - } - else if (recipient == 'panel' && contentContainer == contentEl && $('spinner')){ - $('spinner').setStyle('visibility', 'visible'); - } - break; - case 'html': - default: - // Need to test injecting elements as content. - var elementTypes = new Array('element', 'textnode', 'whitespace', 'collection'); - if (elementTypes.contains($type(options.content))){ - options.content.inject(contentContainer); - } else { - contentContainer.set('html', options.content); - } - currentInstance.fireEvent('onContentLoaded', element); - break; - } - - }, - /* - - Function: reloadIframe - Reload an iframe. Fixes an issue in Firefox when trying to use location.reload on an iframe that has been destroyed and recreated. - - Arguments: - iframe - This should be both the name and the id of the iframe. - - Syntax: - (start code) - MochaUI.reloadIframe(element); - (end) - - Example: - To reload an iframe from within another iframe: - (start code) - parent.MochaUI.reloadIframe('myIframeName'); - (end) - - */ - reloadIframe: function(iframe){ - if (Browser.Engine.gecko) { - $(iframe).src = $(iframe).src; - } - else { - top.frames[iframe].location.reload(true); - } - }, - collapseToggle: function(windowEl){ - var instances = MochaUI.Windows.instances; - var currentInstance = instances.get(windowEl.id); - var handles = currentInstance.windowEl.getElements('.handle'); - if (currentInstance.isMaximized == true) return; - if (currentInstance.isCollapsed == false) { - currentInstance.isCollapsed = true; - handles.setStyle('display', 'none'); - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'hidden'); - } - currentInstance.contentBorderEl.setStyles({ - visibility: 'hidden', - position: 'absolute', - top: -10000, - left: -10000 - }); - if(currentInstance.toolbarWrapperEl){ - currentInstance.toolbarWrapperEl.setStyles({ - visibility: 'hidden', - position: 'absolute', - top: -10000, - left: -10000 - }); - } - currentInstance.drawWindowCollapsed(windowEl); - } - else { - currentInstance.isCollapsed = false; - currentInstance.drawWindow(windowEl); - currentInstance.contentBorderEl.setStyles({ - visibility: 'visible', - position: null, - top: null, - left: null - }); - if(currentInstance.toolbarWrapperEl){ - currentInstance.toolbarWrapperEl.setStyles({ - visibility: 'visible', - position: null, - top: null, - left: null - }); - } - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'visible'); - } - handles.setStyle('display', 'block'); - } - }, - /* - - Function: closeWindow - Closes a window. - - Syntax: - (start code) - MochaUI.closeWindow(); - (end) - - Arguments: - windowEl - the ID of the window to be closed - - Returns: - true - the window was closed - false - the window was not closed - - */ - closeWindow: function(windowEl){ - // Does window exist and is not already in process of closing ? - - var instances = MochaUI.Windows.instances; - var currentInstance = instances.get(windowEl.id); - if (windowEl != $(windowEl) || currentInstance.isClosing) return; - - currentInstance.isClosing = true; - currentInstance.fireEvent('onClose', windowEl); - if (currentInstance.check) currentInstance.check.destroy(); - - if ((currentInstance.options.type == 'modal' || currentInstance.options.type == 'modal2') && Browser.Engine.trident4){ - $('modalFix').setStyle('display', 'none'); - } - - if (MochaUI.options.useEffects == false){ - if (currentInstance.options.type == 'modal' || currentInstance.options.type == 'modal2'){ - $('modalOverlay').setStyle('opacity', 0); - } - MochaUI.closingJobs(windowEl); - return true; - } - else { - // Redraws IE windows without shadows since IE messes up canvas alpha when you change element opacity - if (Browser.Engine.trident) currentInstance.drawWindow(windowEl, false); - if (currentInstance.options.type == 'modal' || currentInstance.options.type == 'modal2'){ - MochaUI.Modal.modalOverlayCloseMorph.start({ - 'opacity': 0 - }); - } - var closeMorph = new Fx.Morph(windowEl, { - duration: 120, - onComplete: function(){ - MochaUI.closingJobs(windowEl); - return true; - }.bind(this) - }); - closeMorph.start({ - 'opacity': .4 - }); - } - - }, - closingJobs: function(windowEl){ - - var instances = MochaUI.Windows.instances; - var currentInstance = instances.get(windowEl.id); - windowEl.setStyle('visibility', 'hidden'); - windowEl.destroy(); - currentInstance.fireEvent('onCloseComplete'); - - if (currentInstance.options.type != 'notification'){ - var newFocus = this.getWindowWithHighestZindex(); - this.focusWindow(newFocus); - } - - instances.erase(currentInstance.options.id); - if (this.loadingWorkspace == true) { - this.windowUnload(); - } - - if (MochaUI.Dock && $(MochaUI.options.dock) && currentInstance.options.type == 'window') { - var currentButton = $(currentInstance.options.id + '_dockTab'); - if (currentButton != null) { - MochaUI.Dock.dockSortables.removeItems(currentButton).destroy(); - } - // Need to resize everything in case the dock becomes smaller when a tab is removed - MochaUI.Desktop.setDesktopSize(); - } - }, - /* - - Function: closeAll - Close all open windows. - - */ - closeAll: function() { - $$('div.mocha').each(function(windowEl){ - this.closeWindow(windowEl); - }.bind(this)); - }, - /* - - Function: toggleWindowVisibility - Toggle window visibility with Ctrl-Alt-Q. - - */ - toggleWindowVisibility: function(){ - MochaUI.Windows.instances.each(function(instance){ - if (instance.options.type == 'modal' || instance.options.type == 'modal2' || instance.isMinimized == true) return; - var id = $(instance.options.id); - if (id.getStyle('visibility') == 'visible'){ - if (instance.iframe){ - instance.iframeEl.setStyle('visibility', 'hidden'); - } - if (instance.toolbarEl){ - instance.toolbarWrapperEl.setStyle('visibility', 'hidden'); - } - instance.contentBorderEl.setStyle('visibility', 'hidden'); - - id.setStyle('visibility', 'hidden'); - MochaUI.Windows.windowsVisible = false; - } - else { - id.setStyle('visibility', 'visible'); - instance.contentBorderEl.setStyle('visibility', 'visible'); - if (instance.iframe){ - instance.iframeEl.setStyle('visibility', 'visible'); - } - if (instance.toolbarEl){ - instance.toolbarWrapperEl.setStyle('visibility', 'visible'); - } - MochaUI.Windows.windowsVisible = true; - } - }.bind(this)); - - }, - focusWindow: function(windowEl, fireEvent){ - - // This is used with blurAll - MochaUI.focusingWindow = 'true'; - var windowClicked = function(){ - MochaUI.focusingWindow = 'false'; - }; - windowClicked.delay(170, this); - - // Only focus when needed - if ($$('.mocha').length == 0) return; - if (windowEl != $(windowEl) || windowEl.hasClass('isFocused')) return; - - var instances = MochaUI.Windows.instances; - var currentInstance = instances.get(windowEl.id); - - if (currentInstance.options.type == 'notification') return; - - MochaUI.Windows.indexLevel += 2; - windowEl.setStyle('zIndex', MochaUI.Windows.indexLevel); - - // Used when dragging and resizing windows - $('windowUnderlay').setStyle('zIndex', MochaUI.Windows.indexLevel - 1).inject($(windowEl),'after'); - - // Fire onBlur for the window that lost focus. - instances.each(function(instance){ - if (instance.windowEl.hasClass('isFocused')){ - instance.fireEvent('onBlur', instance.windowEl); - } - instance.windowEl.removeClass('isFocused'); - }); - - if (MochaUI.Dock && $(MochaUI.options.dock) && currentInstance.options.type == 'window') { - MochaUI.Dock.makeActiveTab(); - } - currentInstance.windowEl.addClass('isFocused'); - - if (fireEvent != false){ - currentInstance.fireEvent('onFocus', windowEl); - } - - }, - getWindowWithHighestZindex: function(){ - this.highestZindex = 0; - $$('div.mocha').each(function(element){ - this.zIndex = element.getStyle('zIndex'); - if (this.zIndex >= this.highestZindex) { - this.highestZindex = this.zIndex; - } - }.bind(this)); - $$('div.mocha').each(function(element){ - if (element.getStyle('zIndex') == this.highestZindex) { - this.windowWithHighestZindex = element; - } - }.bind(this)); - return this.windowWithHighestZindex; - }, - blurAll: function(){ - if (MochaUI.focusingWindow == 'false') { - $$('.mocha').each(function(windowEl){ - var instances = MochaUI.Windows.instances; - var currentInstance = instances.get(windowEl.id); - if (currentInstance.options.type != 'modal' && currentInstance.options.type != 'modal2'){ - windowEl.removeClass('isFocused'); - } - }); - $$('div.dockTab').removeClass('activeDockTab'); - } - }, - roundedRect: function(ctx, x, y, width, height, radius, rgb, a){ - ctx.fillStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; - ctx.beginPath(); - ctx.moveTo(x, y + radius); - ctx.lineTo(x, y + height - radius); - ctx.quadraticCurveTo(x, y + height, x + radius, y + height); - ctx.lineTo(x + width - radius, y + height); - ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); - ctx.lineTo(x + width, y + radius); - ctx.quadraticCurveTo(x + width, y, x + width - radius, y); - ctx.lineTo(x + radius, y); - ctx.quadraticCurveTo(x, y, x, y + radius); - ctx.fill(); - }, - triangle: function(ctx, x, y, width, height, rgb, a){ - ctx.beginPath(); - ctx.moveTo(x + width, y); - ctx.lineTo(x, y + height); - ctx.lineTo(x + width, y + height); - ctx.closePath(); - ctx.fillStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; - ctx.fill(); - }, - circle: function(ctx, x, y, diameter, rgb, a){ - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.arc(x, y, diameter, 0, Math.PI*2, true); - ctx.fillStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; - ctx.fill(); - }, - /* - - Function: centerWindow - Center a window in it's container. If windowEl is undefined it will center the window that has focus. - - */ - centerWindow: function(windowEl){ - - if(!windowEl){ - MochaUI.Windows.instances.each(function(instance){ - if (instance.windowEl.hasClass('isFocused')){ - windowEl = instance.windowEl; - } - }); - } - - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - var options = currentInstance.options; - var dimensions = options.container.getCoordinates(); - var windowPosTop = (dimensions.height * .5) - ((options.height + currentInstance.headerFooterShadow) * .5); - if (windowPosTop < 0) { - windowPosTop = 0; - } - var windowPosLeft = (dimensions.width * .5) - (options.width * .5); - if (windowPosLeft < 0) { - windowPosLeft = 0; - } - if (MochaUI.options.useEffects == true){ - currentInstance.morph.start({ - 'top': windowPosTop, - 'left': windowPosLeft - }); - } - else { - windowEl.setStyles({ - 'top': windowPosTop, - 'left': windowPosLeft - }); - } - }, - notification: function(message){ - new MochaUI.Window({ - loadMethod: 'html', - closeAfter: 1500, - type: 'notification', - addClass: 'notification', - content: message, - width: 220, - height: 40, - y: 53, - padding: { top: 10, right: 12, bottom: 10, left: 12 }, - shadowBlur: 5, - bodyBgColor: [255, 255, 255] - }); - }, - /* - - Function: dynamicResize - Use with a timer to resize a window as the window's content size changes, such as with an accordian. - - */ - dynamicResize: function(windowEl){ - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - var contentWrapperEl = currentInstance.contentWrapperEl; - var contentEl = currentInstance.contentEl; - - contentWrapperEl.setStyle('height', contentEl.offsetHeight); - contentWrapperEl.setStyle('width', contentEl.offsetWidth); - currentInstance.drawWindow(windowEl); - }, - /* - - Function: garbageCleanUp - Empties all windows of their children, and removes and garbages the windows. It is does not trigger onClose() or onCloseComplete(). This is useful to clear memory before the pageUnload. - - Syntax: - (start code) - MochaUI.garbageCleanUp(); - (end) - - */ - garbageCleanUp: function(){ - $$('div.mocha').each(function(el){ - el.destroy(); - }.bind(this)); - }, - /* - - The underlay is inserted directly under windows when they are being dragged or resized - so that the cursor is not captured by iframes or other plugins (such as Flash) - underneath the window. - - */ - underlayInitialize: function(){ - var windowUnderlay = new Element('div', { - 'id': 'windowUnderlay', - 'styles': { - 'height': parent.getCoordinates().height, - 'opacity': .01, - 'display': 'none' - } - }).inject(document.body); - }, - setUnderlaySize: function(){ - $('windowUnderlay').setStyle('height', parent.getCoordinates().height); - } -}); - -/* - -function: fixPNG - Bob Osola's PngFix for IE6. - -example: - (begin code) - foo - (end) - -note: - You must have the image height and width attributes specified in the markup. - -*/ - -function fixPNG(myImage){ - if (Browser.Engine.trident4 && document.body.filters){ - var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""; - var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""; - var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "; - var imgStyle = "display:inline-block;" + myImage.style.cssText; - var strNewHTML = ""; - myImage.outerHTML = strNewHTML; - } -} - -// Toggle window visibility with Ctrl-Alt-Q -document.addEvent('keydown', function(event){ - if (event.key == 'q' && event.control && event.alt) { - MochaUI.toggleWindowVisibility(); - } -}); - -// Blur all windows if user clicks anywhere else on the page -document.addEvent('mousedown', function(event){ - MochaUI.blurAll.delay(50); -}); - -document.addEvent('domready', function(){ - MochaUI.underlayInitialize(); -}); - -window.addEvent('resize', function(){ - MochaUI.setUnderlaySize(); -}); -/* - -Script: Window.js - Build windows. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Requires: - Core.js - -*/ - -/* -Class: Window - Creates a single MochaUI window. - -Syntax: - (start code) - new MochaUI.Window(options); - (end) - -Arguments: - options - -Options: - id - The ID of the window. If not defined, it will be set to 'win' + windowIDCount. - title - The title of the window. - icon - Place an icon in the window's titlebar. This is either set to false or to the url of the icon. It is set up for icons that are 16 x 16px. - type - ('window', 'modal', 'modal2', or 'notification') Defaults to 'window'. - loadMethod - ('html', 'xhr', or 'iframe') Defaults to 'html'. - contentURL - Used if loadMethod is set to 'xhr' or 'iframe'. - closeAfter - Either false or time in milliseconds. Closes the window after a certain period of time in milliseconds. This is particularly useful for notifications. - evalScripts - (boolean) An xhr loadMethod option. Defaults to true. - evalResponse - (boolean) An xhr loadMethod option. Defaults to false. - content - (string or element) An html loadMethod option. - toolbar - (boolean) Create window toolbar. Defaults to false. This can be used for tabs, media controls, and so forth. - toolbarPosition - ('top' or 'bottom') Defaults to top. - toolbarHeight - (number) - toolbarURL - (url) Defaults to 'pages/lipsum.html'. - toolbarContent - (string) - container - (element ID) Element the window is injected in. The container defaults to 'desktop'. If no desktop then to document.body. Use 'pageWrapper' if you don't want the windows to overlap the toolbars. - restrict - (boolean) Restrict window to container when dragging. - shape - ('box' or 'gauge') Shape of window. Defaults to 'box'. - collapsible - (boolean) Defaults to true. - minimizable - (boolean) Requires MochaUI.Desktop and MochaUI.Dock. Defaults to true if dependenices are met. - maximizable - (boolean) Requires MochaUI.Desktop. Defaults to true if dependenices are met. - closable - (boolean) Defaults to true. - draggable - (boolean) Defaults to false for modals; otherwise true. - draggableGrid - (false or number) Distance in pixels for snap-to-grid dragging. Defaults to false. - draggableLimit - (false or number) An object with x and y properties used to limit the movement of the Window. Defaults to false. - draggableSnap - (boolean) The distance to drag before the Window starts to respond to the drag. Defaults to false. - resizable - (boolean) Defaults to false for modals, notifications and gauges; otherwise true. - resizeLimit - (object) Minimum and maximum width and height of window when resized. - addClass - (string) Add a class to the window for more control over styling. - width - (number) Width of content area. - height - (number) Height of content area. - x - (number) If x and y are left undefined the window is centered on the page. - y - (number) - scrollbars - (boolean) - padding - (object) - shadowBlur - (number) Width of shadows. - shadowOffset - Should be positive and not be greater than the ShadowBlur. - controlsOffset - Change this if you want to reposition the window controls. - useCanvas - (boolean) Set this to false if you don't want a canvas body. - useCanvasControls - (boolean) Set this to false if you wish to use images for the buttons. - headerHeight - (number) Height of window titlebar. - footerHeight - (number) Height of window footer. - cornerRadius - (number) - contentBgColor - (hex) Body background color - headerStartColor - ([r,g,b,]) Titlebar gradient's top color - headerStopColor - ([r,g,b,]) Titlebar gradient's bottom color - bodyBgColor - ([r,g,b,]) Background color of the main canvas shape - minimizeBgColor - ([r,g,b,]) Minimize button background color - minimizeColor - ([r,g,b,]) Minimize button color - maximizeBgColor - ([r,g,b,]) Maximize button background color - maximizeColor - ([r,g,b,]) Maximize button color - closeBgColor - ([r,g,b,]) Close button background color - closeColor - ([r,g,b,]) Close button color - resizableColor - ([r,g,b,]) Resizable icon color - onBeforeBuild - (function) Fired just before the window is built. - onContentLoaded - (function) Fired when content is successfully loaded via XHR or Iframe. - onFocus - (function) Fired when the window is focused. - onBlur - (function) Fired when window loses focus. - onResize - (function) Fired when the window is resized. - onMinimize - (function) Fired when the window is minimized. - onMaximize - (function) Fired when the window is maximized. - onRestore - (function) Fired when a window is restored from minimized or maximized. - onClose - (function) Fired just before the window is closed. - onCloseComplete - (function) Fired after the window is closed. - -Returns: - Window object. - -Example: - Define a window. It is suggested you name the function the same as your window ID + "Window". - (start code) - var mywindowWindow = function(){ - new MochaUI.Window({ - id: 'mywindow', - title: 'My Window', - loadMethod: 'xhr', - contentURL: 'pages/lipsum.html', - width: 340, - height: 150 - }); - } - (end) - -Example: - Create window onDomReady. - (start code) - window.addEvent('domready', function(){ - mywindow(); - }); - (end) - -Example: - Add link events to build future windows. It is suggested you give your anchor the same ID as your window + "WindowLink" or + "WindowLinkCheck". Use the latter if it is a link in the menu toolbar. - - If you wish to add links in windows that open other windows remember to add events to those links when the windows are created. - - (start code) - // Javascript: - if ($('mywindowLink')){ - $('mywindowLink').addEvent('click', function(e) { - new Event(e).stop(); - mywindow(); - }); - } - - // HTML: - My Window - (end) - - - Loading Content with an XMLHttpRequest(xhr): - For content to load via xhr all the files must be online and in the same domain. If you need to load content from another domain or wish to have it work offline, load the content in an iframe instead of using the xhr option. - - Iframes: - If you use the iframe loadMethod your iframe will automatically be resized when the window it is in is resized. If you want this same functionality when using one of the other load options simply add class="mochaIframe" to those iframes and they will be resized for you as well. - -*/ - -// Having these options outside of the Class allows us to add, change, and remove -// individual options without rewriting all of them. - -MochaUI.Windows.windowOptions = { - id: null, - title: 'New Window', - icon: false, - type: 'window', - - loadMethod: 'html', - contentURL: 'pages/lipsum.html', - - closeAfter: false, - - // xhr options - evalScripts: true, - evalResponse: false, - - // html options - content: 'Window content', - - // Toolbar - toolbar: false, - toolbarPosition: 'top', - toolbarHeight: 29, - toolbarURL: 'pages/lipsum.html', - toolbarContent: '', - - // Toolbar - toolbar2: false, - toolbar2Position: 'bottom', - toolbar2Height: 29, - toolbar2URL: 'pages/lipsum.html', - toolbar2Content: '', - - // Container options - container: null, - restrict: true, - shape: 'box', - - // Window Controls - collapsible: true, - minimizable: true, - maximizable: true, - closable: true, - - // Draggable - draggable: null, - draggableGrid: false, - draggableLimit: false, - draggableSnap: false, - - // Resizable - resizable: null, - resizeLimit: {'x': [250, 2500], 'y': [125, 2000]}, - - // Style options: - addClass: '', - width: 300, - height: 125, - x: null, - y: null, - scrollbars: true, - padding: { top: 10, right: 12, bottom: 10, left: 12 }, - shadowBlur: 5, - shadowOffset: {'x': 0, 'y': 1}, - controlsOffset: {'right': 6, 'top': 6}, - useCanvas: true, - useCanvasControls: true, - useSpinner: true, // Toggles whether or not the ajax spinners are displayed in window footers. - - // Color options: - headerHeight: 25, - footerHeight: 25, - cornerRadius: 8, - contentBgColor: '#fff', - headerStartColor: [250, 250, 250], - headerStopColor: [229, 229, 229], - bodyBgColor: [229, 229, 229], - minimizeBgColor: [255, 255, 255], - minimizeColor: [0, 0, 0], - maximizeBgColor: [255, 255, 255], - maximizeColor: [0, 0, 0], - closeBgColor: [255, 255, 255], - closeColor: [0, 0, 0], - resizableColor: [254, 254, 254], - - // Events - onBeforeBuild: $empty, - onContentLoaded: $empty, - onFocus: $empty, - onBlur: $empty, - onResize: $empty, - onMinimize: $empty, - onMaximize: $empty, - onRestore: $empty, - onClose: $empty, - onCloseComplete: $empty -}; - -MochaUI.Window = new Class({ - Implements: [Events, Options], - - options: MochaUI.Windows.windowOptions, - initialize: function(options){ - this.setOptions(options); - - // Shorten object chain - var options = this.options; - - $extend(this, { - mochaControlsWidth: 0, - minimizebuttonX: 0, // Minimize button horizontal position - maximizebuttonX: 0, // Maximize button horizontal position - closebuttonX: 0, // Close button horizontal position - headerFooterShadow: options.headerHeight + options.footerHeight + (options.shadowBlur * 2), - oldTop: 0, - oldLeft: 0, - isMaximized: false, - isMinimized: false, - isCollapsed: false, - timestamp: $time() - }); - - // May be better to use if type != window - if (options.type != 'window'){ - options.container = document.body; - options.minimizable = false; - } - if (!options.container){ - options.container = MochaUI.Desktop.desktop ? MochaUI.Desktop.desktop : document.body; - } - - // Set this.options.resizable to default if it was not defined - if (options.resizable == null){ - if (options.type != 'window' || options.shape == 'gauge'){ - options.resizable = false; - } - else { - options.resizable = true; - } - } - - // Set this.options.draggable if it was not defined - if (options.draggable == null){ - if (options.type != 'window'){ - options.draggable = false; - } - else { - options.draggable = true; - } - } - - // Gauges are not maximizable or resizable - if (options.shape == 'gauge' || options.type == 'notification'){ - options.collapsible = false; - options.maximizable = false; - options.contentBgColor = 'transparent'; - options.scrollbars = false; - options.footerHeight = 0; - } - if (options.type == 'notification'){ - options.closable = false; - options.headerHeight = 0; - } - - // Minimizable, dock is required and window cannot be modal - if (MochaUI.Dock && $(MochaUI.options.dock)){ - if (MochaUI.Dock.dock && options.type != 'modal' && options.type != 'modal2'){ - options.minimizable = options.minimizable; - } - } - else { - options.minimizable = false; - } - - // Maximizable, desktop is required - options.maximizable = MochaUI.Desktop.desktop && options.maximizable && options.type != 'modal' && options.type != 'modal2'; - - if (this.options.type == 'modal2') { - this.options.shadowBlur = 0; - this.options.shadowOffset = {'x': 0, 'y': 0}; - this.options.useSpinner = false; - this.options.useCanvas = false; - this.options.footerHeight = 0; - this.options.headerHeight = 0; - } - - // If window has no ID, give it one. - if (options.id == null){ - options.id = 'win' + (++MochaUI.Windows.windowIDCount); - } - this.windowEl = $(options.id); - - this.newWindow(); - - // Return window object - return this; - }, - saveValues: function(){ - var coordinates = this.windowEl.getCoordinates(); - this.options.x = coordinates.left.toInt(); - this.options.y = coordinates.top.toInt(); - }, - /* - - Internal Function: newWindow - - Arguments: - properties - - */ - newWindow: function(properties){ // options is not doing anything - - // Shorten object chain - var instances = MochaUI.Windows.instances; - var instanceID = instances.get(this.options.id); - - // Here we check to see if there is already a class instance for this window - if (instanceID){ - var currentInstance = instanceID; - } - - // Check if window already exists and is not in progress of closing - if ( this.windowEl && !this.isClosing ){ - // Restore if minimized - if (currentInstance.isMinimized){ - MochaUI.Dock.restoreMinimized(this.windowEl); - } - // Expand and focus if collapsed - if (currentInstance.isCollapsed){ - MochaUI.collapseToggle(this.windowEl); - setTimeout(MochaUI.focusWindow.pass(this.windowEl, this),10); - } - // Else focus - else { - var coordinates = document.getCoordinates(); - if (this.windowEl.getStyle('left').toInt() > coordinates.width || this.windowEl.getStyle('top').toInt() > coordinates.height){ - MochaUI.centerWindow(this.windowEl); - } - setTimeout(MochaUI.focusWindow.pass(this.windowEl, this),10); - } - return; - } - else { - instances.set(this.options.id, this); - } - - this.isClosing = false; - this.fireEvent('onBeforeBuild'); - - // Create window div - MochaUI.Windows.indexLevel++; - this.windowEl = new Element('div', { - 'class': 'mocha', - 'id': this.options.id, - 'styles': { - 'width': this.options.width, - 'height': this.options.height, - 'display': 'block', - 'opacity': 0, - 'zIndex': MochaUI.Windows.indexLevel += 2 - } - }); - - this.windowEl.addClass(this.options.addClass); - - if (this.options.type == 'modal2') { - this.windowEl.addClass('modal2'); - } - - // Fix a mouseover issue with gauges in IE7 - if ( Browser.Engine.trident && this.options.shape == 'gauge') { - this.windowEl.setStyle('background', 'url(../images/spacer.gif)'); - } - - if ((this.options.type == 'modal' || this.options.type == 'modal2' ) && Browser.Platform.mac && Browser.Engine.gecko){ - if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { - var ffversion = new Number(RegExp.$1); - if (ffversion < 3) { - this.windowEl.setStyle('position', 'fixed'); - } - } - } - - if (this.options.loadMethod == 'iframe') { - this.options.padding = { top: 0, right: 0, bottom: 0, left: 0 }; - } - - // Insert sub elements inside windowEl - this.insertWindowElements(); - - // Set title - this.titleEl.set('html',this.options.title); - - // Set scrollbars, always use 'hidden' for iframe windows - this.contentWrapperEl.setStyles({ - 'overflow': 'hidden', - 'background': this.options.contentBgColor - }); - - this.contentEl.setStyles({ - 'padding-top': this.options.padding.top, - 'padding-bottom': this.options.padding.bottom, - 'padding-left': this.options.padding.left, - 'padding-right': this.options.padding.right - }); - - - if (this.options.shape == 'gauge'){ - if (this.options.useCanvasControls){ - this.canvasControlsEl.setStyle('display', 'none'); - } - else { - this.controlsEl.setStyle('display', 'none'); - } - this.windowEl.addEvent('mouseover', function(){ - this.mouseover = true; - var showControls = function(){ - if (this.mouseover != false){ - if (this.options.useCanvasControls){ - this.canvasControlsEl.setStyle('display', 'block'); - } - else { - this.controlsEl.setStyle('display', 'block'); - } - this.canvasHeaderEl.setStyle('display', 'block'); - this.titleEl.setStyle('display', 'block'); - } - }; - showControls.delay(150, this); - - }.bind(this)); - this.windowEl.addEvent('mouseleave', function(){ - this.mouseover = false; - if (this.options.useCanvasControls){ - this.canvasControlsEl.setStyle('display', 'none'); - } - else { - this.controlsEl.setStyle('display', 'none'); - } - this.canvasHeaderEl.setStyle('display', 'none'); - this.titleEl.setStyle('display', 'none'); - }.bind(this)); - } - - // Inject window into DOM - this.windowEl.injectInside(this.options.container); - - if (this.options.type != 'notification'){ - this.setMochaControlsWidth(); - } - - // Add content to window. - MochaUI.updateContent({ - 'element': this.windowEl, - 'content': this.options.content, - 'url': this.options.contentURL - }); - - // Add content to window toolbar. - if (this.options.toolbar == true){ - MochaUI.updateContent({ - 'element': this.windowEl, - 'childElement': this.toolbarEl, - 'content': this.options.toolbarContent, - 'loadMethod': 'xhr', - 'url': this.options.toolbarURL - }); - } - - // Add content to window toolbar. - if (this.options.toolbar2 == true){ - MochaUI.updateContent({ - 'element': this.windowEl, - 'childElement': this.toolbar2El, - 'content': this.options.toolbar2Content, - 'loadMethod': 'xhr', - 'url': this.options.toolbar2URL - }); - } - - this.drawWindow(this.windowEl); - - // Attach events to the window - this.attachDraggable(this.windowEl); - this.attachResizable(this.windowEl); - this.setupEvents(this.windowEl); - - if (this.options.resizable){ - this.adjustHandles(); - } - - // Move window into position. If position not specified by user then center the window on the page. - if (this.options.container == document.body || this.options.container == MochaUI.Desktop.desktop){ - var dimensions = window.getSize(); - } - else { - var dimensions = $(this.options.container).getSize(); - } - - if (!this.options.y) { - var y = (dimensions.y * .5) - ((this.options.height + this.headerFooterShadow + this.windowEl.getStyle('border-top').toInt() + this.windowEl.getStyle('border-bottom').toInt()) * .5); - } - else { - var y = this.options.y - this.options.shadowBlur; - } - - if (!this.options.x) { - var x = (dimensions.x * .5) - (this.options.width * .5); - } - else { - var x = this.options.x - this.options.shadowBlur; - } - - this.windowEl.setStyles({ - 'top': y, - 'left': x - }); - - // Create opacityMorph - if (MochaUI.options.useEffects == true){ - // IE cannot handle both element opacity and VML alpha at the same time. - if (Browser.Engine.trident){ - this.drawWindow(this.windowEl, false); - } - this.opacityMorph = new Fx.Morph(this.windowEl, { - 'duration': 350, - onComplete: function(){ - if (Browser.Engine.trident){ - this.drawWindow(this.windowEl); - } - }.bind(this) - }); - } - - if (this.options.type == 'modal' || this.options.type == 'modal2') { - MochaUI.currentModal = this.windowEl; - if (Browser.Engine.trident4){ - $('modalFix').setStyle('display', 'block'); - } - $('modalOverlay').setStyle('display', 'block'); - if (MochaUI.options.useEffects == false){ - $('modalOverlay').setStyle('opacity', .6); - this.windowEl.setStyles({ - 'zIndex': 11000, - 'opacity': 1 - }); - } - else { - MochaUI.Modal.modalOverlayCloseMorph.cancel(); - MochaUI.Modal.modalOverlayOpenMorph.start({ - 'opacity': .6 - }); - this.windowEl.setStyles({ - 'zIndex': 11000 - }); - this.opacityMorph.start({ - 'opacity': 1 - }); - } - - $$('.dockTab').removeClass('activeDockTab'); - $$('.mocha').removeClass('isFocused'); - this.windowEl.addClass('isFocused'); - - } - else if (MochaUI.options.useEffects == false){ - this.windowEl.setStyle('opacity', 1); - setTimeout(MochaUI.focusWindow.pass(this.windowEl, this), 10); - } - else { - this.opacityMorph.start({ - 'opacity': 1 - }); - setTimeout(MochaUI.focusWindow.pass(this.windowEl, this), 10); - } - - // This is a generic morph that can be reused later by functions like centerWindow() - this.morph = new Fx.Morph(this.windowEl, { - 'duration': 200 - }); - - // Add check mark to menu if link exists in menu - // Need to make sure the check mark is not added to links not in menu - - if ($(this.windowEl.id + 'LinkCheck')){ - this.check = new Element('div', { - 'class': 'check', - 'id': this.options.id + '_check' - }).inject(this.windowEl.id + 'LinkCheck'); - } - - if (this.options.closeAfter != false){ - MochaUI.closeWindow.delay(this.options.closeAfter, this, this.windowEl); - } - - if (MochaUI.Dock && $(MochaUI.options.dock) && this.options.type == 'window' ){ - MochaUI.Dock.createDockTab(this.windowEl); - } - - }, - setupEvents: function(windowEl) { - - // Set events - // Note: if a button does not exist, its due to properties passed to newWindow() stating otherwice - if (this.closeButtonEl){ - this.closeButtonEl.addEvent('click', function(e) { - new Event(e).stop(); - MochaUI.closeWindow(windowEl); - }.bind(this)); - } - - if (this.options.type == 'window'){ - windowEl.addEvent('mousedown', function() { - MochaUI.focusWindow(windowEl); - }.bind(this)); - } - - if (this.minimizeButtonEl) { - this.minimizeButtonEl.addEvent('click', function(e) { - new Event(e).stop(); - MochaUI.Dock.minimizeWindow(windowEl); - }.bind(this)); - } - - if (this.maximizeButtonEl) { - this.maximizeButtonEl.addEvent('click', function(e) { - new Event(e).stop(); - if (this.isMaximized) { - MochaUI.Desktop.restoreWindow(windowEl); - } else { - MochaUI.Desktop.maximizeWindow(windowEl); - } - }.bind(this)); - } - - if (this.options.collapsible == true){ - // Keep titlebar text from being selected on double click in Safari. - this.titleEl.addEvent('selectstart', function(e) { - e = new Event(e).stop(); - }.bind(this)); - // Keep titlebar text from being selected on double click in Opera. - this.titleBarEl.addEvent('mousedown', function(e) { - if (Browser.Engine.trident) { - this.titleEl.setCapture(); - } - }.bind(this)); - this.titleBarEl.addEvent('mouseup', function(e) { - if (Browser.Engine.trident) { - this.titleEl.releaseCapture(); - } - }.bind(this)); - this.titleBarEl.addEvent('dblclick', function(e) { - e = new Event(e).stop(); - MochaUI.collapseToggle(this.windowEl); - }.bind(this)); - } - - }, - /* - - Internal Function: attachDraggable() - Make window draggable. - - Arguments: - windowEl - - */ - attachDraggable: function(windowEl){ - if (!this.options.draggable) return; - this.windowDrag = new Drag.Move(windowEl, { - handle: this.titleBarEl, - container: this.options.restrict == true ? $(this.options.container) : false, - grid: this.options.draggableGrid, - limit: this.options.draggableLimit, - snap: this.options.draggableSnap, - onStart: function() { - if (this.options.type != 'modal' && this.options.type != 'modal2'){ - MochaUI.focusWindow(windowEl); - $('windowUnderlay').setStyle('display','block'); - } - if ( this.iframeEl ) - this.iframeEl.setStyle('visibility', 'hidden'); - }.bind(this), - onComplete: function() { - if (this.options.type != 'modal' && this.options.type != 'modal2') { - $('windowUnderlay').setStyle('display', 'none'); - } - if ( this.iframeEl ){ - this.iframeEl.setStyle('visibility', 'visible'); - } - // Store new position in options. - this.saveValues(); - }.bind(this) - }); - }, - /* - - Internal Function: attachResizable - Make window resizable. - - Arguments: - windowEl - - */ - attachResizable: function(windowEl){ - if (!this.options.resizable) return; - this.resizable1 = this.windowEl.makeResizable({ - handle: [this.n, this.ne, this.nw], - limit: { - y: [ - function(){ - return this.windowEl.getStyle('top').toInt() + this.windowEl.getStyle('height').toInt() - this.options.resizeLimit.y[1]; - }.bind(this), - function(){ - return this.windowEl.getStyle('top').toInt() + this.windowEl.getStyle('height').toInt() - this.options.resizeLimit.y[0]; - }.bind(this) - ] - }, - modifiers: {x: false, y: 'top'}, - onStart: function(){ - this.resizeOnStart(); - this.coords = this.contentWrapperEl.getCoordinates(); - this.y2 = this.coords.top.toInt() + this.contentWrapperEl.offsetHeight; - }.bind(this), - onDrag: function(){ - this.coords = this.contentWrapperEl.getCoordinates(); - this.contentWrapperEl.setStyle('height', this.y2 - this.coords.top.toInt()); - this.drawWindow(windowEl); - this.adjustHandles(); - }.bind(this), - onComplete: function(){ - this.resizeOnComplete(); - }.bind(this) - }); - - this.resizable2 = this.contentWrapperEl.makeResizable({ - handle: [this.e, this.ne], - limit: { - x: [this.options.resizeLimit.x[0] - (this.options.shadowBlur * 2), this.options.resizeLimit.x[1] - (this.options.shadowBlur * 2) ] - }, - modifiers: {x: 'width', y: false}, - onStart: function(){ - this.resizeOnStart(); - }.bind(this), - onDrag: function(){ - this.drawWindow(windowEl); - this.adjustHandles(); - }.bind(this), - onComplete: function(){ - this.resizeOnComplete(); - }.bind(this) - }); - - this.resizable3 = this.contentWrapperEl.makeResizable({ - container: this.options.restrict == true ? $(this.options.container) : false, - handle: this.se, - limit: { - x: [this.options.resizeLimit.x[0] - (this.options.shadowBlur * 2), this.options.resizeLimit.x[1] - (this.options.shadowBlur * 2) ], - y: [this.options.resizeLimit.y[0] - this.headerFooterShadow, this.options.resizeLimit.y[1] - this.headerFooterShadow] - }, - modifiers: {x: 'width', y: 'height'}, - onStart: function(){ - this.resizeOnStart(); - }.bind(this), - onDrag: function(){ - this.drawWindow(windowEl); - this.adjustHandles(); - }.bind(this), - onComplete: function(){ - this.resizeOnComplete(); - }.bind(this) - }); - - this.resizable4 = this.contentWrapperEl.makeResizable({ - handle: [this.s, this.sw], - limit: { - y: [this.options.resizeLimit.y[0] - this.headerFooterShadow, this.options.resizeLimit.y[1] - this.headerFooterShadow] - }, - modifiers: {x: false, y: 'height'}, - onStart: function(){ - this.resizeOnStart(); - }.bind(this), - onDrag: function(){ - this.drawWindow(windowEl); - this.adjustHandles(); - }.bind(this), - onComplete: function(){ - this.resizeOnComplete(); - }.bind(this) - }); - - this.resizable5 = this.windowEl.makeResizable({ - handle: [this.w, this.sw, this.nw], - limit: { - x: [ - function(){ - return this.windowEl.getStyle('left').toInt() + this.windowEl.getStyle('width').toInt() - this.options.resizeLimit.x[1]; - }.bind(this), - function(){ - return this.windowEl.getStyle('left').toInt() + this.windowEl.getStyle('width').toInt() - this.options.resizeLimit.x[0]; - }.bind(this) - ] - }, - modifiers: {x: 'left', y: false}, - onStart: function(){ - this.resizeOnStart(); - this.coords = this.contentWrapperEl.getCoordinates(); - this.x2 = this.coords.left.toInt() + this.contentWrapperEl.offsetWidth; - }.bind(this), - onDrag: function(){ - this.coords = this.contentWrapperEl.getCoordinates(); - this.contentWrapperEl.setStyle('width', this.x2 - this.coords.left.toInt()); - this.drawWindow(windowEl); - this.adjustHandles(); - }.bind(this), - onComplete: function(){ - this.resizeOnComplete(); - }.bind(this) - }); - - }, - resizeOnStart: function(){ - $('windowUnderlay').setStyle('display','block'); - if (this.iframeEl){ - this.iframeEl.setStyle('visibility', 'hidden'); - } - }, - resizeOnComplete: function(){ - $('windowUnderlay').setStyle('display','none'); - if (this.iframeEl){ - this.iframeEl.setStyle('visibility', 'visible'); - } - this.fireEvent('onResize', this.windowEl); - }, - adjustHandles: function(){ - - var shadowBlur = this.options.shadowBlur; - var shadowBlur2x = shadowBlur * 2; - var shadowOffset = this.options.shadowOffset; - var top = shadowBlur - shadowOffset.y - 1; - var right = shadowBlur + shadowOffset.x - 1; - var bottom = shadowBlur + shadowOffset.y - 1; - var left = shadowBlur - shadowOffset.x - 1; - - var coordinates = this.windowEl.getCoordinates(); - var width = coordinates.width - shadowBlur2x + 2; - var height = coordinates.height - shadowBlur2x + 2; - - this.n.setStyles({ - 'top': top, - 'left': left + 10, - 'width': width - 20 - }); - this.e.setStyles({ - 'top': top + 10, - 'right': right, - 'height': height - 30 - }); - this.s.setStyles({ - 'bottom': bottom, - 'left': left + 10, - 'width': width - 30 - }); - this.w.setStyles({ - 'top': top + 10, - 'left': left, - 'height': height - 20 - }); - this.ne.setStyles({ - 'top': top, - 'right': right - }); - this.se.setStyles({ - 'bottom': bottom, - 'right': right - }); - this.sw.setStyles({ - 'bottom': bottom, - 'left': left - }); - this.nw.setStyles({ - 'top': top, - 'left': left - }); - }, - detachResizable: function(){ - this.resizable1.detach(); - this.resizable2.detach(); - this.resizable3.detach(); - this.resizable4.detach(); - this.resizable5.detach(); - this.windowEl.getElements('.handle').setStyle('display', 'none'); - }, - reattachResizable: function(){ - this.resizable1.attach(); - this.resizable2.attach(); - this.resizable3.attach(); - this.resizable4.attach(); - this.resizable5.attach(); - this.windowEl.getElements('.handle').setStyle('display', 'block'); - }, - /* - - Internal Function: insertWindowElements - - Arguments: - windowEl - - */ - insertWindowElements: function(){ - - var options = this.options; - var height = options.height; - var width = options.width; - var id = options.id; - - var cache = {}; - - if (Browser.Engine.trident4){ - cache.zIndexFixEl = new Element('iframe', { - 'id': id + '_zIndexFix', - 'class': 'zIndexFix', - 'scrolling': 'no', - 'marginWidth': 0, - 'marginHeight': 0, - 'src': '' - }).inject(this.windowEl); - } - - cache.overlayEl = new Element('div', { - 'id': id + '_overlay', - 'class': 'mochaOverlay' - }).inject(this.windowEl); - - cache.titleBarEl = new Element('div', { - 'id': id + '_titleBar', - 'class': 'mochaTitlebar', - 'styles': { - 'cursor': options.draggable ? 'move' : 'default' - } - }).inject(cache.overlayEl, 'top'); - - cache.titleEl = new Element('h3', { - 'id': id + '_title', - 'class': 'mochaTitle' - }).inject(cache.titleBarEl); - - if (options.icon != false){ - cache.titleBarEl.setStyles({ - 'padding-left': 15, - 'background': 'url(' + options.icon + ') 5px 5px no-repeat' - }); - } - - cache.contentBorderEl = new Element('div', { - 'id': id + '_contentBorder', - 'class': 'mochaContentBorder' - }).inject(cache.overlayEl); - - if (options.toolbar){ - cache.toolbarWrapperEl = new Element('div', { - 'id': id + '_toolbarWrapper', - 'class': 'mochaToolbarWrapper' - }).inject(cache.contentBorderEl, options.toolbarPosition == 'bottom' ? 'after' : 'before'); - - if (options.toolbarPosition == 'bottom') { - cache.toolbarWrapperEl.addClass('bottom'); - } - cache.toolbarEl = new Element('div', { - 'id': id + '_toolbar', - 'class': 'mochaToolbar' - }).inject(cache.toolbarWrapperEl); - } - - if (options.toolbar2){ - cache.toolbar2WrapperEl = new Element('div', { - 'id': id + '_toolbar2Wrapper', - 'class': 'mochaToolbarWrapper' - }).inject(cache.contentBorderEl, options.toolbar2Position == 'bottom' ? 'after' : 'before'); - - if (options.toolbar2Position == 'bottom') { - cache.toolbar2WrapperEl.addClass('bottom'); - } - cache.toolbar2El = new Element('div', { - 'id': id + '_toolbar2', - 'class': 'mochaToolbar' - }).inject(cache.toolbar2WrapperEl); - } - - cache.contentWrapperEl = new Element('div', { - 'id': id + '_contentWrapper', - 'class': 'mochaContentWrapper', - 'styles': { - 'width': width + 'px', - 'height': height + 'px' - } - }).inject(cache.contentBorderEl); - - if (this.options.shape == 'gauge'){ - cache.contentBorderEl.setStyle('borderWidth', 0); - } - - cache.contentEl = new Element('div', { - 'id': id + '_content', - 'class': 'mochaContent' - }).inject(cache.contentWrapperEl); - - if (this.options.useCanvas == true) { - cache.canvasEl = new Element('canvas', { - 'id': id + '_canvas', - 'class': 'mochaCanvas', - 'width': 1, - 'height': 1 - }).inject(this.windowEl); - - if (Browser.Engine.trident && MochaUI.ieSupport == 'excanvas'){ - G_vmlCanvasManager.initElement(cache.canvasEl); - cache.canvasEl = this.windowEl.getElement('.mochaCanvas'); - } - } - - cache.controlsEl = new Element('div', { - 'id': id + '_controls', - 'class': 'mochaControls' - }).inject(cache.overlayEl, 'after'); - - if (options.useCanvasControls == true){ - cache.canvasControlsEl = new Element('canvas', { - 'id': id + '_canvasControls', - 'class': 'mochaCanvasControls', - 'width': 14, - 'height': 14 - }).inject(this.windowEl); - - if (Browser.Engine.trident && MochaUI.ieSupport == 'excanvas'){ - G_vmlCanvasManager.initElement(cache.canvasControlsEl); - cache.canvasControlsEl = this.windowEl.getElement('.mochaCanvasControls'); - } - } - - if (options.closable){ - cache.closeButtonEl = new Element('div', { - 'id': id + '_closeButton', - 'class': 'mochaCloseButton', - 'title': 'Close' - }).inject(cache.controlsEl); - if (options.useCanvasControls == true){ - cache.closeButtonEl.setStyle('background', 'none'); - } - } - - if (options.maximizable){ - cache.maximizeButtonEl = new Element('div', { - 'id': id + '_maximizeButton', - 'class': 'mochaMaximizeButton', - 'title': 'Maximize' - }).inject(cache.controlsEl); - if (options.useCanvasControls == true){ - cache.maximizeButtonEl.setStyle('background', 'none'); - } - } - - if (options.minimizable){ - cache.minimizeButtonEl = new Element('div', { - 'id': id + '_minimizeButton', - 'class': 'mochaMinimizeButton', - 'title': 'Minimize' - }).inject(cache.controlsEl); - if (options.useCanvasControls == true){ - cache.minimizeButtonEl.setStyle('background', 'none'); - } - } - - if (options.useSpinner == true && options.shape != 'gauge' && options.type != 'notification'){ - cache.spinnerEl = new Element('div', { - 'id': id + '_spinner', - 'class': 'mochaSpinner', - 'width': 16, - 'height': 16 - }).inject(this.windowEl, 'bottom'); - } - - if (this.options.shape == 'gauge'){ - cache.canvasHeaderEl = new Element('canvas', { - 'id': id + '_canvasHeader', - 'class': 'mochaCanvasHeader', - 'width': this.options.width, - 'height': 26 - }).inject(this.windowEl, 'bottom'); - - if (Browser.Engine.trident && MochaUI.ieSupport == 'excanvas'){ - G_vmlCanvasManager.initElement(cache.canvasHeaderEl); - cache.canvasHeaderEl = this.windowEl.getElement('.mochaCanvasHeader'); - } - } - - if ( Browser.Engine.trident ){ - cache.overlayEl.setStyle('zIndex', 2); - } - - // For Mac Firefox 2 to help reduce scrollbar bugs in that browser - if (Browser.Platform.mac && Browser.Engine.gecko){ - if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ - var ffversion = new Number(RegExp.$1); - if (ffversion < 3){ - cache.overlayEl.setStyle('overflow', 'auto'); - } - } - } - - if (options.resizable){ - cache.n = new Element('div', { - 'id': id + '_resizeHandle_n', - 'class': 'handle', - 'styles': { - 'top': 0, - 'left': 10, - 'cursor': 'n-resize' - } - }).inject(cache.overlayEl, 'after'); - - cache.ne = new Element('div', { - 'id': id + '_resizeHandle_ne', - 'class': 'handle corner', - 'styles': { - 'top': 0, - 'right': 0, - 'cursor': 'ne-resize' - } - }).inject(cache.overlayEl, 'after'); - - cache.e = new Element('div', { - 'id': id + '_resizeHandle_e', - 'class': 'handle', - 'styles': { - 'top': 10, - 'right': 0, - 'cursor': 'e-resize' - } - }).inject(cache.overlayEl, 'after'); - - cache.se = new Element('div', { - 'id': id + '_resizeHandle_se', - 'class': 'handle cornerSE', - 'styles': { - 'bottom': 0, - 'right': 0, - 'cursor': 'se-resize' - } - }).inject(cache.overlayEl, 'after'); - - cache.s = new Element('div', { - 'id': id + '_resizeHandle_s', - 'class': 'handle', - 'styles': { - 'bottom': 0, - 'left': 10, - 'cursor': 's-resize' - } - }).inject(cache.overlayEl, 'after'); - - cache.sw = new Element('div', { - 'id': id + '_resizeHandle_sw', - 'class': 'handle corner', - 'styles': { - 'bottom': 0, - 'left': 0, - 'cursor': 'sw-resize' - } - }).inject(cache.overlayEl, 'after'); - - cache.w = new Element('div', { - 'id': id + '_resizeHandle_w', - 'class': 'handle', - 'styles': { - 'top': 10, - 'left': 0, - 'cursor': 'w-resize' - } - }).inject(cache.overlayEl, 'after'); - - cache.nw = new Element('div', { - 'id': id + '_resizeHandle_nw', - 'class': 'handle corner', - 'styles': { - 'top': 0, - 'left': 0, - 'cursor': 'nw-resize' - } - }).inject(cache.overlayEl, 'after'); - } - $extend(this, cache); - - }, - /* - - Internal function: drawWindow - This is where we create the canvas GUI - - Arguments: - windowEl: the $(window) - shadows: (boolean) false will draw a window without shadows - - */ - drawWindow: function(windowEl, shadows) { - - if (this.isCollapsed){ - this.drawWindowCollapsed(windowEl, shadows); - return; - } - - var options = this.options; - var shadowBlur = options.shadowBlur; - var shadowBlur2x = shadowBlur * 2; - var shadowOffset = this.options.shadowOffset; - - this.overlayEl.setStyles({ - 'width': this.contentWrapperEl.offsetWidth - }); - - // Resize iframe when window is resized - if (this.iframeEl) { - this.iframeEl.setStyles({ - 'height': this.contentWrapperEl.offsetHeight - }); - } - - var borderHeight = this.contentBorderEl.getStyle('border-top').toInt() + this.contentBorderEl.getStyle('border-bottom').toInt(); - var toolbarHeight = this.toolbarWrapperEl ? this.toolbarWrapperEl.getStyle('height').toInt() + this.toolbarWrapperEl.getStyle('border-top').toInt() : 0; - var toolbar2Height = this.toolbar2WrapperEl ? this.toolbar2WrapperEl.getStyle('height').toInt() + this.toolbar2WrapperEl.getStyle('border-top').toInt() : 0; - - this.headerFooterShadow = options.headerHeight + options.footerHeight + shadowBlur2x; - var height = this.contentWrapperEl.getStyle('height').toInt() + this.headerFooterShadow + toolbarHeight + toolbar2Height + borderHeight; - var width = this.contentWrapperEl.getStyle('width').toInt() + shadowBlur2x; - this.windowEl.setStyles({ - 'height': height, - 'width': width - }); - - this.overlayEl.setStyles({ - 'height': height, - 'top': shadowBlur - shadowOffset.y, - 'left': shadowBlur - shadowOffset.x - }); - - // Opera requires the canvas height and width be set this way when resizing: - if (this.options.useCanvas == true) { - this.canvasEl.height = height; - this.canvasEl.width = width; - } - - // Part of the fix for IE6 select z-index bug - if (Browser.Engine.trident4){ - this.zIndexFixEl.setStyles({ - 'width': width, - 'height': height - }) - } - - this.titleBarEl.setStyles({ - 'width': width - shadowBlur2x, - 'height': options.headerHeight - }); - - // Make sure loading icon is placed correctly. - if (options.useSpinner == true && options.shape != 'gauge' && options.type != 'notification'){ - this.spinnerEl.setStyles({ - 'left': shadowBlur - shadowOffset.x + 3, - 'bottom': shadowBlur + shadowOffset.y + 4 - }); - } - - if (this.options.useCanvas != false) { - - // Draw Window - var ctx = this.canvasEl.getContext('2d'); - ctx.clearRect(0, 0, width, height); - - switch (options.shape) { - case 'box': - this.drawBox(ctx, width, height, shadowBlur, shadowOffset, shadows); - break; - case 'gauge': - this.drawGauge(ctx, width, height, shadowBlur, shadowOffset, shadows); - break; - } - - - if (options.resizable){ - MochaUI.triangle( - ctx, - width - (shadowBlur + shadowOffset.x + 17), - height - (shadowBlur + shadowOffset.y + 18), - 11, - 11, - options.resizableColor, - 1.0 - ); - } - - // Invisible dummy object. The last element drawn is not rendered consistently while resizing in IE6 and IE7 - if (Browser.Engine.trident){ - MochaUI.triangle(ctx, 0, 0, 10, 10, options.resizableColor, 0); - } - } - - if (options.type != 'notification' && options.useCanvasControls == true){ - this.drawControls(width, height, shadows); - } - - }, - drawWindowCollapsed: function(windowEl, shadows) { - - var options = this.options; - var shadowBlur = options.shadowBlur; - var shadowBlur2x = shadowBlur * 2; - var shadowOffset = options.shadowOffset; - - var headerShadow = options.headerHeight + shadowBlur2x + 2; - var height = headerShadow; - var width = this.contentWrapperEl.getStyle('width').toInt() + shadowBlur2x; - this.windowEl.setStyle('height', height); - - this.overlayEl.setStyles({ - 'height': height, - 'top': shadowBlur - shadowOffset.y, - 'left': shadowBlur - shadowOffset.x - }); - - // Opera height and width must be set like this, when resizing: - this.canvasEl.height = height; - this.canvasEl.width = width; - - // Part of the fix for IE6 select z-index bug - if (Browser.Engine.trident4){ - this.zIndexFixEl.setStyles({ - 'width': width, - 'height': height - }); - } - - // Set width - this.windowEl.setStyle('width', width); - this.overlayEl.setStyle('width', width); - this.titleBarEl.setStyles({ - 'width': width - shadowBlur2x, - 'height': options.headerHeight - }); - - // Draw Window - if (this.options.useCanvas != false) { - var ctx = this.canvasEl.getContext('2d'); - ctx.clearRect(0, 0, width, height); - - this.drawBoxCollapsed(ctx, width, height, shadowBlur, shadowOffset, shadows); - if (options.useCanvasControls == true) { - this.drawControls(width, height, shadows); - } - - // Invisible dummy object. The last element drawn is not rendered consistently while resizing in IE6 and IE7 - if (Browser.Engine.trident){ - MochaUI.triangle(ctx, 0, 0, 10, 10, options.resizableColor, 0); - } - } - - }, - drawControls : function(width, height, shadows){ - var options = this.options; - var shadowBlur = options.shadowBlur; - var shadowOffset = options.shadowOffset; - var controlsOffset = options.controlsOffset; - - // Make sure controls are placed correctly. - this.controlsEl.setStyles({ - 'right': shadowBlur + shadowOffset.x + controlsOffset.right, - 'top': shadowBlur - shadowOffset.y + controlsOffset.top - }); - - this.canvasControlsEl.setStyles({ - 'right': shadowBlur + shadowOffset.x + controlsOffset.right, - 'top': shadowBlur - shadowOffset.y + controlsOffset.top - }); - - // Calculate X position for controlbuttons - //var mochaControlsWidth = 52; - this.closebuttonX = options.closable ? this.mochaControlsWidth - 7 : this.mochaControlsWidth + 12; - this.maximizebuttonX = this.closebuttonX - (options.maximizable ? 19 : 0); - this.minimizebuttonX = this.maximizebuttonX - (options.minimizable ? 19 : 0); - - var ctx2 = this.canvasControlsEl.getContext('2d'); - ctx2.clearRect(0, 0, 100, 100); - - if (this.options.closable){ - this.closebutton( - ctx2, - this.closebuttonX, - 7, - options.closeBgColor, - 1.0, - options.closeColor, - 1.0 - ); - } - if (this.options.maximizable){ - this.maximizebutton( - ctx2, - this.maximizebuttonX, - 7, - options.maximizeBgColor, - 1.0, - options.maximizeColor, - 1.0 - ); - } - if (this.options.minimizable){ - this.minimizebutton( - ctx2, - this.minimizebuttonX, - 7, - options.minimizeBgColor, - 1.0, - options.minimizeColor, - 1.0 - ); - } - - }, - drawBox: function(ctx, width, height, shadowBlur, shadowOffset, shadows){ - - var shadowBlur2x = shadowBlur * 2; - var cornerRadius = this.options.cornerRadius; - - // This is the drop shadow. It is created onion style. - if ( shadows != false ) { - for (var x = 0; x <= shadowBlur; x++){ - MochaUI.roundedRect( - ctx, - shadowOffset.x + x, - shadowOffset.y + x, - width - (x * 2) - shadowOffset.x, - height - (x * 2) - shadowOffset.y, - cornerRadius + (shadowBlur - x), - [0, 0, 0], - x == shadowBlur ? .29 : .065 + (x * .01) - ); - } - } - // Window body. - this.bodyRoundedRect( - ctx, // context - shadowBlur - shadowOffset.x, // x - shadowBlur - shadowOffset.y, // y - width - shadowBlur2x, // width - height - shadowBlur2x, // height - cornerRadius, // corner radius - this.options.bodyBgColor // Footer color - ); - - if (this.options.type != 'notification'){ - // Window header. - this.topRoundedRect( - ctx, // context - shadowBlur - shadowOffset.x, // x - shadowBlur - shadowOffset.y, // y - width - shadowBlur2x, // width - this.options.headerHeight, // height - cornerRadius, // corner radius - this.options.headerStartColor, // Header gradient's top color - this.options.headerStopColor // Header gradient's bottom color - ); - } - }, - drawBoxCollapsed: function(ctx, width, height, shadowBlur, shadowOffset, shadows){ - - var options = this.options; - var shadowBlur2x = shadowBlur * 2; - var cornerRadius = options.cornerRadius; - - // This is the drop shadow. It is created onion style. - if ( shadows != false ){ - for (var x = 0; x <= shadowBlur; x++){ - MochaUI.roundedRect( - ctx, - shadowOffset.x + x, - shadowOffset.y + x, - width - (x * 2) - shadowOffset.x, - height - (x * 2) - shadowOffset.y, - cornerRadius + (shadowBlur - x), - [0, 0, 0], - x == shadowBlur ? .3 : .06 + (x * .01) - ); - } - } - - // Window header - this.topRoundedRect2( - ctx, // context - shadowBlur - shadowOffset.x, // x - shadowBlur - shadowOffset.y, // y - width - shadowBlur2x, // width - options.headerHeight + 2, // height - cornerRadius, // corner radius - options.headerStartColor, // Header gradient's top color - options.headerStopColor // Header gradient's bottom color - ); - - }, - drawGauge: function(ctx, width, height, shadowBlur, shadowOffset, shadows){ - var options = this.options; - var radius = (width * .5) - (shadowBlur) + 16; - if (shadows != false) { - for (var x = 0; x <= shadowBlur; x++){ - MochaUI.circle( - ctx, - width * .5 + shadowOffset.x, - (height + options.headerHeight) * .5 + shadowOffset.x, - (width *.5) - (x * 2) - shadowOffset.x, - [0, 0, 0], - x == shadowBlur ? .75 : .075 + (x * .04) - ); - } - } - MochaUI.circle( - ctx, - width * .5 - shadowOffset.x, - (height + options.headerHeight) * .5 - shadowOffset.y, - (width *.5) - shadowBlur, - options.bodyBgColor, - 1 - ); - - // Draw gauge header - this.canvasHeaderEl.setStyles({ - 'top': shadowBlur - shadowOffset.y, - 'left': shadowBlur - shadowOffset.x - }); - var ctx = this.canvasHeaderEl.getContext('2d'); - ctx.clearRect(0, 0, width, 100); - ctx.beginPath(); - ctx.lineWidth = 24; - ctx.lineCap = 'round'; - ctx.moveTo(13, 13); - ctx.lineTo(width - (shadowBlur*2) - 13, 13); - ctx.strokeStyle = 'rgba(0, 0, 0, .65)'; - ctx.stroke(); - }, - bodyRoundedRect: function(ctx, x, y, width, height, radius, rgb){ - ctx.fillStyle = 'rgba(' + rgb.join(',') + ', 100)'; - ctx.beginPath(); - ctx.moveTo(x, y + radius); - ctx.lineTo(x, y + height - radius); - ctx.quadraticCurveTo(x, y + height, x + radius, y + height); - ctx.lineTo(x + width - radius, y + height); - ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); - ctx.lineTo(x + width, y + radius); - ctx.quadraticCurveTo(x + width, y, x + width - radius, y); - ctx.lineTo(x + radius, y); - ctx.quadraticCurveTo(x, y, x, y + radius); - ctx.fill(); - - }, - topRoundedRect: function(ctx, x, y, width, height, radius, headerStartColor, headerStopColor){ - var lingrad = ctx.createLinearGradient(0, 0, 0, height); - lingrad.addColorStop(0, 'rgba(' + headerStartColor.join(',') + ', 1)'); - lingrad.addColorStop(1, 'rgba(' + headerStopColor.join(',') + ', 1)'); - ctx.fillStyle = lingrad; - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.lineTo(x, y + height); - ctx.lineTo(x + width, y + height); - ctx.lineTo(x + width, y + radius); - ctx.quadraticCurveTo(x + width, y, x + width - radius, y); - ctx.lineTo(x + radius, y); - ctx.quadraticCurveTo(x, y, x, y + radius); - ctx.fill(); - /* - ctx.beginPath(); - ctx.strokeStyle = '#000'; - ctx.lineWidth = 1; - ctx.moveTo(x, y + height + .5); - ctx.lineTo(x + width, y + height + .5); - ctx.stroke(); - */ - - }, - topRoundedRect2: function(ctx, x, y, width, height, radius, headerStartColor, headerStopColor){ - var lingrad = ctx.createLinearGradient(0, this.options.shadowBlur - 1, 0, height + this.options.shadowBlur + 3); - lingrad.addColorStop(0, 'rgba(' + headerStartColor.join(',') + ', 1)'); - lingrad.addColorStop(1, 'rgba(' + headerStopColor.join(',') + ', 1)'); - ctx.fillStyle = lingrad; - ctx.beginPath(); - ctx.moveTo(x, y + radius); - ctx.lineTo(x, y + height - radius); - ctx.quadraticCurveTo(x, y + height, x + radius, y + height); - ctx.lineTo(x + width - radius, y + height); - ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); - ctx.lineTo(x + width, y + radius); - ctx.quadraticCurveTo(x + width, y, x + width - radius, y); - ctx.lineTo(x + radius, y); - ctx.quadraticCurveTo(x, y, x, y + radius); - ctx.fill(); - }, - maximizebutton: function(ctx, x, y, rgbBg, aBg, rgb, a){ - // Circle - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.arc(x, y, 7, 0, Math.PI*2, true); - ctx.fillStyle = 'rgba(' + rgbBg.join(',') + ',' + aBg + ')'; - ctx.fill(); - // X sign - ctx.strokeStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; - ctx.beginPath(); - ctx.moveTo(x, y - 4); - ctx.lineTo(x, y + 4); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(x - 4, y); - ctx.lineTo(x + 4, y); - ctx.stroke(); - }, - closebutton: function(ctx, x, y, rgbBg, aBg, rgb, a){ - // Circle - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.arc(x, y, 7, 0, Math.PI*2, true); - ctx.fillStyle = 'rgba(' + rgbBg.join(',') + ',' + aBg + ')'; - ctx.fill(); - // Plus sign - ctx.strokeStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; - ctx.beginPath(); - ctx.moveTo(x - 3, y - 3); - ctx.lineTo(x + 3, y + 3); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(x + 3, y - 3); - ctx.lineTo(x - 3, y + 3); - ctx.stroke(); - }, - minimizebutton: function(ctx, x, y, rgbBg, aBg, rgb, a){ - // Circle - ctx.beginPath(); - ctx.moveTo(x,y); - ctx.arc(x,y,7,0,Math.PI*2,true); - ctx.fillStyle = 'rgba(' + rgbBg.join(',') + ',' + aBg + ')'; - ctx.fill(); - // Minus sign - ctx.strokeStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; - ctx.beginPath(); - ctx.moveTo(x - 4, y); - ctx.lineTo(x + 4, y); - ctx.stroke(); - }, - /* - - Function: hideSpinner - Hides the spinner. - - */ - hideSpinner: function(spinner) { - if ($(spinner)) $(spinner).setStyle('visibility', 'hidden'); - }, - /* - - Function: showSpinner - Shows the spinner. - - */ - showSpinner: function(spinner){ - if (!this.options.useSpinner || this.options.shape == 'gauge' || this.options.type == 'notification') return; - $(spinner).setStyles({ - 'visibility': 'visible' - }); - }, - setMochaControlsWidth: function(){ - this.mochaControlsWidth = 0; - var options = this.options; - if (options.minimizable){ - this.mochaControlsWidth += (this.minimizeButtonEl.getStyle('margin-left').toInt() + this.minimizeButtonEl.getStyle('width').toInt()); - } - if (options.maximizable){ - this.mochaControlsWidth += (this.maximizeButtonEl.getStyle('margin-left').toInt() + this.maximizeButtonEl.getStyle('width').toInt()); - } - if (options.closable){ - this.mochaControlsWidth += (this.closeButtonEl.getStyle('margin-left').toInt() + this.closeButtonEl.getStyle('width').toInt()); - } - this.controlsEl.setStyle('width', this.mochaControlsWidth); - if (options.useCanvasControls == true){ - this.canvasControlsEl.setProperty('width', this.mochaControlsWidth); - } - } -}); -/* - -Script: Modal.js - Create modal dialog windows. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Requires: - Core.js, Window.js - -See Also: - - -*/ - -MochaUI.Modal = new Class({ - - Extends: MochaUI.Window, - - Implements: [Events, Options], - - initialize: function(options){ - - this.modalInitialize(); - - window.addEvent('resize', function(){ - this.setModalSize(); - }.bind(this)); - - }, - modalInitialize: function(){ - var modalOverlay = new Element('div', { - 'id': 'modalOverlay', - 'styles': { - 'height': document.getCoordinates().height, - 'opacity': .6 - } - }).inject(document.body); - - modalOverlay.addEvent('click', function(e){ - MochaUI.closeWindow(MochaUI.currentModal); - }); - - if (Browser.Engine.trident4){ - var modalFix = new Element('iframe', { - 'id': 'modalFix', - 'scrolling': 'no', - 'marginWidth': 0, - 'marginHeight': 0, - 'src': '', - 'styles': { - 'height': document.getCoordinates().height - } - }).inject(document.body); - } - - this.modalOverlayOpenMorph = new Fx.Morph($('modalOverlay'), { - 'duration': 150 - }); - this.modalOverlayCloseMorph = new Fx.Morph($('modalOverlay'), { - 'duration': 150, - onComplete: function(){ - $('modalOverlay').setStyle('display', 'none'); - if (Browser.Engine.trident4){ - $('modalFix').setStyle('display', 'none'); - } - }.bind(this) - }); - }, - setModalSize: function(){ - $('modalOverlay').setStyle('height', document.getCoordinates().height); - if (Browser.Engine.trident4){ - $('modalFix').setStyle('height', document.getCoordinates().height); - } - } -}); -MochaUI.Modal.implement(new Options, new Events); -/* - -Script: Windows-from-html.js - Create windows from html markup in page. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Requires: - Core.js, Window.js - -Example: - HTML markup. - (start code) -
    -

    My Window

    -

    My Window Content

    -
    - (end) - -See Also: - - -*/ - -MochaUI.extend({ - NewWindowsFromHTML: function(){ - $$('div.mocha').each(function(el) { - // Get the window title and destroy that element, so it does not end up in window content - if ( Browser.Engine.presto || Browser.Engine.trident5 ){ - el.setStyle('display','block'); // Required by Opera, and probably IE7 - } - var title = el.getElement('h3.mochaTitle'); - var elDimensions = el.getStyles('height', 'width'); - var properties = { - id: el.getProperty('id'), - height: elDimensions.height.toInt(), - width: elDimensions.width.toInt(), - x: el.getStyle('left').toInt(), - y: el.getStyle('top').toInt() - }; - // If there is a title element, set title and destroy the element so it does not end up in window content - if ( title ) { - properties.title = title.innerHTML; - title.destroy(); - } - - // Get content and destroy the element - properties.content = el.innerHTML; - el.destroy(); - - // Create window - new MochaUI.Window(properties, true); - }.bind(this)); - } -}); -/* - -Script: Windows-from-json.js - Create one or more windows from JSON data. You can define all the same properties as you can for new MochaUI.Window(). Undefined properties are set to their defaults. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Syntax: - (start code) - MochaUI.newWindowsFromJSON(properties); - (end) - -Example: - (start code) - MochaUI.jsonWindows = function(){ - var url = 'data/json-windows-data.js'; - var request = new Request.JSON({ - url: url, - method: 'get', - onComplete: function(properties) { - MochaUI.newWindowsFromJSON(properties.windows); - } - }).send(); - } - (end) - -Note: - Windows created from JSON are not compatible with the current cookie based version - of Save and Load Workspace. - -See Also: - - -*/ - -MochaUI.extend({ - newWindowsFromJSON: function(properties){ - properties.each(function(properties) { - new MochaUI.Window(properties); - }.bind(this)); - } -}); -/* - -Script: Arrange-cascade.js - Cascade windows. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Requires: - Core.js, Window.js - -Syntax: - (start code) - MochaUI.arrangeCascade(); - (end) - -*/ - -MochaUI.options.extend({ - viewportTopOffset: 30, // Use a negative number if neccessary to place first window where you want it - viewportLeftOffset: 20, - windowTopOffset: 50, // Initial vertical spacing of each window - windowLeftOffset: 40 // Initial horizontal spacing of each window -}); - -MochaUI.extend({ - arrangeCascade: function(){ - // See how much space we have to work with - var coordinates = document.getCoordinates(); - - var openWindows = 0; - MochaUI.Windows.instances.each(function(instance){ - if (!instance.isMinimized) openWindows ++; - }); - - if ((this.options.windowTopOffset * (openWindows + 1)) >= (coordinates.height - this.options.viewportTopOffset)) { - var topOffset = (coordinates.height - this.options.viewportTopOffset) / (openWindows + 1); - } - else { - var topOffset = this.options.windowTopOffset; - } - - if ((this.options.windowLeftOffset * (openWindows + 1)) >= (coordinates.width - this.options.viewportLeftOffset - 20)) { - var leftOffset = (coordinates.width - this.options.viewportLeftOffset - 20) / (openWindows + 1); - } - else { - var leftOffset = this.options.windowLeftOffset; - } - - var x = this.options.viewportLeftOffset; - var y = this.options.viewportTopOffset; - $$('div.mocha').each(function(windowEl){ - var currentWindowClass = MochaUI.Windows.instances.get(windowEl.id); - if (!currentWindowClass.isMinimized && !currentWindowClass.isMaximized){ - id = windowEl.id; - MochaUI.focusWindow(windowEl); - x += leftOffset; - y += topOffset; - - if (MochaUI.options.useEffects == false){ - windowEl.setStyles({ - 'top': y, - 'left': x - }); - } - else { - var cascadeMorph = new Fx.Morph(windowEl, { - 'duration': 550 - }); - cascadeMorph.start({ - 'top': y, - 'left': x - }); - } - } - }.bind(this)); - } -}); -/* - -Script: Arrange-tile.js - Cascade windows. - -Authors: - Harry Roberts and Greg Houston - -License: - MIT-style license. - -Requires: - Core.js, Window.js - -Syntax: - (start code) - MochaUI.arrangeTile(); - (end) - -*/ - -MochaUI.extend({ - arrangeTile: function(){ - var x = 10; - var y = 10; - - var instances = MochaUI.Windows.instances; - - var windowsNum = 0; - - instances.each(function(instance){ - if (!instance.isMinimized && !instance.isMaximized){ - windowsNum++; - } - }); - - var cols = 3; - var rows = Math.ceil(windowsNum / cols); - - var coordinates = document.getCoordinates(); - - var col_width = ((coordinates.width - this.options.viewportLeftOffset) / cols); - var col_height = ((coordinates.height - this.options.viewportTopOffset) / rows); - - var row = 0; - var col = 0; - - instances.each(function(instance){ - if (!instance.isMinimized && !instance.isMaximized){ - - var content = instance.contentWrapperEl; - var content_coords = content.getCoordinates(); - var window_coords = instance.windowEl.getCoordinates(); - - // Calculate the amount of padding around the content window - var padding_top = content_coords.top - window_coords.top; - var padding_bottom = window_coords.height - content_coords.height - padding_top; - var padding_left = content_coords.left - window_coords.left; - var padding_right = window_coords.width - content_coords.width - padding_left; - - /* - - // This resizes the windows - if (instance.options.shape != 'gauge' && instance.options.resizable == true){ - var width = (col_width - 3 - padding_left - padding_right); - var height = (col_height - 3 - padding_top - padding_bottom); - - if (width > instance.options.resizeLimit.x[0] && width < instance.options.resizeLimit.x[1]){ - content.setStyle('width', width); - } - if (height > instance.options.resizeLimit.y[0] && height < instance.options.resizeLimit.y[1]){ - content.setStyle('height', height); - } - - }*/ - - var left = (x + (col * col_width)); - var top = (y + (row * col_height)); - - instance.windowEl.setStyles({ - 'left': left, - 'top': top - }); - - instance.drawWindow(instance.windowEl); - - MochaUI.focusWindow(instance.windowEl); - - if (++col === cols) { - row++; - col = 0; - } - } - }.bind(this)); - } -});/* - -Script: Tabs.js - Functionality for window tabs. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Requires: - Core.js, Window.js (for tabbed windows) or Layout.js (for tabbed panels) - -*/ - -MochaUI.extend({ - /* - - Function: initializeTabs - Add click event to each list item that fires the selected function. - - */ - initializeTabs: function(el){ - $(el).getElements('li').each(function(listitem){ - listitem.addEvent('click', function(e){ - MochaUI.selected(this, el); - }); - }); - }, - /* - - Function: selected - Add "selected" class to current list item and remove it from sibling list items. - - Syntax: - (start code) - selected(el, parent); - (end) - -Arguments: - el - the list item - parent - the ul - - */ - selected: function(el, parent){ - $(parent).getChildren().each(function(listitem){ - listitem.removeClass('selected'); - }); - el.addClass('selected'); - } -}); - -/* - -Script: Layout.js - Create web application layouts. Enables window maximize. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Requires: - Core.js, Window.js - -*/ - -MochaUI.Desktop = new Class({ - - Extends: MochaUI.Window, - - Implements: [Events, Options], - - options: { - // Naming options: - // If you change the IDs of the Mocha Desktop containers in your HTML, you need to change them here as well. - desktop: 'desktop', - desktopHeader: 'desktopHeader', - desktopFooter: 'desktopFooter', - desktopNavBar: 'desktopNavbar', - pageWrapper: 'pageWrapper', - page: 'page', - desktopFooter: 'desktopFooterWrapper' - }, - initialize: function(options){ - this.setOptions(options); - this.desktop = $(this.options.desktop); - this.desktopHeader = $(this.options.desktopHeader); - this.desktopNavBar = $(this.options.desktopNavBar); - this.pageWrapper = $(this.options.pageWrapper); - this.page = $(this.options.page); - this.desktopFooter = $(this.options.desktopFooter); - - // This is run on dock initialize so no need to do it twice. - if (!MochaUI.Dock.dockWrapper){ - this.setDesktopSize(); - } - this.menuInitialize(); - - // Resize desktop, page wrapper, modal overlay, and maximized windows when browser window is resized - window.addEvent('resize', function(e){ - this.onBrowserResize(); - }.bind(this)); - }, - menuInitialize: function(){ - // Fix for dropdown menus in IE6 - if (Browser.Engine.trident4 && this.desktopNavBar){ - this.desktopNavBar.getElements('li').each(function(element) { - element.addEvent('mouseenter', function(){ - this.addClass('ieHover'); - }); - element.addEvent('mouseleave', function(){ - this.removeClass('ieHover'); - }); - }); - }; - }, - onBrowserResize: function(){ - this.setDesktopSize(); - // Resize maximized windows to fit new browser window size - setTimeout( function(){ - MochaUI.Windows.instances.each(function(instance){ - if (instance.isMaximized){ - - // Hide iframe while resize for better performance - if ( instance.iframeEl ){ - instance.iframeEl.setStyle('visibility', 'hidden'); - } - - var coordinates = document.getCoordinates(); - var borderHeight = instance.contentBorderEl.getStyle('border-top').toInt() + instance.contentBorderEl.getStyle('border-bottom').toInt(); - var toolbarHeight = instance.toolbarWrapperEl ? instance.toolbarWrapperEl.getStyle('height').toInt() + instance.toolbarWrapperEl.getStyle('border-top').toInt() : 0; - instance.contentWrapperEl.setStyles({ - 'height': coordinates.height - instance.options.headerHeight - instance.options.footerHeight - borderHeight - toolbarHeight, - 'width': coordinates.width - }); - - instance.drawWindow($(instance.options.id)); - if ( instance.iframeEl ){ - instance.iframeEl.setStyles({ - 'height': instance.contentWrapperEl.getStyle('height') - }); - instance.iframeEl.setStyle('visibility', 'visible'); - } - - } - }.bind(this)); - }.bind(this), 100); - }, - setDesktopSize: function(){ - var windowDimensions = window.getCoordinates(); - - // var dock = $(MochaUI.options.dock); - var dockWrapper = $(MochaUI.options.dockWrapper); - - // Setting the desktop height may only be needed by IE7 - if (this.desktop){ - this.desktop.setStyle('height', windowDimensions.height); - } - - // Set pageWrapper height so the dock doesn't cover the pageWrapper scrollbars. - if (this.pageWrapper) { - - var dockOffset = MochaUI.dockVisible ? dockWrapper.offsetHeight : 0; - var pageWrapperHeight = windowDimensions.height; - pageWrapperHeight -= this.pageWrapper.getStyle('border-top').toInt(); - pageWrapperHeight -= this.pageWrapper.getStyle('border-bottom').toInt(); - if (this.desktopHeader){ pageWrapperHeight -= this.desktopHeader.offsetHeight; } - if (this.desktopFooter){ pageWrapperHeight -= this.desktopFooter.offsetHeight; } - pageWrapperHeight -= dockOffset; - - if (pageWrapperHeight < 0){ - pageWrapperHeight = 0; - } - this.pageWrapper.setStyle('height', pageWrapperHeight); - } - - if (MochaUI.Columns.instances.getKeys().length > 0){ // Conditional is a fix for a bug in IE6 in the no toolbars demo. - MochaUI.Desktop.resizePanels(); - } - }, - resizePanels: function(){ - if (Browser.Engine.trident4){ - $$('.pad').setStyle('display', 'none'); - $$('.rHeight').setStyle('height', 1); - } - MochaUI.panelHeight(); - MochaUI.rWidth(); - if (Browser.Engine.trident4) $$('.pad').setStyle('display', 'block'); - }, - /* - - Function: maximizeWindow - Maximize a window. - - Syntax: - (start code) - MochaUI.Desktop.maximizeWindow(windowEl); - (end) - - */ - maximizeWindow: function(windowEl){ - - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - var options = currentInstance.options; - var windowDrag = currentInstance.windowDrag; - - // If window no longer exists or is maximized, stop - if (windowEl != $(windowEl) || currentInstance.isMaximized ) return; - - if (currentInstance.isCollapsed){ - MochaUI.collapseToggle(windowEl); - } - - currentInstance.isMaximized = true; - - // If window is restricted to a container, it should not be draggable when maximized. - if (currentInstance.options.restrict){ - windowDrag.detach(); - if (options.resizable) { - currentInstance.detachResizable(); - } - currentInstance.titleBarEl.setStyle('cursor', 'default'); - } - - // If the window has a container that is not the desktop - // temporarily move the window to the desktop while it is minimized. - if (options.container != this.desktop){ - this.desktop.grab(windowEl); - if (this.options.restrict){ - windowDrag.container = this.desktop; - } - } - - // Save original position - currentInstance.oldTop = windowEl.getStyle('top'); - currentInstance.oldLeft = windowEl.getStyle('left'); - - var contentWrapperEl = currentInstance.contentWrapperEl; - - // Save original dimensions - contentWrapperEl.oldWidth = contentWrapperEl.getStyle('width'); - contentWrapperEl.oldHeight = contentWrapperEl.getStyle('height'); - - // Hide iframe - // Iframe should be hidden when minimizing, maximizing, and moving for performance and Flash issues - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'hidden'); - } - - var windowDimensions = document.getCoordinates(); - var options = currentInstance.options; - var shadowBlur = options.shadowBlur; - var shadowOffset = options.shadowOffset; - var newHeight = windowDimensions.height - options.headerHeight - options.footerHeight; - newHeight -= currentInstance.contentBorderEl.getStyle('border-top').toInt(); - newHeight -= currentInstance.contentBorderEl.getStyle('border-bottom').toInt(); - newHeight -= ( currentInstance.toolbarWrapperEl ? currentInstance.toolbarWrapperEl.getStyle('height').toInt() + currentInstance.toolbarWrapperEl.getStyle('border-top').toInt() : 0); - - if (MochaUI.options.useEffects == false){ - windowEl.setStyles({ - 'top': shadowOffset.y - shadowBlur, - 'left': shadowOffset.x - shadowBlur - }); - currentInstance.contentWrapperEl.setStyles({ - 'height': newHeight, - 'width': windowDimensions.width - }); - currentInstance.drawWindow(windowEl); - // Show iframe - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'visible'); - } - currentInstance.fireEvent('onMaximize', windowEl); - } - else { - - // Todo: Initialize the variables for these morphs once in an initialize function and reuse them - - var maximizeMorph = new Fx.Elements([contentWrapperEl, windowEl], { - duration: 70, - onStart: function(windowEl){ - currentInstance.maximizeAnimation = currentInstance.drawWindow.periodical(20, currentInstance, windowEl); - }.bind(this), - onComplete: function(windowEl){ - $clear(currentInstance.maximizeAnimation); - currentInstance.drawWindow(windowEl); - // Show iframe - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'visible'); - } - currentInstance.fireEvent('onMaximize', windowEl); - }.bind(this) - }); - maximizeMorph.start({ - '0': { 'height': newHeight, - 'width': windowDimensions.width - }, - '1': { 'top': shadowOffset.y - shadowBlur, - 'left': shadowOffset.x - shadowBlur - } - }); - } - currentInstance.maximizeButtonEl.setProperty('title', 'Restore'); - MochaUI.focusWindow(windowEl); - - }, - /* - - Function: restoreWindow - Restore a maximized window. - - Syntax: - (start code) - MochaUI.Desktop.restoreWindow(windowEl); - (end) - - */ - restoreWindow: function(windowEl){ - - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - - // Window exists and is maximized ? - if (windowEl != $(windowEl) || !currentInstance.isMaximized) return; - - var options = currentInstance.options; - currentInstance.isMaximized = false; - - if (options.restrict){ - currentInstance.windowDrag.attach(); - if (options.resizable){ - currentInstance.reattachResizable(); - } - currentInstance.titleBarEl.setStyle('cursor', 'move'); - } - - // Hide iframe - // Iframe should be hidden when minimizing, maximizing, and moving for performance and Flash issues - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'hidden'); - } - - var contentWrapperEl = currentInstance.contentWrapperEl; - - if (MochaUI.options.useEffects == false){ - contentWrapperEl.setStyles({ - 'width': contentWrapperEl.oldWidth, - 'height': contentWrapperEl.oldHeight - }); - currentInstance.drawWindow(windowEl); - windowEl.setStyles({ - 'top': currentInstance.oldTop, - 'left': currentInstance.oldLeft - }); - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'visible'); - } - if (options.container != this.desktop){ - $(options.container).grab(windowEl); - if (options.restrict){ - currentInstance.windowDrag.container = $(options.container); - } - } - currentInstance.fireEvent('onRestore', windowEl); - } - else { - var restoreMorph = new Fx.Elements([contentWrapperEl, windowEl], { - 'duration': 150, - 'onStart': function(windowEl){ - currentInstance.maximizeAnimation = currentInstance.drawWindow.periodical(20, currentInstance, windowEl); - }.bind(this), - 'onComplete': function(el){ - $clear(currentInstance.maximizeAnimation); - currentInstance.drawWindow(windowEl); - if (currentInstance.iframeEl){ - currentInstance.iframeEl.setStyle('visibility', 'visible'); - } - if (options.container != this.desktop){ - $(options.container).grab(windowEl); - if (options.restrict){ - currentInstance.windowDrag.container = $(options.container); - } - } - currentInstance.fireEvent('onRestore', windowEl); - }.bind(this) - }); - restoreMorph.start({ - '0': { 'height': contentWrapperEl.oldHeight, - 'width': contentWrapperEl.oldWidth - }, - '1': { 'top': currentInstance.oldTop, - 'left': currentInstance.oldLeft - } - }); - } - currentInstance.maximizeButtonEl.setProperty('title', 'Maximize'); - } -}); -MochaUI.Desktop.implement(new Options, new Events); - -/* - -Class: Column - Create a column. Columns should be created from left to right. - -Syntax: -(start code) - MochaUI.Panel(); -(end) - -Arguments: - options - -Options: - id - The ID of the column. This must be set when creating the column. - placement - Can be 'right', 'main', or 'left'. There must be at least one column with the 'main' option. - width - 'main' column is fluid and should not be given a width. - resizeLimit - resizelimit of a 'right' or 'left' column. - onResize - (function) Fired when the column is resized. - onCollapse - (function) Fired when the column is collapsed. - onExpand - (function) Fired when the column is expanded. - -*/ -MochaUI.Column = new Class({ - - Extends: MochaUI.Desktop, - - Implements: [Events, Options], - - options: { - id: null, - placement: null, - width: null, - resizeLimit: [], - - // Events - onResize: $empty, - onCollapse: $empty, - onExpand: $empty - - }, - initialize: function(options){ - this.setOptions(options); - - $extend(this, { - timestamp: $time(), - isCollapsed: false, - oldWidth: 0 - }); - - // Shorten object chain - var options = this.options; - var instances = MochaUI.Columns.instances; - var instanceID = instances.get(options.id); - - // Check to see if there is already a class instance for this Column - if (instanceID){ - var currentInstance = instanceID; - } - - // Check if column already exists - if ( this.columnEl ){ - return; - } - else { - instances.set(options.id, this); - } - - this.columnEl = new Element('div', { - 'id': this.options.id, - 'class': 'column expanded', - 'styles': { - 'width': options.placement == 'main' ? null : options.width - } - }).inject($(MochaUI.Desktop.pageWrapper)); - - var parent = this.columnEl.getParent(); - var columnHeight = parent.getStyle('height').toInt(); - this.columnEl.setStyle('height', columnHeight); - - if (options.placement == 'main'){ - this.columnEl.addClass('rWidth'); - } - - this.spacerEl = new Element('div', { - 'id': this.options.id + '_spacer', - 'class': 'horizontalHandle' - }).inject(this.columnEl); - - switch (this.options.placement) { - case 'left': - this.handleEl = new Element('div', { - 'id': this.options.id + '_handle', - 'class': 'columnHandle' - }).inject(this.columnEl, 'after'); - - this.handleIconEl = new Element('div', { - 'id': options.id + '_handle_icon', - 'class': 'handleIcon' - }).inject(this.handleEl); - - addResizeRight(this.columnEl, options.resizeLimit[0], options.resizeLimit[1]); - break; - case 'right': - this.handleEl = new Element('div', { - 'id': this.options.id + '_handle', - 'class': 'columnHandle' - }).inject(this.columnEl, 'before'); - - this.handleIconEl = new Element('div', { - 'id': options.id + '_handle_icon', - 'class': 'handleIcon' - }).inject(this.handleEl); - addResizeLeft(this.columnEl, options.resizeLimit[0], options.resizeLimit[1]); - break; - } - - if (this.handleEl != null){ - this.handleEl.addEvent('dblclick', function(){ - this.columnToggle(); - }.bind(this)); - } - - MochaUI.rWidth(); - - }, - columnToggle: function(){ - var column= this.columnEl; - - // Collapse - if (this.isCollapsed == false){ - this.oldWidth = column.getStyle('width').toInt(); - - this.resize.detach(); - this.handleEl.removeEvents('dblclick'); - this.handleEl.addEvent('click', function(){ - this.columnToggle(); - }.bind(this)); - this.handleEl.setStyle('cursor', 'pointer').addClass('detached'); - - column.setStyle('width', 0); - this.isCollapsed = true; - column.addClass('collapsed'); - column.removeClass('expanded'); - - MochaUI.rWidth(); - this.fireEvent('onCollapse'); - } - // Expand - else { - column.setStyle('width', this.oldWidth); - this.isCollapsed = false; - column.addClass('expanded'); - column.removeClass('collapsed'); - - this.handleEl.removeEvents('click'); - this.handleEl.addEvent('dblclick', function(){ - this.columnToggle(); - }.bind(this)); - this.resize.attach(); - this.handleEl.setStyle('cursor', 'e-resize').addClass('attached'); - - MochaUI.rWidth(); - this.fireEvent('onExpand'); - } - } -}); -MochaUI.Column.implement(new Options, new Events); - -/* - -Class: Panel - Create a panel. Panels go one on top of another in columns. Create your columns first and then add your panels. Panels should be created from top to bottom, left to right. - -Syntax: -(start code) - MochaUI.Panel(); -(end) - -Arguments: - options - -Options: - id - The ID of the panel. This must be set when creating the panel. - column - Where to inject the panel. This must be set when creating the panel. - loadMethod - ('html', 'xhr', or 'iframe') - contentURL - Used if loadMethod is set to 'xhr' or 'iframe'. - evalScripts - (boolean) An xhr loadMethod option. Defaults to true. - evalResponse - (boolean) An xhr loadMethod option. Defaults to false. - content - (string or element) An html loadMethod option. - tabsURL - (url) - footer - (boolean) - footerURL - (url) - height - (number) Height of content area. - addClass - (string) Add a class to the panel. - scrollbars - (boolean) - padding - (object) - panelBackground - CSS background property for the panel. - onBeforeBuild - (function) Fired before the panel is created. - onContentLoaded - (function) Fired after the panel's conten is loaded. - onResize - (function) Fired when the panel is resized. - onCollapse - (function) Fired when the panel is collapsed. - onExpand - (function) Fired when the panel is expanded. - -*/ -MochaUI.Panel = new Class({ - - Extends: MochaUI.Desktop, - - Implements: [Events, Options], - - options: { - id: null, - title: 'New Panel', - column: null, - loadMethod: 'html', - contentURL: 'pages/lipsum.html', - - // xhr options - evalScripts: true, - evalResponse: false, - - // html options - content: 'Panel content', - - // Tabs - tabsURL: null, - - footer: false, - footerURL: 'pages/lipsum.html', - - // Style options: - height: 125, - addClass: '', - scrollbars: true, - padding: { top: 0, right: 0, bottom: 0, left: 0 }, - - // Color options: - panelBackground: '#f8f8f8', - - // Events - onBeforeBuild: $empty, - onContentLoaded: $empty, - onResize: $empty, - onCollapse: $empty, - onExpand: $empty - - }, - initialize: function(options){ - this.setOptions(options); - - $extend(this, { - timestamp: $time(), - isCollapsed: false, - oldHeight: 0, - partner: null - }); - - // Shorten object chain - var instances = MochaUI.Panels.instances; - var instanceID = instances.get(this.options.id); - - // Check to see if there is already a class instance for this panel - if (instanceID){ - var currentInstance = instanceID; - } - - // Check if panel already exists - if ( this.panelEl ){ - return; - } - else { - instances.set(this.options.id, this); - } - - this.fireEvent('onBeforeBuild'); - - if (this.options.loadMethod == 'iframe') { - // Iframes have their own scrollbars and padding. - this.options.scrollbars = false; - this.options.padding = { top: 0, right: 0, bottom: 0, left: 0 }; - } - - this.showHandle = true; - if ($(this.options.column).getChildren().length == 0){ - this.showHandle = false; - } - - this.panelEl = new Element('div', { - 'id': this.options.id, - 'class': 'panel expanded', - 'styles': { - 'height': this.options.height, - 'background': this.options.panelBackground - } - }).inject($(this.options.column)); - - this.panelEl.addClass(this.options.addClass); - - this.contentEl = new Element('div', { - 'id': this.options.id + '_pad', - 'class': 'pad' - }).inject(this.panelEl); - - if (this.options.footer){ - this.footerWrapperEl = new Element('div', { - 'id': this.options.id + '_panelFooterWrapper', - 'class': 'panel-footerWrapper' - }).inject(this.panelEl); - - this.footerEl = new Element('div', { - 'id': this.options.id + '_panelFooter', - 'class': 'panel-footer' - }).inject(this.footerWrapperEl); - - - MochaUI.updateContent({ - 'element': this.panelEl, - 'childElement': this.footerEl, - 'loadMethod': 'xhr', - 'url': this.options.footerURL - }); - - } - - // This is in order to use the same variable as the windows do in updateContent. - // May rethink this. - this.contentWrapperEl = this.panelEl; - - // Set scrollbars, always use 'hidden' for iframe windows - this.contentWrapperEl.setStyles({ - 'overflow': this.options.scrollbars && !this.iframeEl ? 'auto' : 'hidden' - }); - - this.contentEl.setStyles({ - 'padding-top': this.options.padding.top, - 'padding-bottom': this.options.padding.bottom, - 'padding-left': this.options.padding.left, - 'padding-right': this.options.padding.right - }); - - this.panelHeaderEl = new Element('div', { - 'id': this.options.id + '_header', - 'class': 'panel-header' - }).inject(this.panelEl, 'before'); - - this.panelHeaderToolboxEl = new Element('div', { - 'id': this.options.id + '_headerToolbox', - 'class': 'panel-header-toolbox' - }).inject(this.panelHeaderEl); - - this.collapseToggleEl = new Element('div', { - 'id': this.options.id + '_minmize', - 'class': 'panel-collapse icon16', - 'styles': { - 'width': 16, - 'height': 16 - }, - 'title': 'Collapse Panel' - }).inject(this.panelHeaderToolboxEl); - - this.collapseToggleEl.addEvent('click', function(event){ - var panel = this.panelEl; - - // Get siblings and make sure they are not all collapsed. - var instances = MochaUI.Panels.instances; - var expandedSiblings = []; - panel.getAllPrevious('.panel').each(function(sibling){ - var currentInstance = instances.get(sibling.id); - if (currentInstance.isCollapsed == false){ - expandedSiblings.push(sibling); - } - }); - panel.getAllNext('.panel').each(function(sibling){ - var currentInstance = instances.get(sibling.id); - if (currentInstance.isCollapsed == false){ - expandedSiblings.push(sibling); - } - }); - - if (this.isCollapsed == false) { - var currentColumn = MochaUI.Columns.instances.get($(this.options.column).id); - - if (expandedSiblings.length == 0 && currentColumn.options.placement != 'main'){ - var currentColumn = MochaUI.Columns.instances.get($(this.options.column).id); - currentColumn.columnToggle(); - return; - } - else if (expandedSiblings.length == 0 && currentColumn.options.placement == 'main'){ - return; - } - this.oldHeight = panel.getStyle('height').toInt(); - if (this.oldHeight < 10) this.oldHeight = 20; - panel.setStyle('height', 0); - this.isCollapsed = true; - panel.addClass('collapsed'); - panel.removeClass('expanded'); - MochaUI.panelHeight(this.options.column, panel, 'collapsing'); - this.collapseToggleEl.removeClass('panel-collapsed'); - this.collapseToggleEl.addClass('panel-expand'); - this.collapseToggleEl.setProperty('title','Expand Panel'); - this.fireEvent('onCollapse'); - } - else { - panel.setStyle('height', this.oldHeight); - this.isCollapsed = false; - panel.addClass('expanded'); - panel.removeClass('collapsed'); - MochaUI.panelHeight(this.options.column, panel, 'expanding'); - this.collapseToggleEl.removeClass('panel-expand'); - this.collapseToggleEl.addClass('panel-collapsed'); - this.collapseToggleEl.setProperty('title','Collapse Panel'); - this.fireEvent('onExpand'); - } - } - .bind(this)); - - this.panelHeaderContentEl = new Element('div', { - 'id': this.options.id + '_headerContent', - 'class': 'panel-headerContent' - }).inject(this.panelHeaderEl); - - this.titleEl = new Element('h2', { - 'id': this.options.id + '_title' - }).inject(this.panelHeaderContentEl); - - if (this.options.tabsURL == null){ - this.titleEl.set('html', this.options.title); - } - else { - this.panelHeaderContentEl.addClass('tabs'); - MochaUI.updateContent({ - 'element': this.panelEl, - 'childElement': this.panelHeaderContentEl, - 'loadMethod': 'xhr', - 'url': this.options.tabsURL - }); - } - - this.handleEl = new Element('div', { - 'id': this.options.id + '_handle', - 'class': 'horizontalHandle', - 'styles': { - 'display': this.showHandle == true ? 'block' : 'none' - } - }).inject(this.panelEl, 'after'); - - this.handleIconEl = new Element('div', { - 'id': this.options.id + '_handle_icon', - 'class': 'handleIcon' - }).inject(this.handleEl); - - addResizeBottom(this.options.id); - - // Add content to panel. - MochaUI.updateContent({ - 'element': this.panelEl, - 'content': this.options.content, - 'url': this.options.contentURL - }); - - MochaUI.panelHeight(this.options.column, this.panelEl, 'new'); - - } -}); -MochaUI.Panel.implement(new Options, new Events); - - -MochaUI.extend({ - // Panel Height - panelHeight: function(column, changing, action){ - if (column != null) { - MochaUI.panelHeight2($(column), changing, action); - } - else { - $$('.column').each(function(column){ - MochaUI.panelHeight2(column); - }.bind(this)); - } - }, - /* - - actions can be new, collapsing or expanding. - - */ - panelHeight2: function(column, changing, action){ - - var instances = MochaUI.Panels.instances; - - var parent = column.getParent(); - var columnHeight = parent.getStyle('height').toInt(); - if (Browser.Engine.trident4){ - columnHeight -= 1; - } - column.setStyle('height', columnHeight); - - var panels = column.getChildren('.panel'); // All the panels in the column. - var panelsExpanded = column.getChildren('.expanded'); // All the expanded panels in the column. - var panelsToResize = []; // All the panels in the column whose height will be effected. - var tallestPanel; // The panel with the greatest height - var tallestPanelHeight = 0; - - this.panelsHeight = 0; // Height of all the panels in the column - this.height = 0; // Height of all the elements in the column - - // Set panel resize partners - panels.each(function(panel){ - currentInstance = instances.get(panel.id); - if (panel.hasClass('expanded') && panel.getNext('.expanded')){ - currentInstance.partner = panel.getNext('.expanded'); - currentInstance.resize.attach(); - currentInstance.handleEl.setStyles({ - 'display': 'block', - 'cursor': 'n-resize' - }).removeClass('detached'); - } - else { - currentInstance.resize.detach(); - currentInstance.handleEl.setStyle('cursor', null).addClass('detached'); - } - if (panel.getNext('.panel') == null){ - currentInstance.handleEl.setStyle('display', 'none'); - } - }.bind(this)); - - // Get the total height of all the column's children - column.getChildren().each(function(el){ - - if (el.hasClass('panel')){ - var currentInstance = instances.get(el.id); - - // Are any next siblings Expanded? - areAnyNextSiblingsExpanded = function(el){ - var test; - el.getAllNext('.panel').each(function(sibling){ - var siblingInstance = instances.get(sibling.id); - if (siblingInstance.isCollapsed == false){ - test = true; - } - }.bind(this)); - return test; - }.bind(this); - - // If a next sibling is expanding, are any of the nexts siblings of the expanding sibling Expanded? - areAnyExpandingNextSiblingsExpanded = function(){ - var test; - changing.getAllNext('.panel').each(function(sibling){ - var siblingInstance = instances.get(sibling.id); - if (siblingInstance.isCollapsed == false){ - test = true; - } - }.bind(this)); - return test; - }.bind(this); - - // Resize panels that are not collapsed or "new" - if (action == 'new' ) { - if (currentInstance.isCollapsed != true && el != changing) { - panelsToResize.push(el); - } - - // Height of panels that can be resized - if (currentInstance.isCollapsed != true && el != changing) { - this.panelsHeight += el.offsetHeight.toInt(); - } - } - // Resize panels that are not collapsed. If a panel is collapsing - // resize any expanded panels below. If there are no expanded panels - // below it, resize the expanded panels above it. - else if (action == null || action == 'collapsing' ){ - if (currentInstance.isCollapsed != true && (el.getAllNext('.panel').contains(changing) != true || areAnyNextSiblingsExpanded(el) != true)){ - panelsToResize.push(el); - } - - // Height of panels that can be resized - if (currentInstance.isCollapsed != true && (el.getAllNext('.panel').contains(changing) != true || areAnyNextSiblingsExpanded(el) != true)){ - this.panelsHeight += el.offsetHeight.toInt(); - } - } - // Resize panels that are not collapsed and are not expanding. - // Resize any expanded panels below the expanding panel. If there are no expanded panels - // below it, resize the first expanded panel above it. - else if (action == 'expanding'){ - - if (currentInstance.isCollapsed != true && (el.getAllNext('.panel').contains(changing) != true || (areAnyExpandingNextSiblingsExpanded() != true && el.getNext('.expanded') == changing)) && el != changing){ - panelsToResize.push(el); - } - // Height of panels that can be resized - if (currentInstance.isCollapsed != true && (el.getAllNext('.panel').contains(changing) != true || (areAnyExpandingNextSiblingsExpanded() != true && el.getNext('.expanded') == changing)) && el != changing){ - this.panelsHeight += el.offsetHeight.toInt(); - } - } - - if (el.style.height){ - this.height += el.getStyle('height').toInt(); - } - } - else { - this.height += el.offsetHeight.toInt(); - } - }.bind(this)); - - // Get the remaining height - var remainingHeight = column.offsetHeight.toInt() - this.height; - - this.height = 0; - - // Get height of all the column's children - column.getChildren().each(function(el){ - this.height += el.offsetHeight.toInt(); - }.bind(this)); - - var remainingHeight = column.offsetHeight.toInt() - this.height; - - panelsToResize.each(function(panel){ - var ratio = this.panelsHeight / panel.offsetHeight.toInt(); - var newPanelHeight = panel.getStyle('height').toInt() + (remainingHeight / ratio); - if (newPanelHeight < 1){ - newPanelHeight = 0; - } - panel.setStyle('height', newPanelHeight); - }.bind(this)); - - // Make sure the remaining height is 0. If not add/subtract the - // remaining height to the tallest panel. This makes up for browser resizing, - // off ratios, and users trying to give panels too much height. - - // Get height of all the column's children - this.height = 0; - column.getChildren().each(function(el){ - this.height += el.offsetHeight.toInt(); - if (el.hasClass('panel') && el.getStyle('height').toInt() > tallestPanelHeight){ - tallestPanel = el; - tallestPanelHeight = el.getStyle('height').toInt(); - } - }.bind(this)); - - var remainingHeight = column.offsetHeight.toInt() - this.height; - - if ((remainingHeight > 0 || remainingHeight < 0) && tallestPanelHeight > 0){ - tallestPanel.setStyle('height', tallestPanel.getStyle('height').toInt() + remainingHeight ); - if (tallestPanel.getStyle('height') < 1){ - tallestPanel.setStyle('height', 0 ); - } - } - - $$('.columnHandle').each(function(handle){ - var handleHeight = parent.getStyle('height').toInt() - handle.getStyle('border-top').toInt() - handle.getStyle('border-bottom').toInt(); - if (Browser.Engine.trident4){ - handleHeight -= 1; - } - handle.setStyle('height', handleHeight); - }); - - panelsExpanded.each(function(panel){ - MochaUI.resizeChildren(panel); - }.bind(this)); - }, - // May rename this resizeIframeEl() - resizeChildren: function(panel){ - var instances = MochaUI.Panels.instances; - var currentInstance = instances.get(panel.id); - var contentWrapperEl = currentInstance.contentWrapperEl; - - if (currentInstance.iframeEl){ - currentInstance.iframeEl.setStyles({ - 'height': contentWrapperEl.getStyle('height'), - 'width': contentWrapperEl.offsetWidth - contentWrapperEl.getStyle('border-left').toInt() - contentWrapperEl.getStyle('border-right').toInt() - }); - } - }, - // Remaining Width - rWidth: function(){ - $$('.rWidth').each(function(column){ - var currentWidth = column.offsetWidth.toInt(); - currentWidth -= column.getStyle('border-left').toInt(); - currentWidth -= column.getStyle('border-right').toInt(); - - var parent = column.getParent(); - this.width = 0; - - // Get the total width of all the parent element's children - parent.getChildren().each(function(el){ - if (el.hasClass('mocha') != true){ - this.width += el.offsetWidth.toInt(); - } - }.bind(this)); - - // Add the remaining width to the current element - var remainingWidth = parent.offsetWidth.toInt() - this.width; - var newWidth = currentWidth + remainingWidth; - if (newWidth < 1) newWidth = 0; - column.setStyle('width', newWidth); - column.getChildren('.panel').each(function(panel){ - panel.setStyle('width', newWidth - panel.getStyle('border-left').toInt() - panel.getStyle('border-right').toInt()); - MochaUI.resizeChildren(panel); - }.bind(this)); - }); - } - -}); - -function addResizeRight(element, min, max){ - if (!$(element)) return; - element = $(element); - - var instances = MochaUI.Columns.instances; - var currentInstance = instances.get(element.id); - - var handle = element.getNext('.columnHandle'); - handle.setStyle('cursor', 'e-resize'); - if (!min) min = 50; - if (!max) max = 250; - if (Browser.Engine.trident){ - handle.addEvents({ - 'mousedown': function(){ - handle.setCapture(); - }, - 'mouseup': function(){ - handle.releaseCapture(); - } - }); - } - currentInstance.resize = element.makeResizable({ - handle: handle, - modifiers: {x: 'width', y: false}, - limit: { x: [min, max] }, - onStart: function(){ - element.getElements('iframe').setStyle('visibility','hidden'); - element.getNext('.column').getElements('iframe').setStyle('visibility','hidden'); - }.bind(this), - onDrag: function(){ - MochaUI.rWidth(); - if (Browser.Engine.trident4){ - element.getChildren().each(function(el){ - var width = $(element).getStyle('width').toInt(); - width -= el.getStyle('border-right').toInt(); - width -= el.getStyle('border-left').toInt(); - width -= el.getStyle('padding-right').toInt(); - width -= el.getStyle('padding-left').toInt(); - el.setStyle('width', width); - }.bind(this)); - } - }.bind(this), - onComplete: function(){ - MochaUI.rWidth(); - element.getElements('iframe').setStyle('visibility','visible'); - element.getNext('.column').getElements('iframe').setStyle('visibility','visible'); - currentInstance.fireEvent('onResize'); - }.bind(this) - }); -} - -function addResizeLeft(element, min, max){ - if (!$(element)) return; - element = $(element); - - var instances = MochaUI.Columns.instances; - var currentInstance = instances.get(element.id); - - var handle = element.getPrevious('.columnHandle'); - handle.setStyle('cursor', 'e-resize'); - var partner = element.getPrevious('.column'); - if (!min) min = 50; - if (!max) max = 250; - if (Browser.Engine.trident){ - handle.addEvents({ - 'mousedown': function(){ - handle.setCapture(); - }, - 'mouseup': function(){ - handle.releaseCapture(); - } - }); - } - currentInstance.resize = element.makeResizable({ - handle: handle, - modifiers: {x: 'width' , y: false}, - invert: true, - limit: { x: [min, max] }, - onStart: function(){ - $(element).getElements('iframe').setStyle('visibility','hidden'); - partner.getElements('iframe').setStyle('visibility','hidden'); - }.bind(this), - onDrag: function(){ - MochaUI.rWidth(); - }.bind(this), - onComplete: function(){ - MochaUI.rWidth(); - $(element).getElements('iframe').setStyle('visibility','visible'); - partner.getElements('iframe').setStyle('visibility','visible'); - currentInstance.fireEvent('onResize'); - }.bind(this) - }); -} - -function addResizeBottom(element){ - if (!$(element)) return; - var element = $(element); - - var instances = MochaUI.Panels.instances; - var currentInstance = instances.get(element.id); - var handle = currentInstance.handleEl; - handle.setStyle('cursor', 'n-resize'); - partner = currentInstance.partner; - min = 0; - max = function(){ - return element.getStyle('height').toInt() + partner.getStyle('height').toInt(); - }.bind(this); - - if (Browser.Engine.trident){ - handle.addEvents({ - 'mousedown': function(){ - handle.setCapture(); - }, - 'mouseup': function(){ - handle.releaseCapture(); - } - }); - } - currentInstance.resize = element.makeResizable({ - handle: handle, - modifiers: {x: false, y: 'height'}, - limit: { y: [min, max] }, - invert: false, - onBeforeStart: function(){ - partner = currentInstance.partner; - this.originalHeight = element.getStyle('height').toInt(); - this.partnerOriginalHeight = partner.getStyle('height').toInt(); - }.bind(this), - onStart: function(){ - if (currentInstance.iframeEl) { - currentInstance.iframeEl.setStyle('visibility', 'hidden'); - } - partner.getElements('iframe').setStyle('visibility','hidden'); - }.bind(this), - onDrag: function(){ - partnerHeight = partnerOriginalHeight + (this.originalHeight - element.getStyle('height').toInt()); - partner.setStyle('height', partnerHeight); - MochaUI.resizeChildren(element, element.getStyle('height').toInt()); - MochaUI.resizeChildren(partner, partnerHeight); - }.bind(this), - onComplete: function(){ - partnerHeight = partnerOriginalHeight + (this.originalHeight - element.getStyle('height').toInt()); - partner.setStyle('height', partnerHeight); - MochaUI.resizeChildren(element, element.getStyle('height').toInt()); - MochaUI.resizeChildren(partner, partnerHeight); - if (currentInstance.iframeEl) { - currentInstance.iframeEl.setStyle('visibility', 'visible'); - } - partner.getElements('iframe').setStyle('visibility','visible'); - currentInstance.fireEvent('onResize'); - }.bind(this) - }); -} -/* - -Script: Dock.js - Implements the dock/taskbar. Enables window minimize. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Requires: - Core.js, Window.js, Layout.js - -Todo: - - Make it so the dock requires no initial html markup. - -*/ - -MochaUI.options.extend({ - // Naming options: - // If you change the IDs of the Mocha Desktop containers in your HTML, you need to change them here as well. - dockWrapper: 'dockWrapper', - dock: 'dock' -}); - -// Used by Desktop.js before MochaUI.Dock is initialized. -window.addEvent('domready', function(){ - if ($('dockWrapper')) { - MochaUI.dockVisible = true; - } -}); - -MochaUI.extend({ - /* - - Function: minimizeAll - Minimize all windows that are minimizable. - - */ - minimizeAll: function() { - $$('div.mocha').each(function(windowEl){ - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - if (!currentInstance.isMinimized && currentInstance.options.minimizable == true){ - MochaUI.Dock.minimizeWindow(windowEl); - } - }.bind(this)); - } -}); - -MochaUI.Dock = new Class({ - Extends: MochaUI.Window, - - Implements: [Events, Options], - - options: { - useControls: true, // Toggles autohide and dock placement controls. - dockPosition: 'top', // Position the dock starts in, top or bottom. - // Style options - dockTabColor: [255, 255, 255], - trueButtonColor: [70, 245, 70], // Color for autohide on - enabledButtonColor: [125, 208, 250], - disabledButtonColor: [170, 170, 170] - }, - initialize: function(options){ - // Stops if MochaUI.Desktop is not implemented - if (!MochaUI.Desktop) return; - this.setOptions(options); - - this.dockWrapper = $(MochaUI.options.dockWrapper); - this.dock = $(MochaUI.options.dock); - this.autoHideEvent = null; - this.dockAutoHide = false; // True when dock autohide is set to on, false if set to off - - if (!this.dockWrapper) return; - - if (!this.options.useControls){ - if($('dockPlacement')){ - $('dockPlacement').setStyle('cursor', 'default'); - } - if($('dockAutoHide')){ - $('dockAutoHide').setStyle('cursor', 'default'); - } - } - - this.dockWrapper.setStyles({ - 'display': 'block', - 'position': 'absolute', - 'top': null, - 'bottom': MochaUI.Desktop.desktopFooter ? MochaUI.Desktop.desktopFooter.offsetHeight : 0, - 'left': 0 - }); - - if (this.options.useControls){ - this.initializeDockControls(); - } - - // Add check mark to menu if link exists in menu - if ($('dockLinkCheck')){ - this.sidebarCheck = new Element('div', { - 'class': 'check', - 'id': 'dock_check' - }).inject($('dockLinkCheck')); - } - - this.dockSortables = new Sortables('#dockSort', { - opacity: Browser.Engine.trident ? 1 : .5, - constrain: true, - clone: false, - revert: false - }); - - MochaUI.Desktop.setDesktopSize(); - }, - initializeDockControls: function(){ - - if (this.options.useControls){ - // Insert canvas - var canvas = new Element('canvas', { - 'id': 'dockCanvas', - 'width': '15', - 'height': '18' - }).inject(this.dock); - - // Dynamically initialize canvas using excanvas. This is only required by IE - if (Browser.Engine.trident && MochaUI.ieSupport == 'excanvas'){ - G_vmlCanvasManager.initElement(canvas); - } - } - - var dockPlacement = $('dockPlacement'); - var dockAutoHide = $('dockAutoHide'); - - // Position top or bottom selector - dockPlacement.setProperty('title','Position Dock Top'); - - // Attach event - dockPlacement.addEvent('click', function(){ - this.moveDock(); - }.bind(this)); - - // Auto Hide toggle switch - dockAutoHide.setProperty('title','Turn Auto Hide On'); - - // Attach event Auto Hide - dockAutoHide.addEvent('click', function(event){ - if ( this.dockWrapper.getProperty('dockPosition') == 'top' ) - return false; - - var ctx = $('dockCanvas').getContext('2d'); - this.dockAutoHide = !this.dockAutoHide; // Toggle - if (this.dockAutoHide){ - $('dockAutoHide').setProperty('title', 'Turn Auto Hide Off'); - //ctx.clearRect(0, 11, 100, 100); - MochaUI.circle(ctx, 5 , 14, 3, this.options.trueButtonColor, 1.0); - - // Define event - this.autoHideEvent = function(event) { - if (!this.dockAutoHide) - return; - if (!MochaUI.Desktop.desktopFooter) { - var dockHotspotHeight = this.dockWrapper.offsetHeight; - if (dockHotspotHeight < 25) dockHotspotHeight = 25; - } - else if (MochaUI.Desktop.desktopFooter) { - var dockHotspotHeight = this.dockWrapper.offsetHeight + MochaUI.Desktop.desktopFooter.offsetHeight; - if (dockHotspotHeight < 25) dockHotspotHeight = 25; - } - if (!MochaUI.Desktop.desktopFooter && event.client.y > (document.getCoordinates().height - dockHotspotHeight)){ - if (!MochaUI.dockVisible){ - this.dockWrapper.setStyle('display', 'block'); - MochaUI.dockVisible = true; - MochaUI.Desktop.setDesktopSize(); - } - } - else if (MochaUI.Desktop.desktopFooter && event.client.y > (document.getCoordinates().height - dockHotspotHeight)){ - if (!MochaUI.dockVisible){ - this.dockWrapper.setStyle('display', 'block'); - MochaUI.dockVisible = true; - MochaUI.Desktop.setDesktopSize(); - } - } - else if (MochaUI.dockVisible){ - this.dockWrapper.setStyle('display', 'none'); - MochaUI.dockVisible = false; - MochaUI.Desktop.setDesktopSize(); - - } - }.bind(this); - - // Add event - document.addEvent('mousemove', this.autoHideEvent); - - } else { - $('dockAutoHide').setProperty('title', 'Turn Auto Hide On'); - //ctx.clearRect(0, 11, 100, 100); - MochaUI.circle(ctx, 5 , 14, 3, this.options.enabledButtonColor, 1.0); - // Remove event - document.removeEvent('mousemove', this.autoHideEvent); - } - - }.bind(this)); - - // Draw dock controls - var ctx = $('dockCanvas').getContext('2d'); - ctx.clearRect(0, 0, 100, 100); - MochaUI.circle(ctx, 5 , 4, 3, this.options.enabledButtonColor, 1.0); - MochaUI.circle(ctx, 5 , 14, 3, this.options.enabledButtonColor, 1.0); - - if (this.options.dockPosition == 'top'){ - this.moveDock(); - } - - }, - moveDock: function(){ - var ctx = $('dockCanvas').getContext('2d'); - // Move dock to top position - if (this.dockWrapper.getStyle('position') != 'relative'){ - this.dockWrapper.setStyles({ - 'position': 'relative', - 'bottom': null - }); - this.dockWrapper.addClass('top'); - MochaUI.Desktop.setDesktopSize(); - this.dockWrapper.setProperty('dockPosition','top'); - ctx.clearRect(0, 0, 100, 100); - MochaUI.circle(ctx, 5, 4, 3, this.options.enabledButtonColor, 1.0); - MochaUI.circle(ctx, 5, 14, 3, this.options.disabledButtonColor, 1.0); - $('dockPlacement').setProperty('title', 'Position Dock Bottom'); - $('dockAutoHide').setProperty('title', 'Auto Hide Disabled in Top Dock Position'); - this.dockAutoHide = false; - } - // Move dock to bottom position - else { - this.dockWrapper.setStyles({ - 'position': 'absolute', - 'bottom': MochaUI.Desktop.desktopFooter ? MochaUI.Desktop.desktopFooter.offsetHeight : 0 - }); - this.dockWrapper.removeClass('top'); - MochaUI.Desktop.setDesktopSize(); - this.dockWrapper.setProperty('dockPosition', 'bottom'); - ctx.clearRect(0, 0, 100, 100); - MochaUI.circle(ctx, 5, 4, 3, this.options.enabledButtonColor, 1.0); - MochaUI.circle(ctx, 5 , 14, 3, this.options.enabledButtonColor, 1.0); - $('dockPlacement').setProperty('title', 'Position Dock Top'); - $('dockAutoHide').setProperty('title', 'Turn Auto Hide On'); - } - }, - createDockTab: function(windowEl){ - - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - - var dockTab = new Element('div', { - 'id': currentInstance.options.id + '_dockTab', - 'class': 'dockTab', - 'title': titleText - }).inject($('dockClear'), 'before'); - - dockTab.addEvent('mousedown', function(e){ - new Event(e).stop(); - this.timeDown = $time(); - }); - - dockTab.addEvent('mouseup', function(e){ - this.timeUp = $time(); - if ((this.timeUp - this.timeDown) < 275){ - // If the visibility of the windows on the page are toggled off, toggle visibility on. - if (MochaUI.Windows.windowsVisible == false) { - MochaUI.toggleWindowVisibility(); - if (currentInstance.isMinimized == true) { - MochaUI.Dock.restoreMinimized.delay(25, MochaUI.Dock, windowEl); - } - else { - MochaUI.focusWindow(windowEl); - } - return; - } - // If window is minimized, restore window. - if (currentInstance.isMinimized == true) { - MochaUI.Dock.restoreMinimized.delay(25, MochaUI.Dock, windowEl); - } - else{ - // If window is not minimized and is focused, minimize window. - if (currentInstance.windowEl.hasClass('isFocused') && currentInstance.options.minimizable == true){ - MochaUI.Dock.minimizeWindow(windowEl) - } - // If window is not minimized and is not focused, focus window. - else{ - MochaUI.focusWindow(windowEl); - } - // if the window is not minimized and is outside the viewport, center it in the viewport. - var coordinates = document.getCoordinates(); - if (windowEl.getStyle('left').toInt() > coordinates.width || windowEl.getStyle('top').toInt() > coordinates.height){ - MochaUI.centerWindow(windowEl); - } - } - } - }); - - this.dockSortables.addItems(dockTab); - - var titleText = currentInstance.titleEl.innerHTML; - - var dockTabText = new Element('div', { - 'id': currentInstance.options.id + '_dockTabText', - 'class': 'dockText' - }).set('html', titleText.substring(0,20) + (titleText.length > 20 ? '...' : '')).inject($(dockTab)); - - // If I implement this again, will need to also adjust the titleText truncate and the tab's - // left padding. - if (currentInstance.options.icon != false){ - // dockTabText.setStyle('background', 'url(' + currentInstance.options.icon + ') 4px 4px no-repeat'); - } - - // Need to resize everything in case the dock wraps when a new tab is added - MochaUI.Desktop.setDesktopSize(); - - }, - makeActiveTab: function(){ - - // getWindowWith HighestZindex is used in case the currently focused window - // is closed. - var windowEl = MochaUI.getWindowWithHighestZindex(); - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - - $$('div.dockTab').removeClass('activeDockTab'); - if (currentInstance.isMinimized != true) { - - currentInstance.windowEl.addClass('isFocused'); - - var currentButton = $(currentInstance.options.id + '_dockTab'); - if (currentButton != null) { - currentButton.addClass('activeDockTab'); - } - } - else { - currentInstance.windowEl.removeClass('isFocused'); - } - }, - minimizeWindow: function(windowEl){ - if (windowEl != $(windowEl)) return; - - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - currentInstance.isMinimized = true; - - // Hide iframe - // Iframe should be hidden when minimizing, maximizing, and moving for performance and Flash issues - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'hidden'); - } - - // Hide window and add to dock - currentInstance.contentBorderEl.setStyle('visibility', 'hidden'); - if(currentInstance.toolbarWrapperEl){ - currentInstance.toolbarWrapperEl.setStyle('visibility', 'hidden'); - } - windowEl.setStyle('visibility', 'hidden'); - - // Fixes a scrollbar issue in Mac FF2 - if (Browser.Platform.mac && Browser.Engine.gecko){ - if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { - var ffversion = new Number(RegExp.$1); - if (ffversion < 3) { - currentInstance.contentWrapperEl.setStyle('overflow', 'hidden'); - } - } - } - - MochaUI.Desktop.setDesktopSize(); - - // Have to use timeout because window gets focused when you click on the minimize button - setTimeout(function(){ - windowEl.setStyle('zIndex', 1); - windowEl.removeClass('isFocused'); - this.makeActiveTab(); - }.bind(this),100); - - currentInstance.fireEvent('onMinimize', windowEl); - }, - restoreMinimized: function(windowEl) { - - var currentInstance = MochaUI.Windows.instances.get(windowEl.id); - - if (currentInstance.isMinimized == false) return; - - if (MochaUI.Windows.windowsVisible == false){ - MochaUI.toggleWindowVisibility(); - } - - MochaUI.Desktop.setDesktopSize(); - - // Part of Mac FF2 scrollbar fix - if (currentInstance.options.scrollbars == true && !currentInstance.iframeEl){ - currentInstance.contentWrapperEl.setStyle('overflow', 'auto'); - } - - if (currentInstance.isCollapsed) { - MochaUI.collapseToggle(windowEl); - } - - windowEl.setStyle('visibility', 'visible'); - currentInstance.contentBorderEl.setStyle('visibility', 'visible'); - if(currentInstance.toolbarWrapperEl){ - currentInstance.toolbarWrapperEl.setStyle('visibility', 'visible'); - } - - // Show iframe - if ( currentInstance.iframeEl ) { - currentInstance.iframeEl.setStyle('visibility', 'visible'); - } - - currentInstance.isMinimized = false; - MochaUI.focusWindow(windowEl); - currentInstance.fireEvent('onRestore', windowEl); - - } -}); -MochaUI.Dock.implement(new Options, new Events); -/* - -Script: Workspaces.js - Save and load workspaces. The Workspaces emulate Adobe Illustrator functionality remembering what windows are open and where they are positioned. There will be two versions, a limited version that saves state to a cookie, and a fully functional version that saves state to a database. - -Copyright: - Copyright (c) 2007-2008 Greg Houston, . - -License: - MIT-style license. - -Requires: - Core.js, Window.js - -To do: - - Move to Window - -*/ - -MochaUI.extend({ - /* - - Function: saveWorkspace - Save the current workspace. - - Syntax: - (start code) - MochaUI.saveWorkspace(); - (end) - - Notes: - This is experimental. This version saves the ID of each open window to a cookie, and reloads those windows using the functions in mocha-init.js. This requires that each window have a function in mocha-init.js used to open them. Functions must be named the windowID + "Window". So if your window is called mywindow, it needs a function called mywindowWindow in mocha-init.js. - - */ - saveWorkspace: function(){ - this.cookie = new Hash.Cookie('mochaUIworkspaceCookie', {duration: 3600}); - this.cookie.empty(); - MochaUI.Windows.instances.each(function(instance) { - instance.saveValues(); - this.cookie.set(instance.options.id, { - 'id': instance.options.id, - 'top': instance.options.y, - 'left': instance.options.x - }); - }.bind(this)); - this.cookie.save(); - - new MochaUI.Window({ - loadMethod: 'html', - type: 'notification', - addClass: 'notification', - content: 'Workspace saved.', - closeAfter: '1400', - width: 200, - height: 40, - y: 53, - padding: { top: 10, right: 12, bottom: 10, left: 12 }, - shadowBlur: 5, - bodyBgColor: [255, 255, 255] - }); - - }, - windowUnload: function(){ - if ($$('div.mocha').length == 0 && this.myChain){ - this.myChain.callChain(); - } - }, - loadWorkspace2: function(workspaceWindows){ - workspaceWindows.each(function(instance){ - windowFunction = eval('MochaUI.' + instance.id + 'Window'); - if (windowFunction){ - eval('MochaUI.' + instance.id + 'Window();'); - $(instance.id).setStyles({ - top: instance.top, - left: instance.left - }); - } - }.bind(this)); - this.loadingWorkspace = false; - }, - /* - - Function: loadWorkspace - Load the saved workspace. - - Syntax: - (start code) - MochaUI.loadWorkspace(); - (end) - - */ - loadWorkspace: function(){ - cookie = new Hash.Cookie('mochaUIworkspaceCookie', {duration: 3600}); - workspaceWindows = cookie.load(); - - if(!cookie.getKeys().length){ - new MochaUI.Window({ - loadMethod: 'html', - type: 'notification', - addClass: 'notification', - content: 'You have no saved workspace.', - closeAfter: '1400', - width: 220, - height: 40, - y: 25, - padding: { top: 10, right: 12, bottom: 10, left: 12 }, - shadowBlur: 5, - bodyBgColor: [255, 255, 255] - }); - return; - } - - if ($$('div.mocha').length != 0){ - this.loadingWorkspace = true; - this.myChain = new Chain(); - this.myChain.chain( - function(){ - $$('div.mocha').each(function(el) { - this.closeWindow(el); - }.bind(this)); - }.bind(this), - function(){ - this.loadWorkspace2(workspaceWindows); - }.bind(this) - ); - this.myChain.callChain(); - } - else { - this.loadWorkspace2(workspaceWindows); - } - - } -}); +/* + +Script: Core.js + MUI - A Web Applications User Interface Framework. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Contributors: + - Scott F. Frederick + - Joel Lindau + +Note: + This documentation is taken directly from the javascript source files. It is built using Natural Docs. + +*/ + +var MUI = MochaUI = new Hash({ + + version: '0.9.6 development', + + options: new Hash({ + theme: 'default', + advancedEffects: false, // Effects that require fast browsers and are cpu intensive. + standardEffects: true // Basic effects that tend to run smoothly. + }), + + path: { + source: 'scripts/source/', // Path to MochaUI source JavaScript + themes: 'themes/', // Path to MochaUI Themes + plugins: 'plugins/' // Path to Plugins + }, + + // Returns the path to the current theme directory + themePath: function(){ + return MUI.path.themes + MUI.options.theme + '/'; + }, + + files: new Hash() + +}); + +MUI.files[MUI.path.source + 'Core/Core.js'] = 'loaded'; + +MUI.extend({ + + Windows: { + instances: new Hash() + }, + + ieSupport: 'excanvas', // Makes it easier to switch between Excanvas and Moocanvas for testing + + /* + + Function: updateContent + Replace the content of a window or panel. + + Arguments: + updateOptions - (object) + + updateOptions: + element - The parent window or panel. + childElement - The child element of the window or panel recieving the content. + method - ('get', or 'post') The way data is transmitted. + data - (hash) Data to be transmitted + title - (string) Change this if you want to change the title of the window or panel. + content - (string or element) An html loadMethod option. + loadMethod - ('html', 'xhr', or 'iframe') + url - Used if loadMethod is set to 'xhr' or 'iframe'. + scrollbars - (boolean) + padding - (object) + onContentLoaded - (function) + + */ + updateContent: function(options){ + + var options = $extend({ + element: null, + childElement: null, + method: null, + data: null, + title: null, + content: null, + loadMethod: null, + url: null, + scrollbars: null, + padding: null, + require: {}, + onContentLoaded: $empty + }, options); + + options.require = $extend({ + css: [], images: [], js: [], onload: null + }, options.require); + + var args = {}; + + if (!options.element) return; + var element = options.element; + + if (MUI.Windows.instances.get(element.id)){ + args.recipient = 'window'; + } + else { + args.recipient = 'panel'; + } + + var instance = element.retrieve('instance'); + if (options.title) instance.titleEl.set('html', options.title); + + var contentEl = instance.contentEl; + args.contentContainer = options.childElement != null ? options.childElement : instance.contentEl; + var contentWrapperEl = instance.contentWrapperEl; + + if (!options.loadMethod){ + if (!instance.options.loadMethod){ + if (!options.url){ + options.loadMethod = 'html'; + } + else { + options.loadMethod = 'xhr'; + } + } + else { + options.loadMethod = instance.options.loadMethod; + } + } + + // Set scrollbars if loading content in main content container. + // Always use 'hidden' for iframe windows + var scrollbars = options.scrollbars || instance.options.scrollbars; + if (args.contentContainer == instance.contentEl) { + contentWrapperEl.setStyles({ + 'overflow': scrollbars != false && options.loadMethod != 'iframe' ? 'auto' : 'hidden' + }); + } + + if (options.padding != null) { + contentEl.setStyles({ + 'padding-top': options.padding.top, + 'padding-bottom': options.padding.bottom, + 'padding-left': options.padding.left, + 'padding-right': options.padding.right + }); + } + + // Remove old content. + if (args.contentContainer == contentEl) { + contentEl.empty().show(); + // Panels are not loaded into the padding div, so we remove them separately. + contentEl.getAllNext('.column').destroy(); + contentEl.getAllNext('.columnHandle').destroy(); + } + + args.onContentLoaded = function(){ + + if (options.require.js.length || typeof options.require.onload == 'function'){ + new MUI.Require({ + js: options.require.js, + onload: function(){ + if (Browser.Engine.presto){ + options.require.onload.delay(100); + } + else { + options.require.onload(); + } + options.onContentLoaded ? options.onContentLoaded() : instance.fireEvent('onContentLoaded', element); + }.bind(this) + }); + } + else { + options.onContentLoaded ? options.onContentLoaded() : instance.fireEvent('onContentLoaded', element); + } + + }; + + if (options.require.css.length || options.require.images.length){ + new MUI.Require({ + css: options.require.css, + images: options.require.images, + onload: function(){ + this.loadSelect(instance, options, args); + }.bind(this) + }); + } + else { + this.loadSelect(instance, options, args); + } + }, + + loadSelect: function(instance, options, args){ + + // Load new content. + switch(options.loadMethod){ + case 'xhr': + this.updateContentXHR(instance, options, args); + break; + case 'iframe': + this.updateContentIframe(instance, options, args); + break; + case 'html': + default: + this.updateContentHTML(instance, options, args); + break; + } + + }, + + updateContentXHR: function(instance, options, args){ + var contentEl = instance.contentEl; + var contentContainer = args.contentContainer; + var onContentLoaded = args.onContentLoaded; + new Request.HTML({ + url: options.url, + update: contentContainer, + method: options.method != null ? options.method : 'get', + data: options.data != null ? new Hash(options.data).toQueryString() : '', + evalScripts: instance.options.evalScripts, + evalResponse: instance.options.evalResponse, + onRequest: function(){ + if (args.recipient == 'window' && contentContainer == contentEl){ + instance.showSpinner(); + } + else if (args.recipient == 'panel' && contentContainer == contentEl && $('spinner')){ + $('spinner').show(); + } + }.bind(this), + onFailure: function(response){ + if (contentContainer == contentEl){ + var getTitle = new RegExp("[\n\r\s]*(.*)[\n\r\s]*", "gmi"); + var error = getTitle.exec(response.responseText); + if (!error) error = 'Unknown'; + contentContainer.set('html', '

    Error: ' + error[1] + '

    '); + if (args.recipient == 'window'){ + instance.hideSpinner(); + } + else if (args.recipient == 'panel' && $('spinner')){ + $('spinner').hide(); + } + } + }.bind(this), + onSuccess: function(){ + if (contentContainer == contentEl){ + if (args.recipient == 'window') instance.hideSpinner(); + else if (args.recipient == 'panel' && $('spinner')) $('spinner').hide(); + } + Browser.Engine.trident4 ? onContentLoaded.delay(750) : onContentLoaded(); + }.bind(this), + onComplete: function(){}.bind(this) + }).send(); + }, + + updateContentIframe: function(instance, options, args){ + var contentEl = instance.contentEl; + var contentContainer = args.contentContainer; + var contentWrapperEl = instance.contentWrapperEl; + var onContentLoaded = args.onContentLoaded; + if ( instance.options.contentURL == '' || contentContainer != contentEl) { + return; + } + instance.iframeEl = new Element('iframe', { + 'id': instance.options.id + '_iframe', + 'name': instance.options.id + '_iframe', + 'class': 'mochaIframe', + 'src': options.url, + 'marginwidth': 0, + 'marginheight': 0, + 'frameBorder': 0, + 'scrolling': 'auto', + 'styles': { + 'height': contentWrapperEl.offsetHeight - contentWrapperEl.getStyle('border-top').toInt() - contentWrapperEl.getStyle('border-bottom').toInt(), + 'width': instance.panelEl ? contentWrapperEl.offsetWidth - contentWrapperEl.getStyle('border-left').toInt() - contentWrapperEl.getStyle('border-right').toInt() : '100%' + } + }).injectInside(contentEl); + + // Add onload event to iframe so we can hide the spinner and run onContentLoaded() + instance.iframeEl.addEvent('load', function(e) { + if (args.recipient == 'window') instance.hideSpinner(); + else if (args.recipient == 'panel' && contentContainer == contentEl && $('spinner')) $('spinner').hide(); + Browser.Engine.trident4 ? onContentLoaded.delay(50) : onContentLoaded(); + }.bind(this)); + if (args.recipient == 'window') instance.showSpinner(); + else if (args.recipient == 'panel' && contentContainer == contentEl && $('spinner')) $('spinner').show(); + }, + + updateContentHTML: function(instance, options, args){ + var contentEl = instance.contentEl; + var contentContainer = args.contentContainer; + var onContentLoaded = args.onContentLoaded; + var elementTypes = new Array('element', 'textnode', 'whitespace', 'collection'); + + if (elementTypes.contains($type(options.content))){ + options.content.inject(contentContainer); + } else { + contentContainer.set('html', options.content); + } + if (contentContainer == contentEl){ + if (args.recipient == 'window') instance.hideSpinner(); + else if (args.recipient == 'panel' && $('spinner')) $('spinner').hide(); + } + Browser.Engine.trident4 ? onContentLoaded.delay(50) : onContentLoaded(); + }, + + /* + + Function: reloadIframe + Reload an iframe. Fixes an issue in Firefox when trying to use location.reload on an iframe that has been destroyed and recreated. + + Arguments: + iframe - This should be both the name and the id of the iframe. + + Syntax: + (start code) + MUI.reloadIframe(element); + (end) + + Example: + To reload an iframe from within another iframe: + (start code) + parent.MUI.reloadIframe('myIframeName'); + (end) + + */ + reloadIframe: function(iframe){ + Browser.Engine.gecko ? $(iframe).src = $(iframe).src : top.frames[iframe].location.reload(true); + }, + + roundedRect: function(ctx, x, y, width, height, radius, rgb, a){ + ctx.fillStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.quadraticCurveTo(x, y + height, x + radius, y + height); + ctx.lineTo(x + width - radius, y + height); + ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); + ctx.lineTo(x + width, y + radius); + ctx.quadraticCurveTo(x + width, y, x + width - radius, y); + ctx.lineTo(x + radius, y); + ctx.quadraticCurveTo(x, y, x, y + radius); + ctx.fill(); + }, + + triangle: function(ctx, x, y, width, height, rgb, a){ + ctx.beginPath(); + ctx.moveTo(x + width, y); + ctx.lineTo(x, y + height); + ctx.lineTo(x + width, y + height); + ctx.closePath(); + ctx.fillStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; + ctx.fill(); + }, + + circle: function(ctx, x, y, diameter, rgb, a){ + ctx.beginPath(); + ctx.arc(x, y, diameter, 0, Math.PI*2, true); + ctx.fillStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; + ctx.fill(); + }, + + notification: function(message){ + new MUI.Window({ + loadMethod: 'html', + closeAfter: 1500, + type: 'notification', + addClass: 'notification', + content: message, + width: 220, + height: 40, + y: 53, + padding: { top: 10, right: 12, bottom: 10, left: 12 }, + shadowBlur: 5 + }); + }, + + /* + + Function: toggleEffects + Turn effects on and off + + */ + toggleAdvancedEffects: function(link){ + if (MUI.options.advancedEffects == false) { + MUI.options.advancedEffects = true; + if (link){ + this.toggleAdvancedEffectsLink = new Element('div', { + 'class': 'check', + 'id': 'toggleAdvancedEffects_check' + }).inject(link); + } + } + else { + MUI.options.advancedEffects = false; + if (this.toggleAdvancedEffectsLink) { + this.toggleAdvancedEffectsLink.destroy(); + } + } + }, + /* + + Function: toggleStandardEffects + Turn standard effects on and off + + */ + toggleStandardEffects: function(link){ + if (MUI.options.standardEffects == false) { + MUI.options.standardEffects = true; + if (link){ + this.toggleStandardEffectsLink = new Element('div', { + 'class': 'check', + 'id': 'toggleStandardEffects_check' + }).inject(link); + } + } + else { + MUI.options.standardEffects = false; + if (this.toggleStandardEffectsLink) { + this.toggleStandardEffectsLink.destroy(); + } + } + }, + + /* + + The underlay is inserted directly under windows when they are being dragged or resized + so that the cursor is not captured by iframes or other plugins (such as Flash) + underneath the window. + + */ + underlayInitialize: function(){ + var windowUnderlay = new Element('div', { + 'id': 'windowUnderlay', + 'styles': { + 'height': parent.getCoordinates().height, + 'opacity': .01, + 'display': 'none' + } + }).inject(document.body); + }, + setUnderlaySize: function(){ + $('windowUnderlay').setStyle('height', parent.getCoordinates().height); + } +}); + +/* + +function: fixPNG + Bob Osola's PngFix for IE6. + +example: + (begin code) + foo + (end) + +note: + You must have the image height and width attributes specified in the markup. + +*/ + +function fixPNG(myImage){ + if (Browser.Engine.trident4 && document.body.filters){ + var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""; + var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""; + var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "; + var imgStyle = "display:inline-block;" + myImage.style.cssText; + var strNewHTML = ""; + myImage.outerHTML = strNewHTML; + } +} + +// Blur all windows if user clicks anywhere else on the page +document.addEvent('mousedown', function(event){ + MUI.blurAll.delay(50); +}); + +window.addEvent('domready', function(){ + MUI.underlayInitialize(); +}); + +window.addEvent('resize', function(){ + if ($('windowUnderlay')) { + MUI.setUnderlaySize(); + } + else { + MUI.underlayInitialize(); + } +}); + +Element.implement({ + hide: function(){ + this.setStyle('display', 'none'); + return this; + }, + show: function(){ + this.setStyle('display', 'block'); + return this; + } +}); + +/* + +Shake effect by Uvumi Tools +http://tools.uvumi.com/element-shake.html + +Function: shake + +Example: + Shake a window. + (start code) + $('parametrics').shake() + (end) + +*/ + +Element.implement({ + shake: function(radius,duration){ + radius = radius || 3; + duration = duration || 500; + duration = (duration/50).toInt() - 1; + var parent = this.getParent(); + if(parent != $(document.body) && parent.getStyle('position') == 'static'){ + parent.setStyle('position','relative'); + } + var position = this.getStyle('position'); + if(position == 'static'){ + this.setStyle('position','relative'); + position = 'relative'; + } + if(Browser.Engine.trident){ + parent.setStyle('height',parent.getStyle('height')); + } + var coords = this.getPosition(parent); + if(position == 'relative' && !Browser.Engine.presto){ + coords.x -= parent.getStyle('paddingLeft').toInt(); + coords.y -= parent.getStyle('paddingTop').toInt(); + } + var morph = this.retrieve('morph'); + if (morph){ + morph.cancel(); + var oldOptions = morph.options; + } + var morph = this.get('morph',{ + duration:50, + link:'chain' + }); + for(var i=0 ; i < duration ; i++){ + morph.start({ + top:coords.y+$random(-radius,radius), + left:coords.x+$random(-radius,radius) + }); + } + morph.start({ + top:coords.y, + left:coords.x + }).chain(function(){ + if(oldOptions){ + this.set('morph',oldOptions); + } + }.bind(this)); + return this; + } +}); + +String.implement({ + + parseQueryString: function() { + var vars = this.split(/[&;]/); + var rs = {}; + if (vars.length) vars.each(function(val) { + var keys = val.split('='); + if (keys.length && keys.length == 2) rs[decodeURIComponent(keys[0])] = decodeURIComponent(keys[1]); + }); + return rs; + } + +}); + +// Mootools Patch: Fixes issues in Safari, Chrome, and Internet Explorer caused by processing text as XML. +Request.HTML.implement({ + + processHTML: function(text){ + var match = text.match(/]*>([\s\S]*?)<\/body>/i); + text = (match) ? match[1] : text; + var container = new Element('div'); + return container.set('html', text); + } + +}); + +/* + + Examples: + (start code) + getCSSRule('.myRule'); + getCSSRule('#myRule'); + (end) + +*/ +MUI.getCSSRule = function(selector) { + for (var ii = 0; ii < document.styleSheets.length; ii++) { + var mysheet = document.styleSheets[ii]; + var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; + for (i = 0; i < myrules.length; i++){ + if (myrules[i].selectorText == selector){ + return myrules[i]; + } + } + } + return false; +} + +// This makes it so Request will work to some degree locally +if (location.protocol == "file:"){ + + Request.implement({ + isSuccess : function(status){ + return (status == 0 || (status >= 200) && (status < 300)); + } + }); + + Browser.Request = function(){ + return $try(function(){ + return new ActiveXObject('MSXML2.XMLHTTP'); + }, function(){ + return new XMLHttpRequest(); + }); + }; + +} + +MUI.Require = new Class({ + + Implements: [Options], + + options: { + css: [], + images: [], + js: [], + onload: $empty + }, + + initialize: function(options){ + this.setOptions(options); + var options = this.options; + + this.assetsToLoad = options.css.length + options.images.length + options.js.length; + this.assetsLoaded = 0; + + var cssLoaded = 0; + + // Load CSS before images and JavaScript + + if (options.css.length){ + options.css.each( function(sheet){ + + this.getAsset(sheet, function(){ + if (cssLoaded == options.css.length - 1){ + + if (this.assetsLoaded == this.assetsToLoad - 1){ + this.requireOnload(); + } + else { + // Add a little delay since we are relying on cached CSS from XHR request. + this.assetsLoaded++; + this.requireContinue.delay(50, this); + } + } + else { + cssLoaded++; + this.assetsLoaded++; + } + }.bind(this)); + }.bind(this)); + } + else if (!options.js.length && !options.images.length){ + this.options.onload(); + return true; + } + else { + this.requireContinue.delay(50, this); // Delay is for Safari + } + + }, + + requireOnload: function(){ + this.assetsLoaded++; + if (this.assetsLoaded == this.assetsToLoad){ + this.options.onload(); + return true; + } + + }, + + requireContinue: function(){ + + var options = this.options; + if (options.images.length){ + options.images.each( function(image){ + this.getAsset(image, this.requireOnload.bind(this)); + }.bind(this)); + } + + if (options.js.length){ + options.js.each( function(script){ + this.getAsset(script, this.requireOnload.bind(this)); + }.bind(this)); + } + + }, + + getAsset: function(source, onload){ + + // If the asset is loaded, fire the onload function. + if ( MUI.files[source] == 'loaded' ){ + if (typeof onload == 'function'){ + onload(); + } + return true; + } + + // If the asset is loading, wait until it is loaded and then fire the onload function. + // If asset doesn't load by a number of tries, fire onload anyway. + else if ( MUI.files[source] == 'loading' ){ + var tries = 0; + var checker = (function(){ + tries++; + if (MUI.files[source] == 'loading' && tries < '100') return; + $clear(checker); + if (typeof onload == 'function'){ + onload(); + } + }).periodical(50); + } + + // If the asset is not yet loaded or loading, start loading the asset. + else { + MUI.files[source] = 'loading'; + + properties = { + 'onload': onload != 'undefined' ? onload : $empty + }; + + // Add to the onload function + var oldonload = properties.onload; + properties.onload = function() { + MUI.files[source] = 'loaded'; + if (oldonload) { + oldonload(); + } + }.bind(this); + + switch ( source.match(/\.\w+$/)[0] ) { + case '.js': return Asset.javascript(source, properties); + case '.css': return Asset.css(source, properties); + case '.jpg': + case '.png': + case '.gif': return Asset.image(source, properties); + } + + alert('The required file "' + source + '" could not be loaded'); + } + } + +}); + +$extend(Asset, { + + /* Fix an Opera bug in Mootools 1.2 */ + javascript: function(source, properties){ + properties = $extend({ + onload: $empty, + document: document, + check: $lambda(true) + }, properties); + + if ($(properties.id)) { + properties.onload(); + return $(properties.id); + } + + var script = new Element('script', {'src': source, 'type': 'text/javascript'}); + + var load = properties.onload.bind(script), check = properties.check, doc = properties.document; + delete properties.onload; delete properties.check; delete properties.document; + + if (!Browser.Engine.webkit419 && !Browser.Engine.presto){ + script.addEvents({ + load: load, + readystatechange: function(){ + if (Browser.Engine.trident && ['loaded', 'complete'].contains(this.readyState)) + load(); + } + }).setProperties(properties); + } + else { + var checker = (function(){ + if (!$try(check)) return; + $clear(checker); + // Opera has difficulty with multiple scripts being injected into the head simultaneously. We need to give it time to catch up. + Browser.Engine.presto ? load.delay(500) : load(); + }).periodical(50); + } + return script.inject(doc.head); + }, + + // Get the CSS with XHR before appending it to document.head so that we can have an onload callback. + css: function(source, properties){ + + properties = $extend({ + id: null, + media: 'screen', + onload: $empty + }, properties); + + new Request({ + method: 'get', + url: source, + onComplete: function(response) { + var newSheet = new Element('link', { + 'id': properties.id, + 'rel': 'stylesheet', + 'media': properties.media, + 'type': 'text/css', + 'href': source + }).inject(document.head); + properties.onload(); + }.bind(this), + onFailure: function(response){ + }, + onSuccess: function(){ + }.bind(this) + }).send(); + } + +}); + +/* + +REGISTER PLUGINS + + Register Components and Plugins for Lazy Loading + + How this works may take a moment to grasp. Take a look at MUI.Window below. + If we try to create a new Window and Window.js has not been loaded then the function + below will run. It will load the CSS required by the MUI.Window Class and then + then it will load Window.js. Here is the interesting part. When Window.js loads, + it will overwrite the function below, and new MUI.Window(arg) will be ran + again. This time it will create a new MUI.Window instance, and any future calls + to new MUI.Window(arg) will immediately create new windows since the assets + have already been loaded and our temporary function below has been overwritten. + + Example: + + MyPlugins.extend({ + + MyGadget: function(arg){ + new MUI.Require({ + css: [MUI.path.plugins + 'myGadget/css/style.css'], + images: [MUI.path.plugins + 'myGadget/images/background.gif'] + js: [MUI.path.plugins + 'myGadget/scripts/myGadget.js'], + onload: function(){ + new MyPlguins.MyGadget(arg); + } + }); + } + + }); + +-------------------------------------------------------------------- */ + +MUI.extend({ + + newWindowsFromJSON: function(arg){ + new MUI.Require({ + js: [MUI.path.source + 'Window/Windows-from-json.js'], + onload: function(){ + new MUI.newWindowsFromJSON(arg); + } + }); + }, + + arrangeCascade: function(){ + new MUI.Require({ + js: [MUI.path.source + 'Window/Arrange-cascade.js'], + onload: function(){ + new MUI.arrangeCascade(); + } + }); + }, + + arrangeTile: function(){ + new MUI.Require({ + js: [MUI.path.source + 'Window/Arrange-tile.js'], + onload: function(){ + new MUI.arrangeTile(); + } + }); + }, + + saveWorkspace: function(){ + new MUI.Require({ + js: [MUI.path.source + 'Layout/Workspaces.js'], + onload: function(){ + new MUI.saveWorkspace(); + } + }); + }, + + loadWorkspace: function(){ + new MUI.Require({ + js: [MUI.path.source + 'Layout/Workspaces.js'], + onload: function(){ + new MUI.loadWorkspace(); + } + }); + }, + + Themes: { + init: function(arg){ + new MUI.Require({ + js: [MUI.path.source + 'Utilities/Themes.js'], + onload: function(){ + MUI.Themes.init(arg); + } + }); + } + } + +}); +/* + +Script: Themes.js + Allows for switching themes dynamically. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js + +Notes: + Themes are new and experimental. + +Syntax: + (start code) + new MUI.Themes.init(newTheme); + (end) + +Example: + (start code) + new MUI.Themes.init('charcoal'); + (end) + +Arguments: + newTheme - (string) The theme name + +*/ + +MUI.files[MUI.path.source + 'Utilities/Themes.js'] = 1; + +MUI.Themes = { + + /* + + Function: themeInit + Initialize a theme. This is experimental and not fully implemented yet. + + */ + init: function(newTheme){ + this.newTheme = newTheme.toLowerCase(); + if (!this.newTheme || this.newTheme == null || this.newTheme == MUI.options.theme.toLowerCase()) return; + + if ($('spinner')) $('spinner').show(); + + this.oldURIs = []; + this.oldSheets = []; + + $$('link').each( function(link){ + var href = link.get('href'); + if (href.contains(MUI.path.themes + MUI.options.theme)){ + this.oldURIs.push(href); + this.oldSheets.push(link); + } + }.bind(this)); + + /* + MUI.files.each( function(value, key, hash){ + if (key.contains(MUI.path.themes + MUI.options.theme)){ + this.oldURIs.push(key); + } + }.bind(this)); + */ + + this.newSheetURLs = this.oldURIs.map(function(item, index){ + return item.replace("/" + MUI.options.theme + "/", "/" + MUI.Themes.newTheme + "/"); + }.bind(this)); + + this.sheetsToLoad = this.oldURIs.length; + this.sheetsLoaded = 0; + + // Download new stylesheets and add them to an array + this.newSheets = []; + this.newSheetURLs.each( function(link){ + var href = link; + + //var id = link.id; + + var cssRequest = new Request({ + method: 'get', + url: href, + onComplete: function(response) { + var newSheet = new Element('link', { + //'id': id, + 'rel': 'stylesheet', + 'media': 'screen', + 'type': 'text/css', + 'href': href + }); + this.newSheets.push(newSheet); + }.bind(this), + onFailure: function(response){ + this.themeLoadSuccess = false; + if ($('spinner')) $('spinner').hide(); + MUI.notification('Stylesheets did not load.'); + }, + onSuccess: function(){ + this.sheetsLoaded++; + if (this.sheetsLoaded == this.sheetsToLoad) { + this.updateThemeStylesheets(); + this.themeLoadSuccess = true; + } + }.bind(this) + }); + cssRequest.send(); + + }.bind(this)); + + }, + updateThemeStylesheets: function(){ + + this.oldSheets.each( function(sheet){ + sheet.destroy(); + }); + + this.newSheets.each( function(sheet){ + MUI.files[sheet.get('href')] = 1; + sheet.inject(document.head); + }); + + // Delay gives the stylesheets time to take effect. IE6 needs more delay. + if (Browser.Engine.trident){ + this.redraw.delay(1250, this); + } + else { + this.redraw.delay(250, this); + } + + }, + redraw: function(){ + + $$('.replaced').removeClass('replaced'); + + // Redraw open windows + $$('.mocha').each( function(element){ + var instance = element.retrieve('instance'); + + // Convert CSS colors to Canvas colors. + instance.setColors(); + instance.drawWindow(); + }); + + if (MUI.Dock){ + if (MUI.Dock.options.useControls){ + MUI.Dock.setDockColors(); + MUI.Dock.renderDockControls(); + } + } + + // Reformat layout + if (MUI.Desktop.desktop){ + var checker = (function(){ + // Make sure the style sheets are really ready. + if (MUI.Desktop.desktop.getStyle('overflow') != 'hidden'){ + return; + } + $clear(checker); + MUI.Desktop.setDesktopSize(); + }).periodical(50); + } + + if ($('spinner')) $('spinner').hide(); + MUI.options.theme = this.newTheme; + + /* + this.cookie = new Hash.Cookie('mochaUIthemeCookie', {duration: 3600}); + this.cookie.empty(); + this.cookie.set('theme', MUI.options.theme); + this.cookie.save(); + */ + + } +}; + +window.addEvent('load', function(){ + /* + // Load theme the user was last using. This needs work. + var cookie = new Hash.Cookie('mochaUIthemeCookie', {duration: 3600}); + var themeCookie = cookie.load(); + if(cookie.getKeys().length){ + if (themeCookie.get('theme') != MUI.Themes.options.theme){ + MUI.Themes.init.delay(1000, MUI.Themes, themeCookie.get('theme')); + } + } + */ + + if ($('themeControl')){ + $('themeControl').getElements('option').setProperty('selected', 'false'); + if ($('chooseTheme')){ + $('chooseTheme').setProperty('selected', 'true'); + } + } +}); +/* + +Script: Window.js + Build windows. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js + +*/ + +MUI.files[MUI.path.source + 'Window/Window.js'] = 'loading'; +//$require(MUI.themePath() + '/css/Dock.css'); + +/* +Class: Window + Creates a single MochaUI window. + +Syntax: + (start code) + new MUI.Window(options); + (end) + +Arguments: + options + +Options: + id - The ID of the window. If not defined, it will be set to 'win' + windowIDCount. + title - The title of the window. + icon - Place an icon in the window's titlebar. This is either set to false or to the url of the icon. It is set up for icons that are 16 x 16px. + type - ('window', 'modal', 'modal2', or 'notification') Defaults to 'window'. Modals should be created with new MUI.Modal(options). + loadMethod - ('html', 'xhr', or 'iframe') Defaults to 'html' if there is no contentURL. Defaults to 'xhr' if there is a contentURL. You only really need to set this if using the 'iframe' method. + contentURL - Used if loadMethod is set to 'xhr' or 'iframe'. + closeAfter - Either false or time in milliseconds. Closes the window after a certain period of time in milliseconds. This is particularly useful for notifications. + evalScripts - (boolean) An xhr loadMethod option. Defaults to true. + evalResponse - (boolean) An xhr loadMethod option. Defaults to false. + content - (string or element) An html loadMethod option. + toolbar - (boolean) Create window toolbar. Defaults to false. This can be used for tabs, media controls, and so forth. + toolbarPosition - ('top' or 'bottom') Defaults to top. + toolbarHeight - (number) + toolbarURL - (url) Defaults to 'pages/lipsum.html'. + toolbarContent - (string) + toolbarOnload - (function) + toolbar2 - (boolean) Create window toolbar. Defaults to false. This can be used for tabs, media controls, and so forth. + toolbar2Position - ('top' or 'bottom') Defaults to top. + toolbar2Height - (number) + toolbar2URL - (url) Defaults to 'pages/lipsum.html'. + toolbar2Content - (string) + toolbar2Onload - (function) + container - (element ID) Element the window is injected in. The container defaults to 'desktop'. If no desktop then to document.body. Use 'pageWrapper' if you don't want the windows to overlap the toolbars. + restrict - (boolean) Restrict window to container when dragging. + shape - ('box' or 'gauge') Shape of window. Defaults to 'box'. + collapsible - (boolean) Defaults to true. + minimizable - (boolean) Requires MUI.Desktop and MUI.Dock. Defaults to true if dependenices are met. + maximizable - (boolean) Requires MUI.Desktop. Defaults to true if dependenices are met. + closable - (boolean) Defaults to true. + storeOnClose - (boolean) Hides a window and it's dock tab rather than destroying them on close. If you try to create the window again it will unhide the window and dock tab. + modalOverlayClose - (boolean) Whether or not you can close a modal by clicking on the modal overlay. Defaults to true. + draggable - (boolean) Defaults to false for modals; otherwise true. + draggableGrid - (false or number) Distance in pixels for snap-to-grid dragging. Defaults to false. + draggableLimit - (false or number) An object with x and y properties used to limit the movement of the Window. Defaults to false. + draggableSnap - (boolean) The distance to drag before the Window starts to respond to the drag. Defaults to false. + resizable - (boolean) Defaults to false for modals, notifications and gauges; otherwise true. + resizeLimit - (object) Minimum and maximum width and height of window when resized. + addClass - (string) Add a class to the window for more control over styling. + width - (number) Width of content area. + height - (number) Height of content area. + headerHeight - (number) Height of window titlebar. + footerHeight - (number) Height of window footer. + cornerRadius - (number) + x - (number) If x and y are left undefined the window is centered on the page. + y - (number) + scrollbars - (boolean) + padding - (object) + shadowBlur - (number) Width of shadows. + shadowOffset - Should be positive and not be greater than the ShadowBlur. + controlsOffset - Change this if you want to reposition the window controls. + useCanvas - (boolean) Set this to false if you don't want a canvas body. + useCanvasControls - (boolean) Set this to false if you wish to use images for the buttons. + useSpinner - (boolean) Toggles whether or not the ajax spinners are displayed in window footers. Defaults to true. + headerStartColor - ([r,g,b,]) Titlebar gradient's top color + headerStopColor - ([r,g,b,]) Titlebar gradient's bottom color + bodyBgColor - ([r,g,b,]) Background color of the main canvas shape + minimizeBgColor - ([r,g,b,]) Minimize button background color + minimizeColor - ([r,g,b,]) Minimize button color + maximizeBgColor - ([r,g,b,]) Maximize button background color + maximizeColor - ([r,g,b,]) Maximize button color + closeBgColor - ([r,g,b,]) Close button background color + closeColor - ([r,g,b,]) Close button color + resizableColor - ([r,g,b,]) Resizable icon color + onBeforeBuild - (function) Fired just before the window is built. + onContentLoaded - (function) Fired when content is successfully loaded via XHR or Iframe. + onFocus - (function) Fired when the window is focused. + onBlur - (function) Fired when window loses focus. + onResize - (function) Fired when the window is resized. + onMinimize - (function) Fired when the window is minimized. + onMaximize - (function) Fired when the window is maximized. + onRestore - (function) Fired when a window is restored from minimized or maximized. + onClose - (function) Fired just before the window is closed. + onCloseComplete - (function) Fired after the window is closed. + +Returns: + Window object. + +Example: + Define a window. It is suggested you name the function the same as your window ID + "Window". + (start code) + var mywindowWindow = function(){ + new MUI.Window({ + id: 'mywindow', + title: 'My Window', + loadMethod: 'xhr', + contentURL: 'pages/lipsum.html', + width: 340, + height: 150 + }); + } + (end) + +Example: + Create window onDomReady. + (start code) + window.addEvent('domready', function(){ + mywindow(); + }); + (end) + +Example: + Add link events to build future windows. It is suggested you give your anchor the same ID as your window + "WindowLink" or + "WindowLinkCheck". Use the latter if it is a link in the menu toolbar. + + If you wish to add links in windows that open other windows remember to add events to those links when the windows are created. + + (start code) + // Javascript: + if ($('mywindowLink')){ + $('mywindowLink').addEvent('click', function(e) { + new Event(e).stop(); + mywindow(); + }); + } + + // HTML: + My Window + (end) + + + Loading Content with an XMLHttpRequest(xhr): + For content to load via xhr all the files must be online and in the same domain. If you need to load content from another domain or wish to have it work offline, load the content in an iframe instead of using the xhr option. + + Iframes: + If you use the iframe loadMethod your iframe will automatically be resized when the window it is in is resized. If you want this same functionality when using one of the other load options simply add class="mochaIframe" to those iframes and they will be resized for you as well. + +*/ + +// Having these options outside of the Class allows us to add, change, and remove +// individual options without rewriting all of them. + +MUI.extend({ + Windows: { + instances: new Hash(), + indexLevel: 100, // Used for window z-Index + windowIDCount: 0, // Used for windows without an ID defined by the user + windowsVisible: true, // Ctrl-Alt-Q to toggle window visibility + focusingWindow: false + } +}); + +MUI.Windows.windowOptions = { + id: null, + title: 'New Window', + icon: false, + type: 'window', + require: { + css: [], + images: [], + js: [], + onload: null + }, + loadMethod: null, + method: 'get', + contentURL: null, + data: null, + + closeAfter: false, + + // xhr options + evalScripts: true, + evalResponse: false, + + // html options + content: 'Window content', + + // Toolbar + toolbar: false, + toolbarPosition: 'top', + toolbarHeight: 29, + toolbarURL: 'pages/lipsum.html', + toolbarData: null, + toolbarContent: '', + toolbarOnload: $empty, + + // Toolbar + toolbar2: false, + toolbar2Position: 'bottom', + toolbar2Height: 29, + toolbar2URL: 'pages/lipsum.html', + toolbar2Data: null, + toolbar2Content: '', + toolbar2Onload: $empty, + + // Container options + container: null, + restrict: true, + shape: 'box', + + // Window Controls + collapsible: true, + minimizable: true, + maximizable: true, + closable: true, + + // Close options + storeOnClose: false, + + // Modal options + modalOverlayClose: true, + + // Draggable + draggable: null, + draggableGrid: false, + draggableLimit: false, + draggableSnap: false, + + // Resizable + resizable: null, + resizeLimit: {'x': [250, 2500], 'y': [125, 2000]}, + + // Style options: + addClass: '', + width: 300, + height: 125, + headerHeight: 25, + footerHeight: 25, + cornerRadius: 8, + x: null, + y: null, + scrollbars: true, + padding: { top: 10, right: 12, bottom: 10, left: 12 }, + shadowBlur: 5, + shadowOffset: {'x': 0, 'y': 1}, + controlsOffset: {'right': 6, 'top': 6}, + useCanvas: true, + useCanvasControls: true, + useSpinner: true, + + // Color options: + headerStartColor: [250, 250, 250], + headerStopColor: [229, 229, 229], + bodyBgColor: [229, 229, 229], + minimizeBgColor: [255, 255, 255], + minimizeColor: [0, 0, 0], + maximizeBgColor: [255, 255, 255], + maximizeColor: [0, 0, 0], + closeBgColor: [255, 255, 255], + closeColor: [0, 0, 0], + resizableColor: [254, 254, 254], + + // Events + onBeforeBuild: $empty, + onContentLoaded: $empty, + onFocus: $empty, + onBlur: $empty, + onResize: $empty, + onMinimize: $empty, + onMaximize: $empty, + onRestore: $empty, + onClose: $empty, + onCloseComplete: $empty +}; + +MUI.Windows.windowOptionsOriginal = $merge(MUI.Windows.windowOptions); + +MUI.Window = new Class({ + + Implements: [Events, Options], + + options: MUI.Windows.windowOptions, + + initialize: function(options){ + this.setOptions(options); + + // Shorten object chain + var options = this.options; + + $extend(this, { + mochaControlsWidth: 0, + minimizebuttonX: 0, // Minimize button horizontal position + maximizebuttonX: 0, // Maximize button horizontal position + closebuttonX: 0, // Close button horizontal position + headerFooterShadow: options.headerHeight + options.footerHeight + (options.shadowBlur * 2), + oldTop: 0, + oldLeft: 0, + isMaximized: false, + isMinimized: false, + isCollapsed: false, + timestamp: $time() + }); + + if (options.type != 'window'){ + options.container = document.body; + options.minimizable = false; + } + if (!options.container){ + options.container = MUI.Desktop && MUI.Desktop.desktop ? MUI.Desktop.desktop : document.body; + } + + // Set this.options.resizable to default if it was not defined + if (options.resizable == null){ + if (options.type != 'window' || options.shape == 'gauge'){ + options.resizable = false; + } + else { + options.resizable = true; + } + } + + // Set this.options.draggable if it was not defined + if (options.draggable == null){ + options.draggable = options.type != 'window' ? false : true; + } + + // Gauges are not maximizable or resizable + if (options.shape == 'gauge' || options.type == 'notification'){ + options.collapsible = false; + options.maximizable = false; + options.contentBgColor = 'transparent'; + options.scrollbars = false; + options.footerHeight = 0; + } + if (options.type == 'notification'){ + options.closable = false; + options.headerHeight = 0; + } + + // Minimizable, dock is required and window cannot be modal + if (MUI.Dock && $(MUI.options.dock)){ + if (MUI.Dock.dock && options.type != 'modal' && options.type != 'modal2'){ + options.minimizable = options.minimizable; + } + } + else { + options.minimizable = false; + } + + // Maximizable, desktop is required + options.maximizable = MUI.Desktop && MUI.Desktop.desktop && options.maximizable && options.type != 'modal' && options.type != 'modal2'; + + if (this.options.type == 'modal2') { + this.options.shadowBlur = 0; + this.options.shadowOffset = {'x': 0, 'y': 0}; + this.options.useSpinner = false; + this.options.useCanvas = false; + this.options.footerHeight = 0; + this.options.headerHeight = 0; + } + + // If window has no ID, give it one. + options.id = options.id || 'win' + (++MUI.Windows.windowIDCount); + + this.windowEl = $(options.id); + + if (options.require.css.length || options.require.images.length){ + new MUI.Require({ + css: options.require.css, + images: options.require.images, + onload: function(){ + this.newWindow(); + }.bind(this) + }); + } + else { + this.newWindow(); + } + + // Return window object + return this; + }, + saveValues: function(){ + var coordinates = this.windowEl.getCoordinates(); + this.options.x = coordinates.left.toInt(); + this.options.y = coordinates.top.toInt(); + }, + + /* + + Internal Function: newWindow + + Arguments: + properties + + */ + newWindow: function(properties){ // options is not doing anything + + // Shorten object chain + var instances = MUI.Windows.instances; + var instanceID = MUI.Windows.instances.get(this.options.id); + var options = this.options; + + // Here we check to see if there is already a class instance for this window + if (instanceID) var instance = instanceID; + + // Check if window already exists and is not in progress of closing + if ( this.windowEl && !this.isClosing ){ + // Restore if minimized + if (instance.isMinimized){ + MUI.Dock.restoreMinimized(this.windowEl); + } + // Expand and focus if collapsed + else if (instance.isCollapsed){ + MUI.collapseToggle(this.windowEl); + setTimeout(MUI.focusWindow.pass(this.windowEl, this),10); + } + else if (this.windowEl.hasClass('windowClosed')){ + + if (instance.check) instance.check.show(); + + this.windowEl.removeClass('windowClosed'); + this.windowEl.setStyle('opacity', 0); + this.windowEl.addClass('mocha'); + + if (MUI.Dock && $(MUI.options.dock) && instance.options.type == 'window') { + var currentButton = $(instance.options.id + '_dockTab'); + if (currentButton != null) { + currentButton.show(); + } + MUI.Desktop.setDesktopSize(); + } + + instance.displayNewWindow(); + + } + // Else focus + else { + var coordinates = document.getCoordinates(); + if (this.windowEl.getStyle('left').toInt() > coordinates.width || this.windowEl.getStyle('top').toInt() > coordinates.height){ + MUI.centerWindow(this.windowEl); + } + setTimeout(MUI.focusWindow.pass(this.windowEl, this),10); + if (MUI.options.standardEffects == true) { + this.windowEl.shake(); + } + } + return; + } + else { + instances.set(options.id, this); + } + + this.isClosing = false; + this.fireEvent('onBeforeBuild'); + + // Create window div + MUI.Windows.indexLevel++; + this.windowEl = new Element('div', { + 'class': 'mocha', + 'id': options.id, + 'styles': { + 'position': 'absolute', + 'width': options.width, + 'height': options.height, + 'display': 'block', + 'opacity': 0, + 'zIndex': MUI.Windows.indexLevel += 2 + } + }); + + this.windowEl.store('instance', this); + + this.windowEl.addClass(options.addClass); + + if (options.type == 'modal2') { + this.windowEl.addClass('modal2'); + } + + // Fix a mouseover issue with gauges in IE7 + if ( Browser.Engine.trident && options.shape == 'gauge') { + this.windowEl.setStyle('backgroundImage', 'url(../images/spacer.gif)'); + } + + if ((this.options.type == 'modal' || options.type == 'modal2' ) && Browser.Platform.mac && Browser.Engine.gecko){ + if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { + var ffversion = new Number(RegExp.$1); + if (ffversion < 3) { + this.windowEl.setStyle('position', 'fixed'); + } + } + } + + if (options.loadMethod == 'iframe') { + options.padding = { top: 0, right: 0, bottom: 0, left: 0 }; + } + + // Insert sub elements inside windowEl + this.insertWindowElements(); + + // Set title + this.titleEl.set('html', options.title); + + this.contentWrapperEl.setStyle('overflow', 'hidden'); + + this.contentEl.setStyles({ + 'padding-top': options.padding.top, + 'padding-bottom': options.padding.bottom, + 'padding-left': options.padding.left, + 'padding-right': options.padding.right + }); + + if (options.shape == 'gauge'){ + if (options.useCanvasControls){ + this.canvasControlsEl.setStyle('visibility', 'hidden'); + } + else { + this.controlsEl.setStyle('visibility', 'hidden'); + } + this.windowEl.addEvent('mouseover', function(){ + this.mouseover = true; + var showControls = function(){ + if (this.mouseover != false){ + if (options.useCanvasControls){ + this.canvasControlsEl.setStyle('visibility', 'visible'); + } + else { + this.controlsEl.setStyle('visibility', 'visible'); + } + this.canvasHeaderEl.setStyle('visibility', 'visible'); + this.titleEl.show(); + } + }; + showControls.delay(0, this); + + }.bind(this)); + this.windowEl.addEvent('mouseleave', function(){ + this.mouseover = false; + if (this.options.useCanvasControls){ + this.canvasControlsEl.setStyle('visibility', 'hidden'); + } + else { + this.controlsEl.setStyle('visibility', 'hidden'); + } + this.canvasHeaderEl.setStyle('visibility', 'hidden'); + this.titleEl.hide(); + }.bind(this)); + } + + // Inject window into DOM + this.windowEl.inject(options.container); + + // Convert CSS colors to Canvas colors. + this.setColors(); + + if (options.type != 'notification'){ + this.setMochaControlsWidth(); + } + + // Add content to window. + MUI.updateContent({ + 'element': this.windowEl, + 'content': options.content, + 'method': options.method, + 'url': options.contentURL, + 'data': options.data, + 'onContentLoaded': null, + 'require': { + js: options.require.js, + onload: options.require.onload + } + }); + + // Add content to window toolbar. + if (this.options.toolbar == true){ + MUI.updateContent({ + 'element': this.windowEl, + 'childElement': this.toolbarEl, + 'content': options.toolbarContent, + 'loadMethod': 'xhr', + 'method': options.method, + 'url': options.toolbarURL, + 'data': options.toolbarData, + 'onContentLoaded': options.toolbarOnload + }); + } + + // Add content to window toolbar. + if (this.options.toolbar2 == true){ + MUI.updateContent({ + 'element': this.windowEl, + 'childElement': this.toolbar2El, + 'content': options.toolbar2Content, + 'loadMethod': 'xhr', + 'method': options.method, + 'url': options.toolbar2URL, + 'data': options.toolbar2Data, + 'onContentLoaded': options.toolbar2Onload + }); + } + + this.drawWindow(); + + // Attach events to the window + this.attachDraggable(); + this.attachResizable(); + this.setupEvents(); + + if (options.resizable){ + this.adjustHandles(); + } + + // Position window. If position not specified by user then center the window on the page. + if (options.container == document.body || options.container == MUI.Desktop.desktop){ + var dimensions = window.getSize(); + } + else { + var dimensions = $(this.options.container).getSize(); + } + + if (!options.y) { + if (MUI.Desktop && MUI.Desktop.desktop) { + var y = (dimensions.y * .5) - (this.windowEl.offsetHeight * .5); + if (y < -options.shadowBlur) y = -options.shadowBlur; + } + else { + var y = window.getScroll().y + (window.getSize().y * .5) - (this.windowEl.offsetHeight * .5); + if (y < -options.shadowBlur) y = -options.shadowBlur; + } + } + else { + var y = options.y - options.shadowBlur; + } + + if (!this.options.x) { + var x = (dimensions.x * .5) - (this.windowEl.offsetWidth * .5); + if (x < -options.shadowBlur) x = -options.shadowBlur; + } + else { + var x = options.x - options.shadowBlur; + } + + this.windowEl.setStyles({ + 'top': y, + 'left': x + }); + + // Create opacityMorph + + this.opacityMorph = new Fx.Morph(this.windowEl, { + 'duration': 350, + transition: Fx.Transitions.Sine.easeInOut, + onComplete: function(){ + if (Browser.Engine.trident){ + this.drawWindow(); + } + }.bind(this) + }); + + this.displayNewWindow(); + + // This is a generic morph that can be reused later by functions like centerWindow() + // It returns the windowEl element rather than this Class. + this.morph = new Fx.Morph(this.windowEl, { + 'duration': 200 + }); + this.windowEl.store('morph', this.morph); + + this.resizeMorph = new Fx.Elements([this.contentWrapperEl, this.windowEl], { + duration: 400, + transition: Fx.Transitions.Sine.easeInOut, + onStart: function(){ + this.resizeAnimation = this.drawWindow.periodical(20, this); + }.bind(this), + onComplete: function(){ + $clear(this.resizeAnimation); + this.drawWindow(); + // Show iframe + if ( this.iframeEl ) { + this.iframeEl.setStyle('visibility', 'visible'); + } + }.bind(this) + }); + this.windowEl.store('resizeMorph', this.resizeMorph); + + // Add check mark to menu if link exists in menu + // Need to make sure the check mark is not added to links not in menu + if ($(this.windowEl.id + 'LinkCheck')){ + this.check = new Element('div', { + 'class': 'check', + 'id': this.options.id + '_check' + }).inject(this.windowEl.id + 'LinkCheck'); + } + + if (this.options.closeAfter != false){ + MUI.closeWindow.delay(this.options.closeAfter, this, this.windowEl); + } + + if (MUI.Dock && $(MUI.options.dock) && this.options.type == 'window' ){ + MUI.Dock.createDockTab(this.windowEl); + } + + }, + displayNewWindow: function(){ + + options = this.options; + if (options.type == 'modal' || options.type == 'modal2') { + MUI.currentModal = this.windowEl; + if (Browser.Engine.trident4){ + $('modalFix').show(); + } + $('modalOverlay').show(); + if (MUI.options.advancedEffects == false){ + $('modalOverlay').setStyle('opacity', .6); + this.windowEl.setStyles({ + 'zIndex': 11000, + 'opacity': 1 + }); + } + else { + MUI.Modal.modalOverlayCloseMorph.cancel(); + MUI.Modal.modalOverlayOpenMorph.start({ + 'opacity': .6 + }); + this.windowEl.setStyles({ + 'zIndex': 11000 + }); + this.opacityMorph.start({ + 'opacity': 1 + }); + } + + $$('.dockTab').removeClass('activeDockTab'); + $$('.mocha').removeClass('isFocused'); + this.windowEl.addClass('isFocused'); + + } + else if (MUI.options.advancedEffects == false){ + this.windowEl.setStyle('opacity', 1); + setTimeout(MUI.focusWindow.pass(this.windowEl, this), 10); + } + else { + // IE cannot handle both element opacity and VML alpha at the same time. + if (Browser.Engine.trident){ + this.drawWindow(false); + } + this.opacityMorph.start({ + 'opacity': 1 + }); + setTimeout(MUI.focusWindow.pass(this.windowEl, this), 10); + } + + }, + setupEvents: function() { + var windowEl = this.windowEl; + // Set events + // Note: if a button does not exist, its due to properties passed to newWindow() stating otherwice + if (this.closeButtonEl){ + this.closeButtonEl.addEvent('click', function(e) { + new Event(e).stop(); + MUI.closeWindow(windowEl); + }.bind(this)); + } + + if (this.options.type == 'window'){ + windowEl.addEvent('mousedown', function(e) { + if (Browser.Engine.trident) { + new Event(e).stop(); + } + MUI.focusWindow(windowEl); + if (windowEl.getStyle('top').toInt() < -this.options.shadowBlur) { + windowEl.setStyle('top', -this.options.shadowBlur); + } + }.bind(this)); + } + + if (this.minimizeButtonEl) { + this.minimizeButtonEl.addEvent('click', function(e) { + new Event(e).stop(); + MUI.Dock.minimizeWindow(windowEl); + }.bind(this)); + } + + if (this.maximizeButtonEl) { + this.maximizeButtonEl.addEvent('click', function(e) { + new Event(e).stop(); + if (this.isMaximized) { + MUI.Desktop.restoreWindow(windowEl); + } else { + MUI.Desktop.maximizeWindow(windowEl); + } + }.bind(this)); + } + + if (this.options.collapsible == true){ + // Keep titlebar text from being selected on double click in Safari. + this.titleEl.addEvent('selectstart', function(e) { + e = new Event(e).stop(); + }.bind(this)); + + if (Browser.Engine.trident) { + this.titleBarEl.addEvent('mousedown', function(e) { + this.titleEl.setCapture(); + }.bind(this)); + this.titleBarEl.addEvent('mouseup', function(e) { + this.titleEl.releaseCapture(); + }.bind(this)); + } + + this.titleBarEl.addEvent('dblclick', function(e) { + e = new Event(e).stop(); + MUI.collapseToggle(this.windowEl); + }.bind(this)); + } + + }, + /* + + Internal Function: attachDraggable() + Make window draggable. + + */ + attachDraggable: function(){ + var windowEl = this.windowEl; + if (!this.options.draggable) return; + this.windowDrag = new Drag.Move(windowEl, { + handle: this.titleBarEl, + container: this.options.restrict == true ? $(this.options.container) : false, + grid: this.options.draggableGrid, + limit: this.options.draggableLimit, + snap: this.options.draggableSnap, + onStart: function() { + if (this.options.type != 'modal' && this.options.type != 'modal2'){ + MUI.focusWindow(windowEl); + $('windowUnderlay').show(); + } + if (this.iframeEl) { + if (!Browser.Engine.trident) { + this.iframeEl.setStyle('visibility', 'hidden'); + } + else { + this.iframeEl.hide(); + } + } + }.bind(this), + onComplete: function() { + if (this.options.type != 'modal' && this.options.type != 'modal2') { + $('windowUnderlay').hide(); + } + if ( this.iframeEl ){ + if (!Browser.Engine.trident) { + this.iframeEl.setStyle('visibility', 'visible'); + } + else { + this.iframeEl.show(); + } + } + // Store new position in options. + this.saveValues(); + }.bind(this) + }); + }, + /* + + Internal Function: attachResizable + Make window resizable. + + */ + attachResizable: function(){ + var windowEl = this.windowEl; + if (!this.options.resizable) return; + this.resizable1 = this.windowEl.makeResizable({ + handle: [this.n, this.ne, this.nw], + limit: { + y: [ + function(){ + return this.windowEl.getStyle('top').toInt() + this.windowEl.getStyle('height').toInt() - this.options.resizeLimit.y[1]; + }.bind(this), + function(){ + return this.windowEl.getStyle('top').toInt() + this.windowEl.getStyle('height').toInt() - this.options.resizeLimit.y[0]; + }.bind(this) + ] + }, + modifiers: {x: false, y: 'top'}, + onStart: function(){ + this.resizeOnStart(); + this.coords = this.contentWrapperEl.getCoordinates(); + this.y2 = this.coords.top.toInt() + this.contentWrapperEl.offsetHeight; + }.bind(this), + onDrag: function(){ + this.coords = this.contentWrapperEl.getCoordinates(); + this.contentWrapperEl.setStyle('height', this.y2 - this.coords.top.toInt()); + this.resizeOnDrag(); + }.bind(this), + onComplete: function(){ + this.resizeOnComplete(); + }.bind(this) + }); + + this.resizable2 = this.contentWrapperEl.makeResizable({ + handle: [this.e, this.ne], + limit: { + x: [this.options.resizeLimit.x[0] - (this.options.shadowBlur * 2), this.options.resizeLimit.x[1] - (this.options.shadowBlur * 2) ] + }, + modifiers: {x: 'width', y: false}, + onStart: function(){ + this.resizeOnStart(); + }.bind(this), + onDrag: function(){ + this.resizeOnDrag(); + }.bind(this), + onComplete: function(){ + this.resizeOnComplete(); + }.bind(this) + }); + + this.resizable3 = this.contentWrapperEl.makeResizable({ + container: this.options.restrict == true ? $(this.options.container) : false, + handle: this.se, + limit: { + x: [this.options.resizeLimit.x[0] - (this.options.shadowBlur * 2), this.options.resizeLimit.x[1] - (this.options.shadowBlur * 2) ], + y: [this.options.resizeLimit.y[0] - this.headerFooterShadow, this.options.resizeLimit.y[1] - this.headerFooterShadow] + }, + modifiers: {x: 'width', y: 'height'}, + onStart: function(){ + this.resizeOnStart(); + }.bind(this), + onDrag: function(){ + this.resizeOnDrag(); + }.bind(this), + onComplete: function(){ + this.resizeOnComplete(); + }.bind(this) + }); + + this.resizable4 = this.contentWrapperEl.makeResizable({ + handle: [this.s, this.sw], + limit: { + y: [this.options.resizeLimit.y[0] - this.headerFooterShadow, this.options.resizeLimit.y[1] - this.headerFooterShadow] + }, + modifiers: {x: false, y: 'height'}, + onStart: function(){ + this.resizeOnStart(); + }.bind(this), + onDrag: function(){ + this.resizeOnDrag(); + }.bind(this), + onComplete: function(){ + this.resizeOnComplete(); + }.bind(this) + }); + + this.resizable5 = this.windowEl.makeResizable({ + handle: [this.w, this.sw, this.nw], + limit: { + x: [ + function(){ + return this.windowEl.getStyle('left').toInt() + this.windowEl.getStyle('width').toInt() - this.options.resizeLimit.x[1]; + }.bind(this), + function(){ + return this.windowEl.getStyle('left').toInt() + this.windowEl.getStyle('width').toInt() - this.options.resizeLimit.x[0]; + }.bind(this) + ] + }, + modifiers: {x: 'left', y: false}, + onStart: function(){ + this.resizeOnStart(); + this.coords = this.contentWrapperEl.getCoordinates(); + this.x2 = this.coords.left.toInt() + this.contentWrapperEl.offsetWidth; + }.bind(this), + onDrag: function(){ + this.coords = this.contentWrapperEl.getCoordinates(); + this.contentWrapperEl.setStyle('width', this.x2 - this.coords.left.toInt()); + this.resizeOnDrag(); + }.bind(this), + onComplete: function(){ + this.resizeOnComplete(); + }.bind(this) + }); + + }, + resizeOnStart: function(){ + $('windowUnderlay').show(); + if (this.iframeEl){ + if (!Browser.Engine.trident) { + this.iframeEl.setStyle('visibility', 'hidden'); + } + else { + this.iframeEl.hide(); + } + } + }, + resizeOnDrag: function(){ + // Fix for a rendering glitch in FF when resizing a window with panels in it + if (Browser.Engine.gecko) { + this.windowEl.getElements('.panel').each(function(panel){ + panel.store('oldOverflow', panel.getStyle('overflow')); + panel.setStyle('overflow', 'visible'); + }); + } + this.drawWindow(); + this.adjustHandles(); + if (Browser.Engine.gecko) { + this.windowEl.getElements('.panel').each(function(panel){ + panel.setStyle('overflow', panel.retrieve('oldOverflow')); // Fix for a rendering bug in FF + }); + } + }, + resizeOnComplete: function(){ + $('windowUnderlay').hide(); + if (this.iframeEl){ + if (!Browser.Engine.trident) { + this.iframeEl.setStyle('visibility', 'visible'); + } + else { + this.iframeEl.show(); + // The following hack is to get IE8 RC1 IE8 Standards Mode to properly resize an iframe + // when only the vertical dimension is changed. + this.iframeEl.setStyle('width', '99%'); + this.iframeEl.setStyle('height', this.contentWrapperEl.offsetHeight); + this.iframeEl.setStyle('width', '100%'); + this.iframeEl.setStyle('height', this.contentWrapperEl.offsetHeight); + } + } + + // Resize panels if there are any + if (this.contentWrapperEl.getChildren('.column') != null) { + MUI.rWidth(this.contentWrapperEl); + this.contentWrapperEl.getChildren('.column').each(function(column){ + MUI.panelHeight(column); + }); + } + + this.fireEvent('onResize', this.windowEl); + }, + adjustHandles: function(){ + + var shadowBlur = this.options.shadowBlur; + var shadowBlur2x = shadowBlur * 2; + var shadowOffset = this.options.shadowOffset; + var top = shadowBlur - shadowOffset.y - 1; + var right = shadowBlur + shadowOffset.x - 1; + var bottom = shadowBlur + shadowOffset.y - 1; + var left = shadowBlur - shadowOffset.x - 1; + + var coordinates = this.windowEl.getCoordinates(); + var width = coordinates.width - shadowBlur2x + 2; + var height = coordinates.height - shadowBlur2x + 2; + + this.n.setStyles({ + 'top': top, + 'left': left + 10, + 'width': width - 20 + }); + this.e.setStyles({ + 'top': top + 10, + 'right': right, + 'height': height - 30 + }); + this.s.setStyles({ + 'bottom': bottom, + 'left': left + 10, + 'width': width - 30 + }); + this.w.setStyles({ + 'top': top + 10, + 'left': left, + 'height': height - 20 + }); + this.ne.setStyles({ + 'top': top, + 'right': right + }); + this.se.setStyles({ + 'bottom': bottom, + 'right': right + }); + this.sw.setStyles({ + 'bottom': bottom, + 'left': left + }); + this.nw.setStyles({ + 'top': top, + 'left': left + }); + }, + detachResizable: function(){ + this.resizable1.detach(); + this.resizable2.detach(); + this.resizable3.detach(); + this.resizable4.detach(); + this.resizable5.detach(); + this.windowEl.getElements('.handle').hide(); + }, + reattachResizable: function(){ + this.resizable1.attach(); + this.resizable2.attach(); + this.resizable3.attach(); + this.resizable4.attach(); + this.resizable5.attach(); + this.windowEl.getElements('.handle').show(); + }, + /* + + Internal Function: insertWindowElements + + Arguments: + windowEl + + */ + insertWindowElements: function(){ + + var options = this.options; + var height = options.height; + var width = options.width; + var id = options.id; + + var cache = {}; + + if (Browser.Engine.trident4){ + cache.zIndexFixEl = new Element('iframe', { + 'id': id + '_zIndexFix', + 'class': 'zIndexFix', + 'scrolling': 'no', + 'marginWidth': 0, + 'marginHeight': 0, + 'src': '', + 'styles': { + 'position': 'absolute' // This is set here to make theme transitions smoother + } + }).inject(this.windowEl); + } + + cache.overlayEl = new Element('div', { + 'id': id + '_overlay', + 'class': 'mochaOverlay', + 'styles': { + 'position': 'absolute', // This is set here to make theme transitions smoother + 'top': 0, + 'left': 0 + } + }).inject(this.windowEl); + + cache.titleBarEl = new Element('div', { + 'id': id + '_titleBar', + 'class': 'mochaTitlebar', + 'styles': { + 'cursor': options.draggable ? 'move' : 'default' + } + }).inject(cache.overlayEl, 'top'); + + cache.titleEl = new Element('h3', { + 'id': id + '_title', + 'class': 'mochaTitle' + }).inject(cache.titleBarEl); + + if (options.icon != false){ + cache.titleEl.setStyles({ + 'padding-left': 28, + 'background': 'url(' + options.icon + ') 5px 4px no-repeat' + }); + } + + cache.contentBorderEl = new Element('div', { + 'id': id + '_contentBorder', + 'class': 'mochaContentBorder' + }).inject(cache.overlayEl); + + if (options.toolbar){ + cache.toolbarWrapperEl = new Element('div', { + 'id': id + '_toolbarWrapper', + 'class': 'mochaToolbarWrapper', + 'styles': { 'height': options.toolbarHeight } + }).inject(cache.contentBorderEl, options.toolbarPosition == 'bottom' ? 'after' : 'before'); + + if (options.toolbarPosition == 'bottom') { + cache.toolbarWrapperEl.addClass('bottom'); + } + cache.toolbarEl = new Element('div', { + 'id': id + '_toolbar', + 'class': 'mochaToolbar', + 'styles': { 'height': options.toolbarHeight } + }).inject(cache.toolbarWrapperEl); + } + + if (options.toolbar2){ + cache.toolbar2WrapperEl = new Element('div', { + 'id': id + '_toolbar2Wrapper', + 'class': 'mochaToolbarWrapper', + 'styles': { 'height': options.toolbar2Height } + }).inject(cache.contentBorderEl, options.toolbar2Position == 'bottom' ? 'after' : 'before'); + + if (options.toolbar2Position == 'bottom') { + cache.toolbar2WrapperEl.addClass('bottom'); + } + cache.toolbar2El = new Element('div', { + 'id': id + '_toolbar2', + 'class': 'mochaToolbar', + 'styles': { 'height': options.toolbar2Height } + }).inject(cache.toolbar2WrapperEl); + } + + cache.contentWrapperEl = new Element('div', { + 'id': id + '_contentWrapper', + 'class': 'mochaContentWrapper', + 'styles': { + 'width': width + 'px', + 'height': height + 'px' + } + }).inject(cache.contentBorderEl); + + if (this.options.shape == 'gauge'){ + cache.contentBorderEl.setStyle('borderWidth', 0); + } + + cache.contentEl = new Element('div', { + 'id': id + '_content', + 'class': 'mochaContent' + }).inject(cache.contentWrapperEl); + + if (this.options.useCanvas == true && Browser.Engine.trident != true) { + cache.canvasEl = new Element('canvas', { + 'id': id + '_canvas', + 'class': 'mochaCanvas', + 'width': 10, + 'height': 10 + }).inject(this.windowEl); + } + + if (this.options.useCanvas == true && Browser.Engine.trident) { + cache.canvasEl = new Element('canvas', { + 'id': id + '_canvas', + 'class': 'mochaCanvas', + 'width': 50000, // IE8 excanvas requires these large numbers + 'height': 20000, + 'styles': { + 'position': 'absolute', + 'top': 0, + 'left': 0 + } + }).inject(this.windowEl); + + if (MUI.ieSupport == 'excanvas'){ + G_vmlCanvasManager.initElement(cache.canvasEl); + cache.canvasEl = this.windowEl.getElement('.mochaCanvas'); + } + } + + cache.controlsEl = new Element('div', { + 'id': id + '_controls', + 'class': 'mochaControls' + }).inject(cache.overlayEl, 'after'); + + if (options.useCanvasControls == true){ + cache.canvasControlsEl = new Element('canvas', { + 'id': id + '_canvasControls', + 'class': 'mochaCanvasControls', + 'width': 14, + 'height': 14 + }).inject(this.windowEl); + + if (Browser.Engine.trident && MUI.ieSupport == 'excanvas'){ + G_vmlCanvasManager.initElement(cache.canvasControlsEl); + cache.canvasControlsEl = this.windowEl.getElement('.mochaCanvasControls'); + } + } + + if (options.closable){ + cache.closeButtonEl = new Element('div', { + 'id': id + '_closeButton', + 'class': 'mochaCloseButton mochaWindowButton', + 'title': 'Close' + }).inject(cache.controlsEl); + } + + if (options.maximizable){ + cache.maximizeButtonEl = new Element('div', { + 'id': id + '_maximizeButton', + 'class': 'mochaMaximizeButton mochaWindowButton', + 'title': 'Maximize' + }).inject(cache.controlsEl); + } + + if (options.minimizable){ + cache.minimizeButtonEl = new Element('div', { + 'id': id + '_minimizeButton', + 'class': 'mochaMinimizeButton mochaWindowButton', + 'title': 'Minimize' + }).inject(cache.controlsEl); + } + + if (options.useSpinner == true && options.shape != 'gauge' && options.type != 'notification'){ + cache.spinnerEl = new Element('div', { + 'id': id + '_spinner', + 'class': 'mochaSpinner', + 'width': 16, + 'height': 16 + }).inject(this.windowEl, 'bottom'); + } + + if (this.options.shape == 'gauge'){ + cache.canvasHeaderEl = new Element('canvas', { + 'id': id + '_canvasHeader', + 'class': 'mochaCanvasHeader', + 'width': this.options.width, + 'height': 26 + }).inject(this.windowEl, 'bottom'); + + if (Browser.Engine.trident && MUI.ieSupport == 'excanvas'){ + G_vmlCanvasManager.initElement(cache.canvasHeaderEl); + cache.canvasHeaderEl = this.windowEl.getElement('.mochaCanvasHeader'); + } + } + + if ( Browser.Engine.trident ){ + cache.overlayEl.setStyle('zIndex', 2); + } + + // For Mac Firefox 2 to help reduce scrollbar bugs in that browser + if (Browser.Platform.mac && Browser.Engine.gecko){ + if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ + var ffversion = new Number(RegExp.$1); + if (ffversion < 3){ + cache.overlayEl.setStyle('overflow', 'auto'); + } + } + } + + if (options.resizable){ + cache.n = new Element('div', { + 'id': id + '_resizeHandle_n', + 'class': 'handle', + 'styles': { + 'top': 0, + 'left': 10, + 'cursor': 'n-resize' + } + }).inject(cache.overlayEl, 'after'); + + cache.ne = new Element('div', { + 'id': id + '_resizeHandle_ne', + 'class': 'handle corner', + 'styles': { + 'top': 0, + 'right': 0, + 'cursor': 'ne-resize' + } + }).inject(cache.overlayEl, 'after'); + + cache.e = new Element('div', { + 'id': id + '_resizeHandle_e', + 'class': 'handle', + 'styles': { + 'top': 10, + 'right': 0, + 'cursor': 'e-resize' + } + }).inject(cache.overlayEl, 'after'); + + cache.se = new Element('div', { + 'id': id + '_resizeHandle_se', + 'class': 'handle cornerSE', + 'styles': { + 'bottom': 0, + 'right': 0, + 'cursor': 'se-resize' + } + }).inject(cache.overlayEl, 'after'); + + cache.s = new Element('div', { + 'id': id + '_resizeHandle_s', + 'class': 'handle', + 'styles': { + 'bottom': 0, + 'left': 10, + 'cursor': 's-resize' + } + }).inject(cache.overlayEl, 'after'); + + cache.sw = new Element('div', { + 'id': id + '_resizeHandle_sw', + 'class': 'handle corner', + 'styles': { + 'bottom': 0, + 'left': 0, + 'cursor': 'sw-resize' + } + }).inject(cache.overlayEl, 'after'); + + cache.w = new Element('div', { + 'id': id + '_resizeHandle_w', + 'class': 'handle', + 'styles': { + 'top': 10, + 'left': 0, + 'cursor': 'w-resize' + } + }).inject(cache.overlayEl, 'after'); + + cache.nw = new Element('div', { + 'id': id + '_resizeHandle_nw', + 'class': 'handle corner', + 'styles': { + 'top': 0, + 'left': 0, + 'cursor': 'nw-resize' + } + }).inject(cache.overlayEl, 'after'); + } + $extend(this, cache); + + }, + /* + + Convert CSS colors to Canvas colors. + + */ + setColors: function(){ + + if (this.options.useCanvas == true) { + + // Set TitlebarColor + var pattern = /\?(.*?)\)/; + if (this.titleBarEl.getStyle('backgroundImage') != 'none'){ + var gradient = this.titleBarEl.getStyle('backgroundImage'); + gradient = gradient.match(pattern)[1]; + gradient = gradient.parseQueryString(); + var gradientFrom = gradient.from; + var gradientTo = gradient.to.replace(/\"/, ''); // IE7 was adding a quotation mark in. No idea why. + + this.options.headerStartColor = new Color(gradientFrom); + this.options.headerStopColor = new Color(gradientTo); + this.titleBarEl.addClass('replaced'); + } + else if (this.titleBarEl.getStyle('background-color') !== '' && this.titleBarEl.getStyle('background-color') !== 'transparent') { + this.options.headerStartColor = new Color(this.titleBarEl.getStyle('background-color')).mix('#fff', 20); + this.options.headerStopColor = new Color(this.titleBarEl.getStyle('background-color')).mix('#000', 20); + this.titleBarEl.addClass('replaced'); + } + + // Set BodyBGColor + if (this.windowEl.getStyle('background-color') !== '' && this.windowEl.getStyle('background-color') !== 'transparent') { + this.options.bodyBgColor = new Color(this.windowEl.getStyle('background-color')); + this.windowEl.addClass('replaced'); + } + + // Set resizableColor, the color of the SE corner resize handle + if (this.options.resizable && this.se.getStyle('background-color') !== '' && this.se.getStyle('background-color') !== 'transparent') { + this.options.resizableColor = new Color(this.se.getStyle('background-color')); + this.se.addClass('replaced'); + } + + } + + if (this.options.useCanvasControls == true){ + + if (this.minimizeButtonEl){ + + // Set Minimize Button Foreground Color + if (this.minimizeButtonEl.getStyle('color') !== '' && this.minimizeButtonEl.getStyle('color') !== 'transparent') { + this.options.minimizeColor = new Color(this.minimizeButtonEl.getStyle('color')); + } + + // Set Minimize Button Background Color + if (this.minimizeButtonEl.getStyle('background-color') !== '' && this.minimizeButtonEl.getStyle('background-color') !== 'transparent') { + this.options.minimizeBgColor = new Color(this.minimizeButtonEl.getStyle('background-color')); + this.minimizeButtonEl.addClass('replaced'); + } + + } + + if (this.maximizeButtonEl){ + + // Set Maximize Button Foreground Color + if (this.maximizeButtonEl.getStyle('color') !== '' && this.maximizeButtonEl.getStyle('color') !== 'transparent') { + this.options.maximizeColor = new Color(this.maximizeButtonEl.getStyle('color')); + } + + // Set Maximize Button Background Color + if (this.maximizeButtonEl.getStyle('background-color') !== '' && this.maximizeButtonEl.getStyle('background-color') !== 'transparent') { + this.options.maximizeBgColor = new Color(this.maximizeButtonEl.getStyle('background-color')); + this.maximizeButtonEl.addClass('replaced'); + } + + } + + if (this.closeButtonEl){ + + // Set Close Button Foreground Color + if (this.closeButtonEl.getStyle('color') !== '' && this.closeButtonEl.getStyle('color') !== 'transparent') { + this.options.closeColor = new Color(this.closeButtonEl.getStyle('color')); + } + + // Set Close Button Background Color + if (this.closeButtonEl.getStyle('background-color') !== '' && this.closeButtonEl.getStyle('background-color') !== 'transparent') { + this.options.closeBgColor = new Color(this.closeButtonEl.getStyle('background-color')); + this.closeButtonEl.addClass('replaced'); + } + + } + } + }, + /* + + Internal function: drawWindow + This is where we create the canvas GUI + + Arguments: + windowEl: the $(window) + shadows: (boolean) false will draw a window without shadows + + */ + drawWindow: function(shadows) { + + if (this.drawingWindow == true) return; + this.drawingWindow = true; + + if (this.isCollapsed){ + this.drawWindowCollapsed(shadows); + return; + } + + var windowEl = this.windowEl; + + var options = this.options; + var shadowBlur = options.shadowBlur; + var shadowBlur2x = shadowBlur * 2; + var shadowOffset = this.options.shadowOffset; + + this.overlayEl.setStyles({ + 'width': this.contentWrapperEl.offsetWidth + }); + + // Resize iframe when window is resized + if (this.iframeEl) { + this.iframeEl.setStyle('height', this.contentWrapperEl.offsetHeight); + } + + var borderHeight = this.contentBorderEl.getStyle('border-top').toInt() + this.contentBorderEl.getStyle('border-bottom').toInt(); + var toolbarHeight = this.toolbarWrapperEl ? this.toolbarWrapperEl.getStyle('height').toInt() + this.toolbarWrapperEl.getStyle('border-top').toInt() : 0; + var toolbar2Height = this.toolbar2WrapperEl ? this.toolbar2WrapperEl.getStyle('height').toInt() + this.toolbar2WrapperEl.getStyle('border-top').toInt() : 0; + + this.headerFooterShadow = options.headerHeight + options.footerHeight + shadowBlur2x; + var height = this.contentWrapperEl.getStyle('height').toInt() + this.headerFooterShadow + toolbarHeight + toolbar2Height + borderHeight; + var width = this.contentWrapperEl.getStyle('width').toInt() + shadowBlur2x; + this.windowEl.setStyles({ + 'height': height, + 'width': width + }); + + this.overlayEl.setStyles({ + 'height': height, + 'top': shadowBlur - shadowOffset.y, + 'left': shadowBlur - shadowOffset.x + }); + + if (this.options.useCanvas == true) { + if (Browser.Engine.trident) { + this.canvasEl.height = 20000; + this.canvasEl.width = 50000; + } + this.canvasEl.height = height; + this.canvasEl.width = width; + } + + // Part of the fix for IE6 select z-index bug + if (Browser.Engine.trident4){ + this.zIndexFixEl.setStyles({ + 'width': width, + 'height': height + }) + } + + this.titleBarEl.setStyles({ + 'width': width - shadowBlur2x, + 'height': options.headerHeight + }); + + // Make sure loading icon is placed correctly. + if (options.useSpinner == true && options.shape != 'gauge' && options.type != 'notification'){ + this.spinnerEl.setStyles({ + 'left': shadowBlur - shadowOffset.x + 3, + 'bottom': shadowBlur + shadowOffset.y + 4 + }); + } + + if (this.options.useCanvas != false) { + + // Draw Window + var ctx = this.canvasEl.getContext('2d'); + ctx.clearRect(0, 0, width, height); + + switch (options.shape) { + case 'box': + this.drawBox(ctx, width, height, shadowBlur, shadowOffset, shadows); + break; + case 'gauge': + this.drawGauge(ctx, width, height, shadowBlur, shadowOffset, shadows); + break; + } + + if (options.resizable){ + MUI.triangle( + ctx, + width - (shadowBlur + shadowOffset.x + 17), + height - (shadowBlur + shadowOffset.y + 18), + 11, + 11, + options.resizableColor, + 1.0 + ); + } + + // Invisible dummy object. The last element drawn is not rendered consistently while resizing in IE6 and IE7 + if (Browser.Engine.trident){ + MUI.triangle(ctx, 0, 0, 10, 10, options.resizableColor, 0); + } + } + + if (options.type != 'notification' && options.useCanvasControls == true){ + this.drawControls(width, height, shadows); + } + + // Resize panels if there are any + if (MUI.Desktop && this.contentWrapperEl.getChildren('.column').length != 0) { + MUI.rWidth(this.contentWrapperEl); + this.contentWrapperEl.getChildren('.column').each(function(column){ + MUI.panelHeight(column); + }); + } + + this.drawingWindow = false; + return this; + + }, + drawWindowCollapsed: function(shadows) { + + var windowEl = this.windowEl; + + var options = this.options; + var shadowBlur = options.shadowBlur; + var shadowBlur2x = shadowBlur * 2; + var shadowOffset = options.shadowOffset; + + var headerShadow = options.headerHeight + shadowBlur2x + 2; + var height = headerShadow; + var width = this.contentWrapperEl.getStyle('width').toInt() + shadowBlur2x; + this.windowEl.setStyle('height', height); + + this.overlayEl.setStyles({ + 'height': height, + 'top': shadowBlur - shadowOffset.y, + 'left': shadowBlur - shadowOffset.x + }); + + // Part of the fix for IE6 select z-index bug + if (Browser.Engine.trident4){ + this.zIndexFixEl.setStyles({ + 'width': width, + 'height': height + }); + } + + // Set width + this.windowEl.setStyle('width', width); + this.overlayEl.setStyle('width', width); + this.titleBarEl.setStyles({ + 'width': width - shadowBlur2x, + 'height': options.headerHeight + }); + + // Draw Window + if (this.options.useCanvas != false) { + this.canvasEl.height = height; + this.canvasEl.width = width; + + var ctx = this.canvasEl.getContext('2d'); + ctx.clearRect(0, 0, width, height); + + this.drawBoxCollapsed(ctx, width, height, shadowBlur, shadowOffset, shadows); + if (options.useCanvasControls == true) { + this.drawControls(width, height, shadows); + } + + // Invisible dummy object. The last element drawn is not rendered consistently while resizing in IE6 and IE7 + if (Browser.Engine.trident){ + MUI.triangle(ctx, 0, 0, 10, 10, options.resizableColor, 0); + } + } + + this.drawingWindow = false; + return this; + + }, + drawControls : function(width, height, shadows){ + var options = this.options; + var shadowBlur = options.shadowBlur; + var shadowOffset = options.shadowOffset; + var controlsOffset = options.controlsOffset; + + // Make sure controls are placed correctly. + this.controlsEl.setStyles({ + 'right': shadowBlur + shadowOffset.x + controlsOffset.right, + 'top': shadowBlur - shadowOffset.y + controlsOffset.top + }); + + this.canvasControlsEl.setStyles({ + 'right': shadowBlur + shadowOffset.x + controlsOffset.right, + 'top': shadowBlur - shadowOffset.y + controlsOffset.top + }); + + // Calculate X position for controlbuttons + //var mochaControlsWidth = 52; + this.closebuttonX = options.closable ? this.mochaControlsWidth - 7 : this.mochaControlsWidth + 12; + this.maximizebuttonX = this.closebuttonX - (options.maximizable ? 19 : 0); + this.minimizebuttonX = this.maximizebuttonX - (options.minimizable ? 19 : 0); + + var ctx2 = this.canvasControlsEl.getContext('2d'); + ctx2.clearRect(0, 0, 100, 100); + + if (this.options.closable){ + this.closebutton( + ctx2, + this.closebuttonX, + 7, + options.closeBgColor, + 1.0, + options.closeColor, + 1.0 + ); + } + if (this.options.maximizable){ + this.maximizebutton( + ctx2, + this.maximizebuttonX, + 7, + options.maximizeBgColor, + 1.0, + options.maximizeColor, + 1.0 + ); + } + if (this.options.minimizable){ + this.minimizebutton( + ctx2, + this.minimizebuttonX, + 7, + options.minimizeBgColor, + 1.0, + options.minimizeColor, + 1.0 + ); + } + // Invisible dummy object. The last element drawn is not rendered consistently while resizing in IE6 and IE7 + if (Browser.Engine.trident){ + MUI.circle(ctx2, 0, 0, 3, this.options.resizableColor, 0); + } + + }, + drawBox: function(ctx, width, height, shadowBlur, shadowOffset, shadows){ + + var options = this.options; + var shadowBlur2x = shadowBlur * 2; + var cornerRadius = this.options.cornerRadius; + + // This is the drop shadow. It is created onion style. + if ( shadows != false ) { + for (var x = 0; x <= shadowBlur; x++){ + MUI.roundedRect( + ctx, + shadowOffset.x + x, + shadowOffset.y + x, + width - (x * 2) - shadowOffset.x, + height - (x * 2) - shadowOffset.y, + cornerRadius + (shadowBlur - x), + [0, 0, 0], + x == shadowBlur ? .29 : .065 + (x * .01) + ); + } + } + // Window body. + this.bodyRoundedRect( + ctx, // context + shadowBlur - shadowOffset.x, // x + shadowBlur - shadowOffset.y, // y + width - shadowBlur2x, // width + height - shadowBlur2x, // height + cornerRadius, // corner radius + options.bodyBgColor // Footer color + ); + + if (this.options.type != 'notification'){ + // Window header. + this.topRoundedRect( + ctx, // context + shadowBlur - shadowOffset.x, // x + shadowBlur - shadowOffset.y, // y + width - shadowBlur2x, // width + options.headerHeight, // height + cornerRadius, // corner radius + options.headerStartColor, // Header gradient's top color + options.headerStopColor // Header gradient's bottom color + ); + } + }, + drawBoxCollapsed: function(ctx, width, height, shadowBlur, shadowOffset, shadows){ + + var options = this.options; + var shadowBlur2x = shadowBlur * 2; + var cornerRadius = options.cornerRadius; + + // This is the drop shadow. It is created onion style. + if ( shadows != false ){ + for (var x = 0; x <= shadowBlur; x++){ + MUI.roundedRect( + ctx, + shadowOffset.x + x, + shadowOffset.y + x, + width - (x * 2) - shadowOffset.x, + height - (x * 2) - shadowOffset.y, + cornerRadius + (shadowBlur - x), + [0, 0, 0], + x == shadowBlur ? .3 : .06 + (x * .01) + ); + } + } + + // Window header + this.topRoundedRect2( + ctx, // context + shadowBlur - shadowOffset.x, // x + shadowBlur - shadowOffset.y, // y + width - shadowBlur2x, // width + options.headerHeight + 2, // height + cornerRadius, // corner radius + options.headerStartColor, // Header gradient's top color + options.headerStopColor // Header gradient's bottom color + ); + + }, + drawGauge: function(ctx, width, height, shadowBlur, shadowOffset, shadows){ + var options = this.options; + var radius = (width * .5) - (shadowBlur) + 16; + if (shadows != false) { + for (var x = 0; x <= shadowBlur; x++){ + MUI.circle( + ctx, + width * .5 + shadowOffset.x, + (height + options.headerHeight) * .5 + shadowOffset.x, + (width *.5) - (x * 2) - shadowOffset.x, + [0, 0, 0], + x == shadowBlur ? .75 : .075 + (x * .04) + ); + } + } + MUI.circle( + ctx, + width * .5 - shadowOffset.x, + (height + options.headerHeight) * .5 - shadowOffset.y, + (width *.5) - shadowBlur, + options.bodyBgColor, + 1 + ); + + // Draw gauge header + this.canvasHeaderEl.setStyles({ + 'top': shadowBlur - shadowOffset.y, + 'left': shadowBlur - shadowOffset.x + }); + var ctx = this.canvasHeaderEl.getContext('2d'); + ctx.clearRect(0, 0, width, 100); + ctx.beginPath(); + ctx.lineWidth = 24; + ctx.lineCap = 'round'; + ctx.moveTo(13, 13); + ctx.lineTo(width - (shadowBlur*2) - 13, 13); + ctx.strokeStyle = 'rgba(0, 0, 0, .65)'; + ctx.stroke(); + }, + bodyRoundedRect: function(ctx, x, y, width, height, radius, rgb){ + ctx.fillStyle = 'rgba(' + rgb.join(',') + ', 1)'; + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.quadraticCurveTo(x, y + height, x + radius, y + height); + ctx.lineTo(x + width - radius, y + height); + ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); + ctx.lineTo(x + width, y + radius); + ctx.quadraticCurveTo(x + width, y, x + width - radius, y); + ctx.lineTo(x + radius, y); + ctx.quadraticCurveTo(x, y, x, y + radius); + ctx.fill(); + + }, + topRoundedRect: function(ctx, x, y, width, height, radius, headerStartColor, headerStopColor){ + var lingrad = ctx.createLinearGradient(0, 0, 0, height); + lingrad.addColorStop(0, 'rgb(' + headerStartColor.join(',') + ')'); + lingrad.addColorStop(1, 'rgb(' + headerStopColor.join(',') + ')'); + ctx.fillStyle = lingrad; + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x, y + height); + ctx.lineTo(x + width, y + height); + ctx.lineTo(x + width, y + radius); + ctx.quadraticCurveTo(x + width, y, x + width - radius, y); + ctx.lineTo(x + radius, y); + ctx.quadraticCurveTo(x, y, x, y + radius); + ctx.fill(); + + }, + topRoundedRect2: function(ctx, x, y, width, height, radius, headerStartColor, headerStopColor){ + // Chrome is having trouble rendering the LinearGradient in this particular case + if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { + ctx.fillStyle = 'rgba(' + headerStopColor.join(',') + ', 1)'; + } + else { + var lingrad = ctx.createLinearGradient(0, this.options.shadowBlur - 1, 0, height + this.options.shadowBlur + 3); + lingrad.addColorStop(0, 'rgb(' + headerStartColor.join(',') + ')'); + lingrad.addColorStop(1, 'rgb(' + headerStopColor.join(',') + ')'); + ctx.fillStyle = lingrad; + } + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.quadraticCurveTo(x, y + height, x + radius, y + height); + ctx.lineTo(x + width - radius, y + height); + ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); + ctx.lineTo(x + width, y + radius); + ctx.quadraticCurveTo(x + width, y, x + width - radius, y); + ctx.lineTo(x + radius, y); + ctx.quadraticCurveTo(x, y, x, y + radius); + ctx.fill(); + }, + maximizebutton: function(ctx, x, y, rgbBg, aBg, rgb, a){ + // Circle + ctx.beginPath(); + ctx.arc(x, y, 7, 0, Math.PI*2, true); + ctx.fillStyle = 'rgba(' + rgbBg.join(',') + ',' + aBg + ')'; + ctx.fill(); + // X sign + ctx.strokeStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(x, y - 3.5); + ctx.lineTo(x, y + 3.5); + ctx.moveTo(x - 3.5, y); + ctx.lineTo(x + 3.5, y); + ctx.stroke(); + }, + closebutton: function(ctx, x, y, rgbBg, aBg, rgb, a){ + // Circle + ctx.beginPath(); + ctx.arc(x, y, 7, 0, Math.PI*2, true); + ctx.fillStyle = 'rgba(' + rgbBg.join(',') + ',' + aBg + ')'; + ctx.fill(); + // Plus sign + ctx.strokeStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(x - 3, y - 3); + ctx.lineTo(x + 3, y + 3); + ctx.moveTo(x + 3, y - 3); + ctx.lineTo(x - 3, y + 3); + ctx.stroke(); + }, + minimizebutton: function(ctx, x, y, rgbBg, aBg, rgb, a){ + // Circle + ctx.beginPath(); + ctx.arc(x,y,7,0,Math.PI*2,true); + ctx.fillStyle = 'rgba(' + rgbBg.join(',') + ',' + aBg + ')'; + ctx.fill(); + // Minus sign + ctx.strokeStyle = 'rgba(' + rgb.join(',') + ',' + a + ')'; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(x - 3.5, y); + ctx.lineTo(x + 3.5, y); + ctx.stroke(); + }, + setMochaControlsWidth: function(){ + this.mochaControlsWidth = 0; + var options = this.options; + if (options.minimizable){ + this.mochaControlsWidth += (this.minimizeButtonEl.getStyle('margin-left').toInt() + this.minimizeButtonEl.getStyle('width').toInt()); + } + if (options.maximizable){ + this.mochaControlsWidth += (this.maximizeButtonEl.getStyle('margin-left').toInt() + this.maximizeButtonEl.getStyle('width').toInt()); + } + if (options.closable){ + this.mochaControlsWidth += (this.closeButtonEl.getStyle('margin-left').toInt() + this.closeButtonEl.getStyle('width').toInt()); + } + this.controlsEl.setStyle('width', this.mochaControlsWidth); + if (options.useCanvasControls == true){ + this.canvasControlsEl.setProperty('width', this.mochaControlsWidth); + } + }, + /* + + Function: hideSpinner + Hides the spinner. + + Example: + (start code) + $('myWindow').retrieve('instance').hideSpinner(); + (end) + + */ + hideSpinner: function() { + if (this.spinnerEl) this.spinnerEl.hide(); + return this; + }, + /* + + Function: showSpinner + Shows the spinner. + + Example: + (start code) + $('myWindow').retrieve('instance').showSpinner(); + (end) + + */ + showSpinner: function(){ + if (this.spinnerEl) this.spinnerEl.show(); + return this; + }, + /* + + Function: close + Closes the window. This is an alternative to using MUI.Core.closeWindow(). + + Example: + (start code) + $('myWindow').retrieve('instance').close(); + (end) + + */ + close: function( ) { + if (!this.isClosing) MUI.closeWindow(this.windowEl); + return this; + }, + /* + + Function: minimize + Minimizes the window. + + Example: + (start code) + $('myWindow').retrieve('instance').minimize(); + (end) + + */ + minimize: function( ){ + MUI.Dock.minimizeWindow(this.windowEl); + return this; + }, + /* + + Function: maximize + Maximizes the window. + + Example: + (start code) + $('myWindow').retrieve('instance').maximize(); + (end) + + */ + maximize: function( ) { + if (this.isMinimized){ + MUI.Dock.restoreMinimized(this.windowEl); + } + MUI.Desktop.maximizeWindow(this.windowEl); + return this; + }, + /* + + Function: restore + Restores a minimized/maximized window to its original size. + + Example: + (start code) + $('myWindow').retrieve('instance').restore(); + (end) + + */ + restore: function() { + if ( this.isMinimized ) + MUI.Dock.restoreMinimized(this.windowEl); + else if ( this.isMaximized ) + MUI.Desktop.restoreWindow(this.windowEl); + return this; + }, + /* + + Function: resize + Resize a window. + + Notes: + If Advanced Effects are on the resize is animated. If centered is set to true the window remains centered as it resizes. + + Example: + (start code) + $('myWindow').retrieve('instance').resize({width:500,height:300,centered:true}); + (end) + + */ + resize: function(options){ + MUI.resizeWindow(this.windowEl, options); + return this; + }, + /* + + Function: center + Center a window. + + Example: + (start code) + $('myWindow').retrieve('instance').center(); + (end) + + */ + center: function() { + MUI.centerWindow(this.windowEl); + return this; + }, + + hide: function(){ + this.windowEl.setStyle('display', 'none'); + return this; + }, + + show: function(){ + this.windowEl.setStyle('display', 'block'); + return this; + } + +}); + +MUI.extend({ + /* + + Function: closeWindow + Closes a window. + + Syntax: + (start code) + MUI.closeWindow(); + (end) + + Arguments: + windowEl - the ID of the window to be closed + + Returns: + true - the window was closed + false - the window was not closed + + */ + closeWindow: function(windowEl){ + + var instance = windowEl.retrieve('instance'); + + // Does window exist and is not already in process of closing ? + if (windowEl != $(windowEl) || instance.isClosing) return; + + instance.isClosing = true; + instance.fireEvent('onClose', windowEl); + + if (instance.options.storeOnClose){ + this.storeOnClose(instance, windowEl); + return; + } + if (instance.check) instance.check.destroy(); + + if ((instance.options.type == 'modal' || instance.options.type == 'modal2') && Browser.Engine.trident4){ + $('modalFix').hide(); + } + + if (MUI.options.advancedEffects == false){ + if (instance.options.type == 'modal' || instance.options.type == 'modal2'){ + $('modalOverlay').setStyle('opacity', 0); + } + MUI.closingJobs(windowEl); + return true; + } + else { + // Redraws IE windows without shadows since IE messes up canvas alpha when you change element opacity + if (Browser.Engine.trident) instance.drawWindow(false); + if (instance.options.type == 'modal' || instance.options.type == 'modal2'){ + MUI.Modal.modalOverlayCloseMorph.start({ + 'opacity': 0 + }); + } + var closeMorph = new Fx.Morph(windowEl, { + duration: 120, + onComplete: function(){ + MUI.closingJobs(windowEl); + return true; + }.bind(this) + }); + closeMorph.start({ + 'opacity': .4 + }); + } + + }, + closingJobs: function(windowEl){ + + var instances = MUI.Windows.instances; + var instance = instances.get(windowEl.id); + windowEl.setStyle('visibility', 'hidden'); + // Destroy throws an error in IE8 + if (Browser.Engine.trident) { + windowEl.dispose(); + } + else { + windowEl.destroy(); + } + instance.fireEvent('onCloseComplete'); + + if (instance.options.type != 'notification'){ + var newFocus = this.getWindowWithHighestZindex(); + this.focusWindow(newFocus); + } + + instances.erase(instance.options.id); + if (this.loadingWorkspace == true) { + this.windowUnload(); + } + + if (MUI.Dock && $(MUI.options.dock) && instance.options.type == 'window') { + var currentButton = $(instance.options.id + '_dockTab'); + if (currentButton != null) { + MUI.Dock.dockSortables.removeItems(currentButton).destroy(); + } + // Need to resize everything in case the dock becomes smaller when a tab is removed + MUI.Desktop.setDesktopSize(); + } + }, + storeOnClose: function(instance, windowEl){ + + if (instance.check) instance.check.hide(); + + windowEl.setStyles({ + zIndex: -1 + }); + windowEl.addClass('windowClosed'); + windowEl.removeClass('mocha'); + + if (MUI.Dock && $(MUI.options.dock) && instance.options.type == 'window') { + var currentButton = $(instance.options.id + '_dockTab'); + if (currentButton != null) { + currentButton.hide(); + } + MUI.Desktop.setDesktopSize(); + } + + instance.fireEvent('onCloseComplete'); + + if (instance.options.type != 'notification'){ + var newFocus = this.getWindowWithHighestZindex(); + this.focusWindow(newFocus); + } + + instance.isClosing = false; + + }, + /* + + Function: closeAll + Close all open windows. + + */ + closeAll: function() { + $$('.mocha').each(function(windowEl){ + this.closeWindow(windowEl); + }.bind(this)); + }, + /* + + Function: collapseToggle + Collapses an expanded window. Expands a collapsed window. + + */ + collapseToggle: function(windowEl){ + var instance = windowEl.retrieve('instance'); + var handles = windowEl.getElements('.handle'); + if (instance.isMaximized == true) return; + if (instance.isCollapsed == false) { + instance.isCollapsed = true; + handles.hide(); + if ( instance.iframeEl ) { + instance.iframeEl.setStyle('visibility', 'hidden'); + } + instance.contentBorderEl.setStyles({ + visibility: 'hidden', + position: 'absolute', + top: -10000, + left: -10000 + }); + if(instance.toolbarWrapperEl){ + instance.toolbarWrapperEl.setStyles({ + visibility: 'hidden', + position: 'absolute', + top: -10000, + left: -10000 + }); + } + instance.drawWindowCollapsed(); + } + else { + instance.isCollapsed = false; + instance.drawWindow(); + instance.contentBorderEl.setStyles({ + visibility: 'visible', + position: null, + top: null, + left: null + }); + if(instance.toolbarWrapperEl){ + instance.toolbarWrapperEl.setStyles({ + visibility: 'visible', + position: null, + top: null, + left: null + }); + } + if ( instance.iframeEl ) { + instance.iframeEl.setStyle('visibility', 'visible'); + } + handles.show(); + } + }, + /* + + Function: toggleWindowVisibility + Toggle window visibility with Ctrl-Alt-Q. + + */ + toggleWindowVisibility: function(){ + MUI.Windows.instances.each(function(instance){ + if (instance.options.type == 'modal' || instance.options.type == 'modal2' || instance.isMinimized == true) return; + var id = $(instance.options.id); + if (id.getStyle('visibility') == 'visible'){ + if (instance.iframe){ + instance.iframeEl.setStyle('visibility', 'hidden'); + } + if (instance.toolbarEl){ + instance.toolbarWrapperEl.setStyle('visibility', 'hidden'); + } + instance.contentBorderEl.setStyle('visibility', 'hidden'); + id.setStyle('visibility', 'hidden'); + MUI.Windows.windowsVisible = false; + } + else { + id.setStyle('visibility', 'visible'); + instance.contentBorderEl.setStyle('visibility', 'visible'); + if (instance.iframe){ + instance.iframeEl.setStyle('visibility', 'visible'); + } + if (instance.toolbarEl){ + instance.toolbarWrapperEl.setStyle('visibility', 'visible'); + } + MUI.Windows.windowsVisible = true; + } + }.bind(this)); + + }, + focusWindow: function(windowEl, fireEvent){ + + // This is used with blurAll + MUI.Windows.focusingWindow = true; + var windowClicked = function(){ + MUI.Windows.focusingWindow = false; + }; + windowClicked.delay(170, this); + + // Only focus when needed + if ($$('.mocha').length == 0) return; + if (windowEl != $(windowEl) || windowEl.hasClass('isFocused')) return; + + var instances = MUI.Windows.instances; + var instance = instances.get(windowEl.id); + + if (instance.options.type == 'notification'){ + windowEl.setStyle('zIndex', 11001); + return; + }; + + MUI.Windows.indexLevel += 2; + windowEl.setStyle('zIndex', MUI.Windows.indexLevel); + + // Used when dragging and resizing windows + $('windowUnderlay').setStyle('zIndex', MUI.Windows.indexLevel - 1).inject($(windowEl),'after'); + + // Fire onBlur for the window that lost focus. + instances.each(function(instance){ + if (instance.windowEl.hasClass('isFocused')){ + instance.fireEvent('onBlur', instance.windowEl); + } + instance.windowEl.removeClass('isFocused'); + }); + + if (MUI.Dock && $(MUI.options.dock) && instance.options.type == 'window') { + MUI.Dock.makeActiveTab(); + } + windowEl.addClass('isFocused'); + + if (fireEvent != false){ + instance.fireEvent('onFocus', windowEl); + } + + }, + getWindowWithHighestZindex: function(){ + this.highestZindex = 0; + $$('.mocha').each(function(element){ + this.zIndex = element.getStyle('zIndex'); + if (this.zIndex >= this.highestZindex) { + this.highestZindex = this.zIndex; + } + }.bind(this)); + $$('.mocha').each(function(element){ + if (element.getStyle('zIndex') == this.highestZindex) { + this.windowWithHighestZindex = element; + } + }.bind(this)); + return this.windowWithHighestZindex; + }, + blurAll: function(){ + if (MUI.Windows.focusingWindow == false) { + $$('.mocha').each(function(windowEl){ + var instance = windowEl.retrieve('instance'); + if (instance.options.type != 'modal' && instance.options.type != 'modal2'){ + windowEl.removeClass('isFocused'); + } + }); + $$('.dockTab').removeClass('activeDockTab'); + } + }, + centerWindow: function(windowEl){ + + if(!windowEl){ + MUI.Windows.instances.each(function(instance){ + if (instance.windowEl.hasClass('isFocused')){ + windowEl = instance.windowEl; + } + }); + } + + var instance = windowEl.retrieve('instance'); + var options = instance.options; + var dimensions = options.container.getCoordinates(); + + var windowPosTop = window.getScroll().y + (window.getSize().y * .5) - (windowEl.offsetHeight * .5); + if (windowPosTop < -instance.options.shadowBlur){ + windowPosTop = -instance.options.shadowBlur; + } + var windowPosLeft = (dimensions.width * .5) - (windowEl.offsetWidth * .5); + if (windowPosLeft < -instance.options.shadowBlur){ + windowPosLeft = -instance.options.shadowBlur; + } + if (MUI.options.advancedEffects == true){ + instance.morph.start({ + 'top': windowPosTop, + 'left': windowPosLeft + }); + } + else { + windowEl.setStyles({ + 'top': windowPosTop, + 'left': windowPosLeft + }); + } + }, + resizeWindow: function(windowEl, options){ + var instance = windowEl.retrieve('instance'); + + $extend({ + width: null, + height: null, + top: null, + left: null, + centered: true + }, options); + + var oldWidth = windowEl.getStyle('width').toInt(); + var oldHeight = windowEl.getStyle('height').toInt(); + var oldTop = windowEl.getStyle('top').toInt(); + var oldLeft = windowEl.getStyle('left').toInt(); + + if (options.centered){ + var top = options.top || oldTop - ((options.height - oldHeight) * .5); + var left = options.left || oldLeft - ((options.width - oldWidth) * .5); + } + else { + var top = options.top || oldTop; + var left = options.left || oldLeft; + } + + if (MUI.options.advancedEffects == false){ + windowEl.setStyles({ + 'top': top, + 'left': left + }); + instance.contentWrapperEl.setStyles({ + 'height': options.height, + 'width': options.width + }); + instance.drawWindow(); + // Show iframe + if (instance.iframeEl){ + if (!Browser.Engine.trident) { + instance.iframeEl.setStyle('visibility', 'visible'); + } + else { + instance.iframeEl.show(); + } + } + } + else { + windowEl.retrieve('resizeMorph').start({ + '0': { 'height': options.height, + 'width': options.width + }, + '1': { 'top': top, + 'left': left + } + }); + } + return instance; + }, + /* + + Internal Function: dynamicResize + Use with a timer to resize a window as the window's content size changes, such as with an accordian. + + */ + dynamicResize: function(windowEl){ + var instance = windowEl.retrieve('instance'); + var contentWrapperEl = instance.contentWrapperEl; + var contentEl = instance.contentEl; + + contentWrapperEl.setStyles({ + 'height': contentEl.offsetHeight, + 'width': contentEl.offsetWidth + }); + instance.drawWindow(); + } +}); + +// Toggle window visibility with Ctrl-Alt-Q +document.addEvent('keydown', function(event){ + if (event.key == 'q' && event.control && event.alt) { + MUI.toggleWindowVisibility(); + } +}); +/* + +Script: Modal.js + Create modal dialog windows. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js, Window.js + +See Also: + + +*/ + +MUI.files[MUI.path.source + 'Window/Modal.js'] = 'loaded'; + +MUI.Modal = new Class({ + + Extends: MUI.Window, + + options: { + type: 'modal' + }, + + initialize: function(options){ + + if (!$('modalOverlay')){ + this.modalInitialize(); + + window.addEvent('resize', function(){ + this.setModalSize(); + }.bind(this)); + } + this.parent(options); + + }, + modalInitialize: function(){ + var modalOverlay = new Element('div', { + 'id': 'modalOverlay', + 'styles': { + 'height': document.getCoordinates().height, + 'opacity': .6 + } + }).inject(document.body); + + modalOverlay.setStyles({ + 'position': Browser.Engine.trident4 ? 'absolute' : 'fixed' + }); + + modalOverlay.addEvent('click', function(e){ + var instance = MUI.Windows.instances.get(MUI.currentModal.id); + if (instance.options.modalOverlayClose == true) { + MUI.closeWindow(MUI.currentModal); + } + }); + + if (Browser.Engine.trident4){ + var modalFix = new Element('iframe', { + 'id': 'modalFix', + 'scrolling': 'no', + 'marginWidth': 0, + 'marginHeight': 0, + 'src': '', + 'styles': { + 'height': document.getCoordinates().height + } + }).inject(document.body); + } + + MUI.Modal.modalOverlayOpenMorph = new Fx.Morph($('modalOverlay'), { + 'duration': 150 + }); + MUI.Modal.modalOverlayCloseMorph = new Fx.Morph($('modalOverlay'), { + 'duration': 150, + onComplete: function(){ + $('modalOverlay').hide(); + if (Browser.Engine.trident4){ + $('modalFix').hide(); + } + }.bind(this) + }); + }, + setModalSize: function(){ + $('modalOverlay').setStyle('height', document.getCoordinates().height); + if (Browser.Engine.trident4){ + $('modalFix').setStyle('height', document.getCoordinates().height); + } + } + +}); +/* + +Script: Windows-from-html.js + Create windows from html markup in page. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js, Window.js + +Example: + HTML markup. + (start code) +
    +

    My Window

    +

    My Window Content

    +
    + (end) + +See Also: + + +*/ + +MUI.files[MUI.path.source + 'Window/Windows-from-html.js'] = 'loaded'; + +MUI.extend({ + NewWindowsFromHTML: function(){ + $$('.mocha').each(function(el) { + // Get the window title and destroy that element, so it does not end up in window content + if ( Browser.Engine.presto || Browser.Engine.trident5 ){ + el.hide(); // Required by Opera, and probably IE7 + } + var title = el.getElement('h3.mochaTitle'); + + if(Browser.Engine.presto) el.show(); + + var elDimensions = el.getStyles('height', 'width'); + var properties = { + id: el.getProperty('id'), + height: elDimensions.height.toInt(), + width: elDimensions.width.toInt(), + x: el.getStyle('left').toInt(), + y: el.getStyle('top').toInt() + }; + // If there is a title element, set title and destroy the element so it does not end up in window content + if ( title ) { + properties.title = title.innerHTML; + title.destroy(); + } + + // Get content and destroy the element + properties.content = el.innerHTML; + el.destroy(); + + // Create window + new MUI.Window(properties, true); + }.bind(this)); + } +}); +/* + +Script: Windows-from-json.js + Create one or more windows from JSON data. You can define all the same properties as you can for new MUI.Window(). Undefined properties are set to their defaults. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Syntax: + (start code) + MUI.newWindowsFromJSON(properties); + (end) + +Example: + (start code) + MUI.jsonWindows = function(){ + var url = 'data/json-windows-data.js'; + var request = new Request.JSON({ + url: url, + method: 'get', + onComplete: function(properties) { + MUI.newWindowsFromJSON(properties.windows); + } + }).send(); + } + (end) + +Note: + Windows created from JSON are not compatible with the current cookie based version + of Save and Load Workspace. + +See Also: + + +*/ + +MUI.files[MUI.path.source + 'Window/Windows-from-json.js'] = 'loaded'; + +MUI.extend({ + newWindowsFromJSON: function(newWindows){ + newWindows.each(function(options) { + var temp = new Hash(options); + temp.each( function(value, key, hash) { + if ($type(value) != 'string') return; + if (value.substring(0,8) == 'function'){ + eval("options." + key + " = " + value); + } + }); + new MUI.Window(options); + }); + } +}); +/* + +Script: Arrange-cascade.js + Cascade windows. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js, Window.js + +Syntax: + (start code) + MUI.arrangeCascade(); + (end) + +*/ + +MUI.files[MUI.path.source + 'Window/Arrange-cascade.js'] = 'loaded'; + +MUI.extend({ + arrangeCascade: function(){ + + var viewportTopOffset = 30; // Use a negative number if neccessary to place first window where you want it + var viewportLeftOffset = 20; + var windowTopOffset = 50; // Initial vertical spacing of each window + var windowLeftOffset = 40; + + // See how much space we have to work with + var coordinates = document.getCoordinates(); + + var openWindows = 0; + MUI.Windows.instances.each(function(instance){ + if (!instance.isMinimized && instance.options.draggable) openWindows ++; + }); + + if ((windowTopOffset * (openWindows + 1)) >= (coordinates.height - viewportTopOffset)) { + var topOffset = (coordinates.height - viewportTopOffset) / (openWindows + 1); + } + else { + var topOffset = windowTopOffset; + } + + if ((windowLeftOffset * (openWindows + 1)) >= (coordinates.width - viewportLeftOffset - 20)) { + var leftOffset = (coordinates.width - viewportLeftOffset - 20) / (openWindows + 1); + } + else { + var leftOffset = windowLeftOffset; + } + + var x = viewportLeftOffset; + var y = viewportTopOffset; + $$('.mocha').each(function(windowEl){ + var instance = windowEl.retrieve('instance'); + if (!instance.isMinimized && !instance.isMaximized && instance.options.draggable){ + id = windowEl.id; + MUI.focusWindow(windowEl); + x += leftOffset; + y += topOffset; + + if (MUI.options.advancedEffects == false){ + windowEl.setStyles({ + 'top': y, + 'left': x + }); + } + else { + var cascadeMorph = new Fx.Morph(windowEl, { + 'duration': 550 + }); + cascadeMorph.start({ + 'top': y, + 'left': x + }); + } + } + }.bind(this)); + } +}); +/* + +Script: Arrange-tile.js + Cascade windows. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +Authors: + Harry Roberts and Greg Houston + +License: + MIT-style license. + +Requires: + Core.js, Window.js + +Syntax: + (start code) + MUI.arrangeTile(); + (end) + +*/ + +MUI.files[MUI.path.source + 'Window/Arrange-tile.js'] = 'loaded'; + +MUI.extend({ + arrangeTile: function(){ + + var viewportTopOffset = 30; // Use a negative number if neccessary to place first window where you want it + var viewportLeftOffset = 20; + + var x = 10; + var y = 80; + + var instances = MUI.Windows.instances; + + var windowsNum = 0; + + instances.each(function(instance){ + if (!instance.isMinimized && !instance.isMaximized){ + windowsNum++; + } + }); + + var cols = 3; + var rows = Math.ceil(windowsNum / cols); + + var coordinates = document.getCoordinates(); + + var col_width = ((coordinates.width - viewportLeftOffset) / cols); + var col_height = ((coordinates.height - viewportTopOffset) / rows); + + var row = 0; + var col = 0; + + instances.each(function(instance){ + if (!instance.isMinimized && !instance.isMaximized && instance.options.draggable ){ + + var content = instance.contentWrapperEl; + var content_coords = content.getCoordinates(); + var window_coords = instance.windowEl.getCoordinates(); + + // Calculate the amount of padding around the content window + var padding_top = content_coords.top - window_coords.top; + var padding_bottom = window_coords.height - content_coords.height - padding_top; + var padding_left = content_coords.left - window_coords.left; + var padding_right = window_coords.width - content_coords.width - padding_left; + + /* + + // This resizes the windows + if (instance.options.shape != 'gauge' && instance.options.resizable == true){ + var width = (col_width - 3 - padding_left - padding_right); + var height = (col_height - 3 - padding_top - padding_bottom); + + if (width > instance.options.resizeLimit.x[0] && width < instance.options.resizeLimit.x[1]){ + content.setStyle('width', width); + } + if (height > instance.options.resizeLimit.y[0] && height < instance.options.resizeLimit.y[1]){ + content.setStyle('height', height); + } + + }*/ + + var left = (x + (col * col_width)); + var top = (y + (row * col_height)); + + instance.drawWindow(); + + MUI.focusWindow(instance.windowEl); + + if (MUI.options.advancedEffects == false){ + instance.windowEl.setStyles({ + 'top': top, + 'left': left + }); + } + else { + var tileMorph = new Fx.Morph(instance.windowEl, { + 'duration': 550 + }); + tileMorph.start({ + 'top': top, + 'left': left + }); + } + + if (++col === cols) { + row++; + col = 0; + } + } + }.bind(this)); + } +}); +/* + +Script: Tabs.js + Functionality for window tabs. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js, Window.js (for tabbed windows) or Layout.js (for tabbed panels) + +*/ + +MUI.files[MUI.path.source + 'Components/Tabs.js'] = 'loaded'; + +MUI.extend({ + /* + + Function: initializeTabs + Add click event to each list item that fires the selected function. + + */ + initializeTabs: function(el){ + $(el).setStyle('list-style', 'none'); // This is to fix a glitch that occurs in IE8 RC1 when dynamically switching themes + $(el).getElements('li').addEvent('click', function(e){ + MUI.selected(this, el); + }); + }, + /* + + Function: selected + Add "selected" class to current list item and remove it from sibling list items. + + Syntax: + (start code) + selected(el, parent); + (end) + + Arguments: + el - the list item + parent - the ul + + */ + selected: function(el, parent){ + $(parent).getChildren().each(function(listitem){ + listitem.removeClass('selected'); + }); + el.addClass('selected'); + } +}); + +/* + +Script: Layout.js + Create web application layouts. Enables window maximize. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js + +*/ + +MUI.files[MUI.path.source + 'Layout/Layout.js'] = 'loaded'; + +MUI.extend({ + Columns: { + instances: new Hash(), + columnIDCount: 0 // Used for columns without an ID defined by the user + }, + Panels: { + instances: new Hash(), + panelIDCount: 0 // Used for panels without an ID defined by the user + } +}); + +MUI.Desktop = { + + options: { + // Naming options: + // If you change the IDs of the MochaUI Desktop containers in your HTML, you need to change them here as well. + desktop: 'desktop', + desktopHeader: 'desktopHeader', + desktopFooter: 'desktopFooter', + desktopNavBar: 'desktopNavbar', + pageWrapper: 'pageWrapper', + page: 'page', + desktopFooter: 'desktopFooterWrapper' + }, + initialize: function(){ + + this.desktop = $(this.options.desktop); + this.desktopHeader = $(this.options.desktopHeader); + this.desktopNavBar = $(this.options.desktopNavBar); + this.pageWrapper = $(this.options.pageWrapper); + this.page = $(this.options.page); + this.desktopFooter = $(this.options.desktopFooter); + + if (this.desktop) { + ($$('body')).setStyles({ + overflow: 'hidden', + height: '100%', + margin: 0 + }); + ($$('html')).setStyles({ + overflow: 'hidden', + height: '100%' + }); + } + + // This is run on dock initialize so no need to do it twice. + if (!MUI.Dock){ + this.setDesktopSize(); + } + this.menuInitialize(); + + // Resize desktop, page wrapper, modal overlay, and maximized windows when browser window is resized + window.addEvent('resize', function(e){ + this.onBrowserResize(); + }.bind(this)); + + if (MUI.myChain){ + MUI.myChain.callChain(); + } + + }, + menuInitialize: function(){ + // Fix for dropdown menus in IE6 + if (Browser.Engine.trident4 && this.desktopNavBar){ + this.desktopNavBar.getElements('li').each(function(element) { + element.addEvent('mouseenter', function(){ + this.addClass('ieHover'); + }); + element.addEvent('mouseleave', function(){ + this.removeClass('ieHover'); + }); + }); + }; + }, + onBrowserResize: function(){ + this.setDesktopSize(); + // Resize maximized windows to fit new browser window size + setTimeout( function(){ + MUI.Windows.instances.each(function(instance){ + if (instance.isMaximized){ + + // Hide iframe while resize for better performance + if ( instance.iframeEl ){ + instance.iframeEl.setStyle('visibility', 'hidden'); + } + + var coordinates = document.getCoordinates(); + var borderHeight = instance.contentBorderEl.getStyle('border-top').toInt() + instance.contentBorderEl.getStyle('border-bottom').toInt(); + var toolbarHeight = instance.toolbarWrapperEl ? instance.toolbarWrapperEl.getStyle('height').toInt() + instance.toolbarWrapperEl.getStyle('border-top').toInt() : 0; + instance.contentWrapperEl.setStyles({ + 'height': coordinates.height - instance.options.headerHeight - instance.options.footerHeight - borderHeight - toolbarHeight, + 'width': coordinates.width + }); + + instance.drawWindow(); + if ( instance.iframeEl ){ + instance.iframeEl.setStyles({ + 'height': instance.contentWrapperEl.getStyle('height') + }); + instance.iframeEl.setStyle('visibility', 'visible'); + } + + } + }.bind(this)); + }.bind(this), 100); + }, + setDesktopSize: function(){ + var windowDimensions = window.getCoordinates(); + + // var dock = $(MUI.options.dock); + var dockWrapper = $(MUI.options.dockWrapper); + + // Setting the desktop height may only be needed by IE7 + if (this.desktop){ + this.desktop.setStyle('height', windowDimensions.height); + } + + // Set pageWrapper height so the dock doesn't cover the pageWrapper scrollbars. + if (this.pageWrapper) { + var dockOffset = MUI.dockVisible ? dockWrapper.offsetHeight : 0; + var pageWrapperHeight = windowDimensions.height; + pageWrapperHeight -= this.pageWrapper.getStyle('border-top').toInt(); + pageWrapperHeight -= this.pageWrapper.getStyle('border-bottom').toInt(); + if (this.desktopHeader){ pageWrapperHeight -= this.desktopHeader.offsetHeight; } + if (this.desktopFooter){ pageWrapperHeight -= this.desktopFooter.offsetHeight; } + pageWrapperHeight -= dockOffset; + + if (pageWrapperHeight < 0){ + pageWrapperHeight = 0; + } + this.pageWrapper.setStyle('height', pageWrapperHeight); + } + + if (MUI.Columns.instances.getKeys().length > 0){ // Conditional is a fix for a bug in IE6 in the no toolbars demo. + MUI.Desktop.resizePanels(); + } + }, + resizePanels: function(){ + MUI.panelHeight(); + MUI.rWidth(); + }, + /* + + Function: maximizeWindow + Maximize a window. + + Syntax: + (start code) + MUI.Desktop.maximizeWindow(windowEl); + (end) + + */ + maximizeWindow: function(windowEl){ + + var instance = MUI.Windows.instances.get(windowEl.id); + var options = instance.options; + var windowDrag = instance.windowDrag; + + // If window no longer exists or is maximized, stop + if (windowEl != $(windowEl) || instance.isMaximized ) return; + + if (instance.isCollapsed){ + MUI.collapseToggle(windowEl); + } + + instance.isMaximized = true; + + // If window is restricted to a container, it should not be draggable when maximized. + if (instance.options.restrict){ + windowDrag.detach(); + if (options.resizable) { + instance.detachResizable(); + } + instance.titleBarEl.setStyle('cursor', 'default'); + } + + // If the window has a container that is not the desktop + // temporarily move the window to the desktop while it is minimized. + if (options.container != this.desktop){ + this.desktop.grab(windowEl); + if (this.options.restrict){ + windowDrag.container = this.desktop; + } + } + + // Save original position + instance.oldTop = windowEl.getStyle('top'); + instance.oldLeft = windowEl.getStyle('left'); + + var contentWrapperEl = instance.contentWrapperEl; + + // Save original dimensions + contentWrapperEl.oldWidth = contentWrapperEl.getStyle('width'); + contentWrapperEl.oldHeight = contentWrapperEl.getStyle('height'); + + // Hide iframe + // Iframe should be hidden when minimizing, maximizing, and moving for performance and Flash issues + if ( instance.iframeEl ) { + if (!Browser.Engine.trident) { + instance.iframeEl.setStyle('visibility', 'hidden'); + } + else { + instance.iframeEl.hide(); + } + } + + var windowDimensions = document.getCoordinates(); + var options = instance.options; + var shadowBlur = options.shadowBlur; + var shadowOffset = options.shadowOffset; + var newHeight = windowDimensions.height - options.headerHeight - options.footerHeight; + newHeight -= instance.contentBorderEl.getStyle('border-top').toInt(); + newHeight -= instance.contentBorderEl.getStyle('border-bottom').toInt(); + newHeight -= (instance.toolbarWrapperEl ? instance.toolbarWrapperEl.getStyle('height').toInt() + instance.toolbarWrapperEl.getStyle('border-top').toInt() : 0); + + MUI.resizeWindow(windowEl, { + width: windowDimensions.width, + height: newHeight, + top: shadowOffset.y - shadowBlur, + left: shadowOffset.x - shadowBlur + }); + instance.fireEvent('onMaximize', windowEl); + + if (instance.maximizeButtonEl) { + instance.maximizeButtonEl.setProperty('title', 'Restore'); + } + MUI.focusWindow(windowEl); + + }, + /* + + Function: restoreWindow + Restore a maximized window. + + Syntax: + (start code) + MUI.Desktop.restoreWindow(windowEl); + (end) + + */ + restoreWindow: function(windowEl){ + + var instance = windowEl.retrieve('instance'); + + // Window exists and is maximized ? + if (windowEl != $(windowEl) || !instance.isMaximized) return; + + var options = instance.options; + instance.isMaximized = false; + + if (options.restrict){ + instance.windowDrag.attach(); + if (options.resizable){ + instance.reattachResizable(); + } + instance.titleBarEl.setStyle('cursor', 'move'); + } + + // Hide iframe + // Iframe should be hidden when minimizing, maximizing, and moving for performance and Flash issues + if ( instance.iframeEl ) { + if (!Browser.Engine.trident) { + instance.iframeEl.setStyle('visibility', 'hidden'); + } + else { + instance.iframeEl.hide(); + } + } + + var contentWrapperEl = instance.contentWrapperEl; + + MUI.resizeWindow(windowEl,{ + width: contentWrapperEl.oldWidth, + height: contentWrapperEl.oldHeight, + top: instance.oldTop, + left: instance.oldLeft + }); + instance.fireEvent('onRestore', windowEl); + + if (instance.maximizeButtonEl){ + instance.maximizeButtonEl.setProperty('title', 'Maximize'); + } + } +}; + +/* + +Class: Column + Create a column. Columns should be created from left to right. + +Syntax: +(start code) + MUI.Column(); +(end) + +Arguments: + options + +Options: + id - The ID of the column. This must be set when creating the column. + container - Defaults to MUI.Desktop.pageWrapper. + placement - Can be 'right', 'main', or 'left'. There must be at least one column with the 'main' option. + width - 'main' column is fluid and should not be given a width. + resizeLimit - resizelimit of a 'right' or 'left' column. + sortable - (boolean) Whether the panels can be reordered via drag and drop. + onResize - (function) Fired when the column is resized. + onCollapse - (function) Fired when the column is collapsed. + onExpand - (function) Fired when the column is expanded. + +*/ +MUI.Column = new Class({ + + Implements: [Events, Options], + + options: { + id: null, + container: null, + placement: null, + width: null, + resizeLimit: [], + sortable: true, + + // Events + onResize: $empty, + onCollapse: $empty, + onExpand: $empty + + }, + + initialize: function(options){ + this.setOptions(options); + + $extend(this, { + timestamp: $time(), + isCollapsed: false, + oldWidth: 0 + }); + + // If column has no ID, give it one. + if (this.options.id == null){ + this.options.id = 'column' + (++MUI.Columns.columnIDCount); + } + + // Shorten object chain + var options = this.options; + var instances = MUI.Columns.instances; + var instanceID = instances.get(options.id); + + if (options.container == null) { + options.container = MUI.Desktop.pageWrapper + } + else { + $(options.container).setStyle('overflow', 'hidden'); + } + + if (typeof this.options.container == 'string'){ + this.options.container = $(this.options.container); + } + + // Check to see if there is already a class instance for this Column + if (instanceID){ + var instance = instanceID; + } + + // Check if column already exists + if ( this.columnEl ){ + return; + } + else { + instances.set(options.id, this); + } + + // If loading columns into a panel, hide the regular content container. + if ($(options.container).getElement('.pad') != null) { + $(options.container).getElement('.pad').hide(); + } + + // If loading columns into a window, hide the regular content container. + if ($(options.container).getElement('.mochaContent') != null) { + $(options.container).getElement('.mochaContent').hide(); + } + + this.columnEl = new Element('div', { + 'id': this.options.id, + 'class': 'column expanded', + 'styles': { + 'width': options.placement == 'main' ? null : options.width + } + }).inject($(options.container)); + + this.columnEl.store('instance', this); + + var parent = this.columnEl.getParent(); + var columnHeight = parent.getStyle('height').toInt(); + this.columnEl.setStyle('height', columnHeight); + + if (this.options.sortable){ + if (!this.options.container.retrieve('sortables')){ + var sortables = new Sortables(this.columnEl, { + opacity: 1, + handle: '.panel-header', + constrain: false, + revert: false, + onSort: function(){ + $$('.column').each(function(column){ + column.getChildren('.panelWrapper').each(function(panelWrapper){ + panelWrapper.getElement('.panel').removeClass('bottomPanel'); + }); + if (column.getChildren('.panelWrapper').getLast()){ + column.getChildren('.panelWrapper').getLast().getElement('.panel').addClass('bottomPanel'); + } + MUI.panelHeight(); + }.bind(this)); + }.bind(this) + }); + this.options.container.store('sortables', sortables); + } + else { + this.options.container.retrieve('sortables').addLists(this.columnEl); + } + } + + if (options.placement == 'main'){ + this.columnEl.addClass('rWidth'); + } + + switch (this.options.placement) { + case 'left': + this.handleEl = new Element('div', { + 'id': this.options.id + '_handle', + 'class': 'columnHandle' + }).inject(this.columnEl, 'after'); + + this.handleIconEl = new Element('div', { + 'id': options.id + '_handle_icon', + 'class': 'handleIcon' + }).inject(this.handleEl); + + addResizeRight(this.columnEl, options.resizeLimit[0], options.resizeLimit[1]); + break; + case 'right': + this.handleEl = new Element('div', { + 'id': this.options.id + '_handle', + 'class': 'columnHandle' + }).inject(this.columnEl, 'before'); + + this.handleIconEl = new Element('div', { + 'id': options.id + '_handle_icon', + 'class': 'handleIcon' + }).inject(this.handleEl); + addResizeLeft(this.columnEl, options.resizeLimit[0], options.resizeLimit[1]); + break; + } + + if (this.handleEl != null){ + this.handleEl.addEvent('dblclick', function(){ + this.columnToggle(); + }.bind(this)); + } + + MUI.rWidth(); + + }, + columnToggle: function(){ + var column = this.columnEl; + + // Collapse + if (this.isCollapsed == false){ + this.oldWidth = column.getStyle('width').toInt(); + + this.resize.detach(); + this.handleEl.removeEvents('dblclick'); + this.handleEl.addEvent('click', function(){ + this.columnToggle(); + }.bind(this)); + this.handleEl.setStyle('cursor', 'pointer').addClass('detached'); + + column.setStyle('width', 0); + this.isCollapsed = true; + column.addClass('collapsed'); + column.removeClass('expanded'); + MUI.rWidth(); + this.fireEvent('onCollapse'); + } + // Expand + else { + column.setStyle('width', this.oldWidth); + this.isCollapsed = false; + column.addClass('expanded'); + column.removeClass('collapsed'); + + this.handleEl.removeEvents('click'); + this.handleEl.addEvent('dblclick', function(){ + this.columnToggle(); + }.bind(this)); + this.resize.attach(); + this.handleEl.setStyle('cursor', Browser.Engine.webkit ? 'col-resize' : 'e-resize').addClass('attached'); + + MUI.rWidth(); + this.fireEvent('onExpand'); + } + } +}); +MUI.Column.implement(new Options, new Events); + +/* + +Class: Panel + Create a panel. Panels go one on top of another in columns. Create your columns first and then add your panels. Panels should be created from top to bottom, left to right. + +Syntax: +(start code) + MUI.Panel(); +(end) + +Arguments: + options + +Options: + id - The ID of the panel. This must be set when creating the panel. + column - Where to inject the panel. This must be set when creating the panel. + loadMethod - ('html', 'xhr', or 'iframe') Defaults to 'html' if there is no contentURL. Defaults to 'xhr' if there is a contentURL. You only really need to set this if using the 'iframe' method. May create a 'panel' loadMethod in the future. + contentURL - Used if loadMethod is set to 'xhr' or 'iframe'. + method - ('get', or 'post') The method used to get the data. Defaults to 'get'. + data - (hash) Data to send with the URL. Defaults to null. + evalScripts - (boolean) An xhr loadMethod option. Defaults to true. + evalResponse - (boolean) An xhr loadMethod option. Defaults to false. + content - (string or element) An html loadMethod option. + tabsURL - (url) + tabsData - (hash) Data to send with the URL. Defaults to null. + tabsOnload - (function) + header - (boolean) Display the panel header or not + headerToolbox: (boolean) + headerToolboxURL: (url) + headerToolboxOnload: (function) + height - (number) Height of content area. + addClass - (string) Add a class to the panel. + scrollbars - (boolean) + padding - (object) + collapsible - (boolean) + onBeforeBuild - (function) Fired before the panel is created. + onContentLoaded - (function) Fired after the panel's conten is loaded. + onResize - (function) Fired when the panel is resized. + onCollapse - (function) Fired when the panel is collapsed. + onExpand - (function) Fired when the panel is expanded. + +*/ +MUI.Panel = new Class({ + + Implements: [Events, Options], + + options: { + id: null, + title: 'New Panel', + column: null, + require: { + css: [], + images: [], + js: [], + onload: null + }, + loadMethod: null, + contentURL: null, + + // xhr options + method: 'get', + data: null, + evalScripts: true, + evalResponse: false, + + // html options + content: 'Panel content', + + // Tabs + tabsURL: null, + tabsData: null, + tabsOnload: $empty, + + header: true, + headerToolbox: false, + headerToolboxURL: 'pages/lipsum.html', + headerToolboxOnload: $empty, + + // Style options: + height: 125, + addClass: '', + scrollbars: true, + padding: { top: 8, right: 8, bottom: 8, left: 8 }, + + // Other: + collapsible: true, + + // Events + onBeforeBuild: $empty, + onContentLoaded: $empty, + onResize: $empty, + onCollapse: $empty, + onExpand: $empty + + }, + initialize: function(options){ + this.setOptions(options); + + $extend(this, { + timestamp: $time(), + isCollapsed: false, // This is probably redundant since we can check for the class + oldHeight: 0, + partner: null + }); + + // If panel has no ID, give it one. + if (this.options.id == null){ + this.options.id = 'panel' + (++MUI.Panels.panelIDCount); + } + + // Shorten object chain + var instances = MUI.Panels.instances; + var instanceID = instances.get(this.options.id); + var options = this.options; + + // Check to see if there is already a class instance for this panel + if (instanceID){ + var instance = instanceID; + } + + // Check if panel already exists + if ( this.panelEl ){ + return; + } + else { + instances.set(this.options.id, this); + } + + this.fireEvent('onBeforeBuild'); + + if (options.loadMethod == 'iframe') { + // Iframes have their own padding. + options.padding = { top: 0, right: 0, bottom: 0, left: 0 }; + } + + this.showHandle = true; + if ($(options.column).getChildren().length == 0) { + this.showHandle = false; + } + + this.panelWrapperEl = new Element('div', { + 'id': this.options.id + '_wrapper', + 'class': 'panelWrapper expanded' + }).inject($(options.column)); + + this.panelEl = new Element('div', { + 'id': this.options.id, + 'class': 'panel expanded', + 'styles': { + 'height': options.height + } + }).inject(this.panelWrapperEl); + + this.panelEl.store('instance', this); + + this.panelEl.addClass(options.addClass); + + this.contentEl = new Element('div', { + 'id': options.id + '_pad', + 'class': 'pad' + }).inject(this.panelEl); + + // This is in order to use the same variable as the windows do in updateContent. + // May rethink this. + this.contentWrapperEl = this.panelEl; + + this.contentEl.setStyles({ + 'padding-top': options.padding.top, + 'padding-bottom': options.padding.bottom, + 'padding-left': options.padding.left, + 'padding-right': options.padding.right + }); + + this.panelHeaderEl = new Element('div', { + 'id': this.options.id + '_header', + 'class': 'panel-header', + 'styles': { + 'display': options.header ? 'block' : 'none' + } + }).inject(this.panelEl, 'before'); + + var columnInstances = MUI.Columns.instances; + var columnInstance = columnInstances.get(this.options.column); + + if (columnInstance.options.sortable){ + this.panelHeaderEl.setStyle('cursor', 'move'); + columnInstance.options.container.retrieve('sortables').addItems(this.panelWrapperEl); + } + + if (this.options.collapsible) { + this.collapseToggleInit(); + } + + if (this.options.headerToolbox) { + this.panelHeaderToolboxEl = new Element('div', { + 'id': options.id + '_headerToolbox', + 'class': 'panel-header-toolbox' + }).inject(this.panelHeaderEl); + } + + this.panelHeaderContentEl = new Element('div', { + 'id': options.id + '_headerContent', + 'class': 'panel-headerContent' + }).inject(this.panelHeaderEl); + + this.titleEl = new Element('h2', { + 'id': options.id + '_title' + }).inject(this.panelHeaderContentEl); + + this.handleEl = new Element('div', { + 'id': options.id + '_handle', + 'class': 'horizontalHandle', + 'styles': { + 'display': this.showHandle == true ? 'block' : 'none' + } + }).inject(this.panelEl, 'after'); + + this.handleIconEl = new Element('div', { + 'id': options.id + '_handle_icon', + 'class': 'handleIcon' + }).inject(this.handleEl); + + addResizeBottom(options.id); + + if (options.require.css.length || options.require.images.length){ + new MUI.Require({ + css: options.require.css, + images: options.require.images, + onload: function(){ + this.newPanel(); + }.bind(this) + }); + } + else { + this.newPanel(); + } + }, + newPanel: function(){ + + options = this.options; + + if (this.options.headerToolbox) { + MUI.updateContent({ + 'element': this.panelEl, + 'childElement': this.panelHeaderToolboxEl, + 'loadMethod': 'xhr', + 'url': options.headerToolboxURL, + 'onContentLoaded': options.headerToolboxOnload + }); + } + + if (options.tabsURL == null) { + this.titleEl.set('html', options.title); + } else { + this.panelHeaderContentEl.addClass('tabs'); + MUI.updateContent({ + 'element': this.panelEl, + 'childElement': this.panelHeaderContentEl, + 'loadMethod': 'xhr', + 'url': options.tabsURL, + 'data': options.tabsData, + 'onContentLoaded': options.tabsOnload + }); + } + + // Add content to panel. + MUI.updateContent({ + 'element': this.panelEl, + 'content': options.content, + 'method': options.method, + 'data': options.data, + 'url': options.contentURL, + 'onContentLoaded': null, + 'require': { + js: options.require.js, + onload: options.require.onload + } + }); + + // Do this when creating and removing panels + $(options.column).getChildren('.panelWrapper').each(function(panelWrapper){ + panelWrapper.getElement('.panel').removeClass('bottomPanel'); + }); + $(options.column).getChildren('.panelWrapper').getLast().getElement('.panel').addClass('bottomPanel'); + + MUI.panelHeight(options.column, this.panelEl, 'new'); + + }, + collapseToggleInit: function(options){ + + var options = this.options; + + this.panelHeaderCollapseBoxEl = new Element('div', { + 'id': options.id + '_headerCollapseBox', + 'class': 'toolbox' + }).inject(this.panelHeaderEl); + + if (options.headerToolbox) { + this.panelHeaderCollapseBoxEl.addClass('divider'); + } + + this.collapseToggleEl = new Element('div', { + 'id': options.id + '_collapseToggle', + 'class': 'panel-collapse icon16', + 'styles': { + 'width': 16, + 'height': 16 + }, + 'title': 'Collapse Panel' + }).inject(this.panelHeaderCollapseBoxEl); + + this.collapseToggleEl.addEvent('click', function(event){ + var panel = this.panelEl; + var panelWrapper = this.panelWrapperEl + + // Get siblings and make sure they are not all collapsed. + // If they are all collapsed and the current panel is collapsing + // Then collapse the column. + var instances = MUI.Panels.instances; + var expandedSiblings = []; + + panelWrapper.getAllPrevious('.panelWrapper').each(function(sibling){ + var instance = instances.get(sibling.getElement('.panel').id); + if (instance.isCollapsed == false){ + expandedSiblings.push(sibling.getElement('.panel').id); + } + }); + + panelWrapper.getAllNext('.panelWrapper').each(function(sibling){ + var instance = instances.get(sibling.getElement('.panel').id); + if (instance.isCollapsed == false){ + expandedSiblings.push(sibling.getElement('.panel').id); + } + }); + + // Collapse Panel + if (this.isCollapsed == false) { + var currentColumn = MUI.Columns.instances.get($(options.column).id); + + if (expandedSiblings.length == 0 && currentColumn.options.placement != 'main'){ + var currentColumn = MUI.Columns.instances.get($(options.column).id); + currentColumn.columnToggle(); + return; + } + else if (expandedSiblings.length == 0 && currentColumn.options.placement == 'main'){ + return; + } + this.oldHeight = panel.getStyle('height').toInt(); + if (this.oldHeight < 10) this.oldHeight = 20; + this.contentEl.setStyle('position', 'absolute'); // This is so IE6 and IE7 will collapse the panel all the way + panel.setStyle('height', 0); + this.isCollapsed = true; + panelWrapper.addClass('collapsed'); + panelWrapper.removeClass('expanded'); + MUI.panelHeight(options.column, panel, 'collapsing'); + MUI.panelHeight(); // Run this a second time for panels within panels + this.collapseToggleEl.removeClass('panel-collapsed'); + this.collapseToggleEl.addClass('panel-expand'); + this.collapseToggleEl.setProperty('title','Expand Panel'); + this.fireEvent('onCollapse'); + } + + // Expand Panel + else { + this.contentEl.setStyle('position', null); // This is so IE6 and IE7 will collapse the panel all the way + panel.setStyle('height', this.oldHeight); + this.isCollapsed = false; + panelWrapper.addClass('expanded'); + panelWrapper.removeClass('collapsed'); + MUI.panelHeight(this.options.column, panel, 'expanding'); + MUI.panelHeight(); // Run this a second time for panels within panels + this.collapseToggleEl.removeClass('panel-expand'); + this.collapseToggleEl.addClass('panel-collapsed'); + this.collapseToggleEl.setProperty('title','Collapse Panel'); + this.fireEvent('onExpand'); + } + }.bind(this)); + } +}); +MUI.Panel.implement(new Options, new Events); + +/* + arguments: + column - The column to resize the panels in + changing - The panel that is collapsing, expanding, or new + action - collapsing, expanding, or new + +*/ + +MUI.extend({ + // Panel Height + panelHeight: function(column, changing, action){ + if (column != null) { + MUI.panelHeight2($(column), changing, action); + } + else { + $$('.column').each(function(column){ + MUI.panelHeight2(column); + }.bind(this)); + } + }, + /* + + actions can be new, collapsing or expanding. + + */ + panelHeight2: function(column, changing, action){ + + var instances = MUI.Panels.instances; + + var parent = column.getParent(); + var columnHeight = parent.getStyle('height').toInt(); + if (Browser.Engine.trident4 && parent == MUI.Desktop.pageWrapper) { + columnHeight -= 1; + } + column.setStyle('height', columnHeight); + + // Get column panels + var panels = []; + column.getChildren('.panelWrapper').each( function(panelWrapper){ + panels.push(panelWrapper.getElement('.panel')); + }.bind(this)); + + // Get expanded column panels + var panelsExpanded = []; + column.getChildren('.expanded').each( function(panelWrapper){ + panelsExpanded.push(panelWrapper.getElement('.panel')); + }.bind(this)); + + // All the panels in the column whose height will be effected. + var panelsToResize = []; + + // The panel with the greatest height. Remainders will be added to this panel + var tallestPanel; + var tallestPanelHeight = 0; + + this.panelsTotalHeight = 0; // Height of all the panels in the column + this.height = 0; // Height of all the elements in the column + + // Set panel resize partners + panels.each(function(panel){ + instance = instances.get(panel.id); + if (panel.getParent().hasClass('expanded') && panel.getParent().getNext('.expanded')) { + instance.partner = panel.getParent().getNext('.expanded').getElement('.panel'); + instance.resize.attach(); + instance.handleEl.setStyles({ + 'display': 'block', + 'cursor': Browser.Engine.webkit ? 'row-resize' : 'n-resize' + }).removeClass('detached'); + } else { + instance.resize.detach(); + instance.handleEl.setStyles({ + 'display': 'none', + 'cursor': null + }).addClass('detached'); + } + if (panel.getParent().getNext('.panelWrapper') == null) { + instance.handleEl.hide(); + } + }.bind(this)); + + // Add panels to panelsToResize + // Get the total height of all the resizable panels + // Get the total height of all the column's children + column.getChildren().each(function(panelWrapper){ + + panelWrapper.getChildren().each(function(el){ + + if (el.hasClass('panel')){ + var instance = instances.get(el.id); + + // Are any next siblings Expanded? + anyNextSiblingsExpanded = function(el){ + var test; + el.getParent().getAllNext('.panelWrapper').each(function(sibling){ + var siblingInstance = instances.get(sibling.getElement('.panel').id); + if (siblingInstance.isCollapsed == false){ + test = true; + } + }.bind(this)); + return test; + }.bind(this); + + // If a next sibling is expanding, are any of the nexts siblings of the expanding sibling Expanded? + anyExpandingNextSiblingsExpanded = function(el){ + var test; + changing.getParent().getAllNext('.panelWrapper').each(function(sibling){ + var siblingInstance = instances.get(sibling.getElement('.panel').id); + if (siblingInstance.isCollapsed == false){ + test = true; + } + }.bind(this)); + return test; + }.bind(this); + + // Is the panel that is collapsing, expanding, or new located after this panel? + anyNextContainsChanging = function(el){ + var allNext = []; + el.getParent().getAllNext('.panelWrapper').each(function(panelWrapper){ + allNext.push(panelWrapper.getElement('.panel')); + }.bind(this)); + var test = allNext.contains(changing); + return test; + }.bind(this); + + nextExpandedChanging = function(el){ + var test; + if (el.getParent().getNext('.expanded')){ + if (el.getParent().getNext('.expanded').getElement('.panel') == changing) test = true; + } + return test; + } + + // NEW PANEL + // Resize panels that are "new" or not collapsed + if (action == 'new') { + if (!instance.isCollapsed && el != changing) { + panelsToResize.push(el); + this.panelsTotalHeight += el.offsetHeight.toInt(); + } + } + + // COLLAPSING PANELS and CURRENTLY EXPANDED PANELS + // Resize panels that are not collapsed. + // If a panel is collapsing resize any expanded panels below. + // If there are no expanded panels below it, resize the expanded panels above it. + else if (action == null || action == 'collapsing' ){ + if (!instance.isCollapsed && (!anyNextContainsChanging(el) || !anyNextSiblingsExpanded(el))){ + panelsToResize.push(el); + this.panelsTotalHeight += el.offsetHeight.toInt(); + } + } + + // EXPANDING PANEL + // Resize panels that are not collapsed and are not expanding. + // Resize any expanded panels below the expanding panel. + // If there are no expanded panels below the expanding panel, resize the first expanded panel above it. + else if (action == 'expanding' && !instance.isCollapsed && el != changing){ + if (!anyNextContainsChanging(el) || (!anyExpandingNextSiblingsExpanded(el) && nextExpandedChanging(el))){ + panelsToResize.push(el); + this.panelsTotalHeight += el.offsetHeight.toInt(); + } + } + + if (el.style.height){ + this.height += el.getStyle('height').toInt(); + } + } + else { + this.height += el.offsetHeight.toInt(); + } + }.bind(this)); + + }.bind(this)); + + // Get the remaining height + var remainingHeight = column.offsetHeight.toInt() - this.height; + + this.height = 0; + + // Get height of all the column's children + column.getChildren().each(function(el){ + this.height += el.offsetHeight.toInt(); + }.bind(this)); + + var remainingHeight = column.offsetHeight.toInt() - this.height; + + panelsToResize.each(function(panel){ + var ratio = this.panelsTotalHeight / panel.offsetHeight.toInt(); + var newPanelHeight = panel.getStyle('height').toInt() + (remainingHeight / ratio); + if (newPanelHeight < 1){ + newPanelHeight = 0; + } + panel.setStyle('height', newPanelHeight); + }.bind(this)); + + // Make sure the remaining height is 0. If not add/subtract the + // remaining height to the tallest panel. This makes up for browser resizing, + // off ratios, and users trying to give panels too much height. + + // Get height of all the column's children + this.height = 0; + column.getChildren().each(function(panelWrapper){ + panelWrapper.getChildren().each(function(el){ + this.height += el.offsetHeight.toInt(); + if (el.hasClass('panel') && el.getStyle('height').toInt() > tallestPanelHeight){ + tallestPanel = el; + tallestPanelHeight = el.getStyle('height').toInt(); + } + }.bind(this)); + }.bind(this)); + + var remainingHeight = column.offsetHeight.toInt() - this.height; + + if (remainingHeight != 0 && tallestPanelHeight > 0){ + tallestPanel.setStyle('height', tallestPanel.getStyle('height').toInt() + remainingHeight ); + if (tallestPanel.getStyle('height') < 1){ + tallestPanel.setStyle('height', 0 ); + } + } + + parent.getChildren('.columnHandle').each(function(handle){ + var parent = handle.getParent(); + if (parent.getStyle('height').toInt() < 1) return; // Keeps IE7 and 8 from throwing an error when collapsing a panel within a panel + var handleHeight = parent.getStyle('height').toInt() - handle.getStyle('border-top').toInt() - handle.getStyle('border-bottom').toInt(); + if (Browser.Engine.trident4 && parent == MUI.Desktop.pageWrapper){ + handleHeight -= 1; + } + handle.setStyle('height', handleHeight); + }); + + panelsExpanded.each(function(panel){ + MUI.resizeChildren(panel); + }.bind(this)); + + }, + // May rename this resizeIframeEl() + resizeChildren: function(panel){ + var instances = MUI.Panels.instances; + var instance = instances.get(panel.id); + var contentWrapperEl = instance.contentWrapperEl; + + if (instance.iframeEl) { + if (!Browser.Engine.trident) { + instance.iframeEl.setStyles({ + 'height': contentWrapperEl.getStyle('height'), + 'width': contentWrapperEl.offsetWidth - contentWrapperEl.getStyle('border-left').toInt() - contentWrapperEl.getStyle('border-right').toInt() + }); + } + else { + // The following hack is to get IE8 RC1 IE8 Standards Mode to properly resize an iframe + // when only the vertical dimension is changed. + instance.iframeEl.setStyles({ + 'height': contentWrapperEl.getStyle('height'), + 'width': contentWrapperEl.offsetWidth - contentWrapperEl.getStyle('border-left').toInt() - contentWrapperEl.getStyle('border-right').toInt() - 1 + }); + instance.iframeEl.setStyles({ + 'width': contentWrapperEl.offsetWidth - contentWrapperEl.getStyle('border-left').toInt() - contentWrapperEl.getStyle('border-right').toInt() + }); + } + } + + }, + // Remaining Width + rWidth: function(container){ + if (container == null) { + var container = MUI.Desktop.desktop; + } + container.getElements('.rWidth').each(function(column){ + var currentWidth = column.offsetWidth.toInt(); + currentWidth -= column.getStyle('border-left').toInt(); + currentWidth -= column.getStyle('border-right').toInt(); + + var parent = column.getParent(); + this.width = 0; + + // Get the total width of all the parent element's children + parent.getChildren().each(function(el){ + if (el.hasClass('mocha') != true) { + this.width += el.offsetWidth.toInt(); + } + }.bind(this)); + + // Add the remaining width to the current element + var remainingWidth = parent.offsetWidth.toInt() - this.width; + var newWidth = currentWidth + remainingWidth; + if (newWidth < 1) newWidth = 0; + column.setStyle('width', newWidth); + column.getChildren('.panel').each(function(panel){ + panel.setStyle('width', newWidth - panel.getStyle('border-left').toInt() - panel.getStyle('border-right').toInt()); + MUI.resizeChildren(panel); + }.bind(this)); + + }); + } + +}); + +function addResizeRight(element, min, max){ + if (!$(element)) return; + element = $(element); + + var instances = MUI.Columns.instances; + var instance = instances.get(element.id); + + var handle = element.getNext('.columnHandle'); + handle.setStyle('cursor', Browser.Engine.webkit ? 'col-resize' : 'e-resize'); + if (!min) min = 50; + if (!max) max = 250; + if (Browser.Engine.trident) { + handle.addEvents({ + 'mousedown': function(){ + handle.setCapture(); + }, + 'mouseup': function(){ + handle.releaseCapture(); + } + }); + } + instance.resize = element.makeResizable({ + handle: handle, + modifiers: { + x: 'width', + y: false + }, + limit: { + x: [min, max] + }, + onStart: function(){ + element.getElements('iframe').setStyle('visibility', 'hidden'); + element.getNext('.column').getElements('iframe').setStyle('visibility', 'hidden'); + }.bind(this), + onDrag: function(){ + if (Browser.Engine.gecko) { + $$('.panel').each(function(panel){ + if (panel.getElements('.mochaIframe').length == 0) { + panel.hide(); // Fix for a rendering bug in FF + } + }); + } + MUI.rWidth(element.getParent()); + if (Browser.Engine.gecko) { + $$('.panel').show(); // Fix for a rendering bug in FF + } + if (Browser.Engine.trident4) { + element.getChildren().each(function(el){ + var width = $(element).getStyle('width').toInt(); + width -= el.getStyle('border-right').toInt(); + width -= el.getStyle('border-left').toInt(); + width -= el.getStyle('padding-right').toInt(); + width -= el.getStyle('padding-left').toInt(); + el.setStyle('width', width); + }.bind(this)); + } + }.bind(this), + onComplete: function(){ + MUI.rWidth(element.getParent()); + element.getElements('iframe').setStyle('visibility', 'visible'); + element.getNext('.column').getElements('iframe').setStyle('visibility', 'visible'); + instance.fireEvent('onResize'); + }.bind(this) + }); +} + +function addResizeLeft(element, min, max){ + if (!$(element)) return; + element = $(element); + + var instances = MUI.Columns.instances; + var instance = instances.get(element.id); + + var handle = element.getPrevious('.columnHandle'); + handle.setStyle('cursor', Browser.Engine.webkit ? 'col-resize' : 'e-resize'); + var partner = element.getPrevious('.column'); + if (!min) min = 50; + if (!max) max = 250; + if (Browser.Engine.trident){ + handle.addEvents({ + 'mousedown': function(){ + handle.setCapture(); + }, + 'mouseup': function(){ + handle.releaseCapture(); + } + }); + } + instance.resize = element.makeResizable({ + handle: handle, + modifiers: {x: 'width' , y: false}, + invert: true, + limit: { x: [min, max] }, + onStart: function(){ + $(element).getElements('iframe').setStyle('visibility','hidden'); + partner.getElements('iframe').setStyle('visibility','hidden'); + }.bind(this), + onDrag: function(){ + MUI.rWidth(element.getParent()); + }.bind(this), + onComplete: function(){ + MUI.rWidth(element.getParent()); + $(element).getElements('iframe').setStyle('visibility','visible'); + partner.getElements('iframe').setStyle('visibility','visible'); + instance.fireEvent('onResize'); + }.bind(this) + }); +} + +function addResizeBottom(element){ + if (!$(element)) return; + var element = $(element); + + var instances = MUI.Panels.instances; + var instance = instances.get(element.id); + var handle = instance.handleEl; + handle.setStyle('cursor', Browser.Engine.webkit ? 'row-resize' : 'n-resize'); + partner = instance.partner; + min = 0; + max = function(){ + return element.getStyle('height').toInt() + partner.getStyle('height').toInt(); + }.bind(this); + + if (Browser.Engine.trident) { + handle.addEvents({ + 'mousedown': function(){ + handle.setCapture(); + }, + 'mouseup': function(){ + handle.releaseCapture(); + } + }); + } + instance.resize = element.makeResizable({ + handle: handle, + modifiers: {x: false, y: 'height'}, + limit: { y: [min, max] }, + invert: false, + onBeforeStart: function(){ + partner = instance.partner; + this.originalHeight = element.getStyle('height').toInt(); + this.partnerOriginalHeight = partner.getStyle('height').toInt(); + }.bind(this), + onStart: function(){ + if (instance.iframeEl) { + if (!Browser.Engine.trident) { + instance.iframeEl.setStyle('visibility', 'hidden'); + partner.getElements('iframe').setStyle('visibility','hidden'); + } + else { + instance.iframeEl.hide(); + partner.getElements('iframe').hide(); + } + } + + }.bind(this), + onDrag: function(){ + partnerHeight = partnerOriginalHeight; + partnerHeight += (this.originalHeight - element.getStyle('height').toInt()); + partner.setStyle('height', partnerHeight); + MUI.resizeChildren(element, element.getStyle('height').toInt()); + MUI.resizeChildren(partner, partnerHeight); + element.getChildren('.column').each( function(column){ + MUI.panelHeight(column); + }); + partner.getChildren('.column').each( function(column){ + MUI.panelHeight(column); + }); + }.bind(this), + onComplete: function(){ + partnerHeight = partnerOriginalHeight; + partnerHeight += (this.originalHeight - element.getStyle('height').toInt()); + partner.setStyle('height', partnerHeight); + MUI.resizeChildren(element, element.getStyle('height').toInt()); + MUI.resizeChildren(partner, partnerHeight); + element.getChildren('.column').each( function(column){ + MUI.panelHeight(column); + }); + partner.getChildren('.column').each( function(column){ + MUI.panelHeight(column); + }); + if (instance.iframeEl) { + if (!Browser.Engine.trident) { + instance.iframeEl.setStyle('visibility', 'visible'); + partner.getElements('iframe').setStyle('visibility','visible'); + } + else { + instance.iframeEl.show(); + partner.getElements('iframe').show(); + // The following hack is to get IE8 Standards Mode to properly resize an iframe + // when only the vertical dimension is changed. + var width = instance.iframeEl.getStyle('width').toInt(); + instance.iframeEl.setStyle('width', width - 1); + MUI.rWidth(); + instance.iframeEl.setStyle('width', width); + } + } + instance.fireEvent('onResize'); + }.bind(this) + }); +} + +MUI.extend({ + /* + + Function: closeColumn + Destroys/removes a column. + + Syntax: + (start code) + MUI.closeColumn(); + (end) + + Arguments: + columnEl - the ID of the column to be closed + + Returns: + true - the column was closed + false - the column was not closed + + */ + closeColumn: function(columnEl){ + var instances = MUI.Columns.instances; + var instance = instances.get(columnEl.id); + if (columnEl != $(columnEl) || instance.isClosing) return; + + instance.isClosing = true; + + if (instance.options.sortable){ + instance.container.retrieve('sortables').removeLists(this.columnEl); + } + + // Destroy all the panels in the column. + var panels = columnEl.getChildren('.panel'); + panels.each(function(panel){ + MUI.closePanel($(panel.id)); + }.bind(this)); + + if (Browser.Engine.trident) { + columnEl.dispose(); + if (instance.handleEl != null) { + instance.handleEl.dispose(); + } + } + else { + columnEl.destroy(); + if (instance.handleEl != null) { + instance.handleEl.destroy(); + } + } + if (MUI.Desktop) { + MUI.Desktop.resizePanels(); + } + instances.erase(instance.options.id); + return true; + }, + /* + + Function: closePanel + Destroys/removes a panel. + + Syntax: + (start code) + MUI.closePanel(); + (end) + + Arguments: + panelEl - the ID of the panel to be closed + + Returns: + true - the panel was closed + false - the panel was not closed + + */ + closePanel: function(panelEl){ + var instances = MUI.Panels.instances; + var instance = instances.get(panelEl.id); + if (panelEl != $(panelEl) || instance.isClosing) return; + + var column = instance.options.column; + + instance.isClosing = true; + + var columnInstances = MUI.Columns.instances; + var columnInstance = columnInstances.get(column); + + if (columnInstance.options.sortable){ + columnInstance.options.container.retrieve('sortables').removeItems(instance.panelWrapperEl); + } + + instance.panelWrapperEl.destroy(); + + if (MUI.Desktop) { + MUI.Desktop.resizePanels(); + } + + // Do this when creating and removing panels + $(column).getChildren('.panelWrapper').each(function(panelWrapper){ + panelWrapper.getElement('.panel').removeClass('bottomPanel'); + }); + $(column).getChildren('.panelWrapper').getLast().getElement('.panel').addClass('bottomPanel'); + + instances.erase(instance.options.id); + return true; + + } +}); +/* + +Script: Dock.js + Implements the dock/taskbar. Enables window minimize. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js, Window.js, Layout.js + +Todo: + - Make it so the dock requires no initial html markup. + +*/ + +MUI.files[MUI.path.source + 'Layout/Dock.js'] = 'loaded'; + +MUI.options.extend({ + // Naming options: + // If you change the IDs of the Mocha Desktop containers in your HTML, you need to change them here as well. + dockWrapper: 'dockWrapper', + dock: 'dock' +}); + +MUI.extend({ + /* + + Function: minimizeAll + Minimize all windows that are minimizable. + + */ + minimizeAll: function() { + $$('.mocha').each(function(windowEl){ + var instance = windowEl.retrieve('instance'); + if (!instance.isMinimized && instance.options.minimizable == true){ + MUI.Dock.minimizeWindow(windowEl); + } + }.bind(this)); + } +}); + +MUI.Dock = { + + options: { + useControls: true, // Toggles autohide and dock placement controls. + dockPosition: 'bottom', // Position the dock starts in, top or bottom. + // Style options + trueButtonColor: [70, 245, 70], // Color for autohide on + enabledButtonColor: [115, 153, 191], + disabledButtonColor: [170, 170, 170] + }, + + initialize: function(options){ + // Stops if MUI.Desktop is not implemented + if (!MUI.Desktop) return; + + MUI.dockVisible = true; + this.dockWrapper = $(MUI.options.dockWrapper); + this.dock = $(MUI.options.dock); + this.autoHideEvent = null; + this.dockAutoHide = false; // True when dock autohide is set to on, false if set to off + + if (!this.dockWrapper) return; + + if (!this.options.useControls){ + if($('dockPlacement')){ + $('dockPlacement').setStyle('cursor', 'default'); + } + if($('dockAutoHide')){ + $('dockAutoHide').setStyle('cursor', 'default'); + } + } + + this.dockWrapper.setStyles({ + 'display': 'block', + 'position': 'absolute', + 'top': null, + 'bottom': MUI.Desktop.desktopFooter ? MUI.Desktop.desktopFooter.offsetHeight : 0, + 'left': 0 + }); + + if (this.options.useControls){ + this.initializeDockControls(); + } + + // Add check mark to menu if link exists in menu + if ($('dockLinkCheck')){ + this.sidebarCheck = new Element('div', { + 'class': 'check', + 'id': 'dock_check' + }).inject($('dockLinkCheck')); + } + + this.dockSortables = new Sortables('#dockSort', { + opacity: 1, + constrain: true, + clone: false, + revert: false + }); + + MUI.Desktop.setDesktopSize(); + + if (MUI.myChain){ + MUI.myChain.callChain(); + } + + }, + + initializeDockControls: function(){ + + // Convert CSS colors to Canvas colors. + this.setDockColors(); + + if (this.options.useControls){ + // Insert canvas + var canvas = new Element('canvas', { + 'id': 'dockCanvas', + 'width': '15', + 'height': '18' + }).inject(this.dock); + + // Dynamically initialize canvas using excanvas. This is only required by IE + if (Browser.Engine.trident && MUI.ieSupport == 'excanvas'){ + G_vmlCanvasManager.initElement(canvas); + } + } + + var dockPlacement = $('dockPlacement'); + var dockAutoHide = $('dockAutoHide'); + + // Position top or bottom selector + dockPlacement.setProperty('title','Position Dock Top'); + + // Attach event + dockPlacement.addEvent('click', function(){ + this.moveDock(); + }.bind(this)); + + // Auto Hide toggle switch + dockAutoHide.setProperty('title','Turn Auto Hide On'); + + // Attach event Auto Hide + dockAutoHide.addEvent('click', function(event){ + if ( this.dockWrapper.getProperty('dockPosition') == 'top' ) + return false; + + var ctx = $('dockCanvas').getContext('2d'); + this.dockAutoHide = !this.dockAutoHide; // Toggle + if (this.dockAutoHide){ + $('dockAutoHide').setProperty('title', 'Turn Auto Hide Off'); + //ctx.clearRect(0, 11, 100, 100); + MUI.circle(ctx, 5 , 14, 3, this.options.trueButtonColor, 1.0); + + // Define event + this.autoHideEvent = function(event) { + if (!this.dockAutoHide) + return; + if (!MUI.Desktop.desktopFooter) { + var dockHotspotHeight = this.dockWrapper.offsetHeight; + if (dockHotspotHeight < 25) dockHotspotHeight = 25; + } + else if (MUI.Desktop.desktopFooter) { + var dockHotspotHeight = this.dockWrapper.offsetHeight + MUI.Desktop.desktopFooter.offsetHeight; + if (dockHotspotHeight < 25) dockHotspotHeight = 25; + } + if (!MUI.Desktop.desktopFooter && event.client.y > (document.getCoordinates().height - dockHotspotHeight)){ + if (!MUI.dockVisible){ + this.dockWrapper.show(); + MUI.dockVisible = true; + MUI.Desktop.setDesktopSize(); + } + } + else if (MUI.Desktop.desktopFooter && event.client.y > (document.getCoordinates().height - dockHotspotHeight)){ + if (!MUI.dockVisible){ + this.dockWrapper.show(); + MUI.dockVisible = true; + MUI.Desktop.setDesktopSize(); + } + } + else if (MUI.dockVisible){ + this.dockWrapper.hide(); + MUI.dockVisible = false; + MUI.Desktop.setDesktopSize(); + + } + }.bind(this); + + // Add event + document.addEvent('mousemove', this.autoHideEvent); + + } else { + $('dockAutoHide').setProperty('title', 'Turn Auto Hide On'); + //ctx.clearRect(0, 11, 100, 100); + MUI.circle(ctx, 5 , 14, 3, this.options.enabledButtonColor, 1.0); + // Remove event + document.removeEvent('mousemove', this.autoHideEvent); + } + + }.bind(this)); + + this.renderDockControls(); + + if (this.options.dockPosition == 'top'){ + this.moveDock(); + } + + }, + + setDockColors: function(){ + var dockButtonEnabled = MUI.getCSSRule('.dockButtonEnabled'); + if (dockButtonEnabled && dockButtonEnabled.style.backgroundColor){ + this.options.enabledButtonColor = new Color(dockButtonEnabled.style.backgroundColor); + } + + var dockButtonDisabled = MUI.getCSSRule('.dockButtonDisabled'); + if (dockButtonDisabled && dockButtonDisabled.style.backgroundColor){ + this.options.disabledButtonColor = new Color(dockButtonDisabled.style.backgroundColor); + } + + var trueButtonColor = MUI.getCSSRule('.dockButtonTrue'); + if (trueButtonColor && trueButtonColor.style.backgroundColor){ + this.options.trueButtonColor = new Color(trueButtonColor.style.backgroundColor); + } + }, + + renderDockControls: function(){ + // Draw dock controls + var ctx = $('dockCanvas').getContext('2d'); + ctx.clearRect(0, 0, 100, 100); + MUI.circle(ctx, 5 , 4, 3, this.options.enabledButtonColor, 1.0); + + if( this.dockWrapper.getProperty('dockPosition') == 'top'){ + MUI.circle(ctx, 5 , 14, 3, this.options.disabledButtonColor, 1.0) + } + else if (this.dockAutoHide){ + MUI.circle(ctx, 5 , 14, 3, this.options.trueButtonColor, 1.0); + } + else { + MUI.circle(ctx, 5 , 14, 3, this.options.enabledButtonColor, 1.0); + } + }, + + moveDock: function(){ + var ctx = $('dockCanvas').getContext('2d'); + // Move dock to top position + if (this.dockWrapper.getStyle('position') != 'relative'){ + this.dockWrapper.setStyles({ + 'position': 'relative', + 'bottom': null + }); + this.dockWrapper.addClass('top'); + MUI.Desktop.setDesktopSize(); + this.dockWrapper.setProperty('dockPosition','top'); + ctx.clearRect(0, 0, 100, 100); + MUI.circle(ctx, 5, 4, 3, this.options.enabledButtonColor, 1.0); + MUI.circle(ctx, 5, 14, 3, this.options.disabledButtonColor, 1.0); + $('dockPlacement').setProperty('title', 'Position Dock Bottom'); + $('dockAutoHide').setProperty('title', 'Auto Hide Disabled in Top Dock Position'); + this.dockAutoHide = false; + } + // Move dock to bottom position + else { + this.dockWrapper.setStyles({ + 'position': 'absolute', + 'bottom': MUI.Desktop.desktopFooter ? MUI.Desktop.desktopFooter.offsetHeight : 0 + }); + this.dockWrapper.removeClass('top'); + MUI.Desktop.setDesktopSize(); + this.dockWrapper.setProperty('dockPosition', 'bottom'); + ctx.clearRect(0, 0, 100, 100); + MUI.circle(ctx, 5, 4, 3, this.options.enabledButtonColor, 1.0); + MUI.circle(ctx, 5 , 14, 3, this.options.enabledButtonColor, 1.0); + $('dockPlacement').setProperty('title', 'Position Dock Top'); + $('dockAutoHide').setProperty('title', 'Turn Auto Hide On'); + } + }, + + createDockTab: function(windowEl){ + + var instance = windowEl.retrieve('instance'); + + var dockTab = new Element('div', { + 'id': instance.options.id + '_dockTab', + 'class': 'dockTab', + 'title': titleText + }).inject($('dockClear'), 'before'); + + dockTab.addEvent('mousedown', function(e){ + new Event(e).stop(); + this.timeDown = $time(); + }); + + dockTab.addEvent('mouseup', function(e){ + this.timeUp = $time(); + if ((this.timeUp - this.timeDown) < 275){ + // If the visibility of the windows on the page are toggled off, toggle visibility on. + if (MUI.Windows.windowsVisible == false) { + MUI.toggleWindowVisibility(); + if (instance.isMinimized == true) { + MUI.Dock.restoreMinimized.delay(25, MUI.Dock, windowEl); + } + else { + MUI.focusWindow(windowEl); + } + return; + } + // If window is minimized, restore window. + if (instance.isMinimized == true) { + MUI.Dock.restoreMinimized.delay(25, MUI.Dock, windowEl); + } + else{ + // If window is not minimized and is focused, minimize window. + if (instance.windowEl.hasClass('isFocused') && instance.options.minimizable == true){ + MUI.Dock.minimizeWindow(windowEl) + } + // If window is not minimized and is not focused, focus window. + else{ + MUI.focusWindow(windowEl); + } + // if the window is not minimized and is outside the viewport, center it in the viewport. + var coordinates = document.getCoordinates(); + if (windowEl.getStyle('left').toInt() > coordinates.width || windowEl.getStyle('top').toInt() > coordinates.height){ + MUI.centerWindow(windowEl); + } + } + } + }); + + this.dockSortables.addItems(dockTab); + + var titleText = instance.titleEl.innerHTML; + + var dockTabText = new Element('div', { + 'id': instance.options.id + '_dockTabText', + 'class': 'dockText' + }).set('html', titleText.substring(0,19) + (titleText.length > 19 ? '...' : '')).inject($(dockTab)); + + // If I implement this again, will need to also adjust the titleText truncate and the tab's + // left padding. + if (instance.options.icon != false){ + // dockTabText.setStyle('background', 'url(' + instance.options.icon + ') 4px 4px no-repeat'); + } + + // Need to resize everything in case the dock wraps when a new tab is added + MUI.Desktop.setDesktopSize(); + + }, + + makeActiveTab: function(){ + + // getWindowWith HighestZindex is used in case the currently focused window + // is closed. + var windowEl = MUI.getWindowWithHighestZindex(); + var instance = windowEl.retrieve('instance'); + + $$('.dockTab').removeClass('activeDockTab'); + if (instance.isMinimized != true) { + + instance.windowEl.addClass('isFocused'); + + var currentButton = $(instance.options.id + '_dockTab'); + if (currentButton != null) { + currentButton.addClass('activeDockTab'); + } + } + else { + instance.windowEl.removeClass('isFocused'); + } + }, + + minimizeWindow: function(windowEl){ + if (windowEl != $(windowEl)) return; + + var instance = windowEl.retrieve('instance'); + instance.isMinimized = true; + + // Hide iframe + // Iframe should be hidden when minimizing, maximizing, and moving for performance and Flash issues + if ( instance.iframeEl ) { + // Some elements are still visible in IE8 in the iframe when the iframe's visibility is set to hidden. + if (!Browser.Engine.trident) { + instance.iframeEl.setStyle('visibility', 'hidden'); + } + else { + instance.iframeEl.hide(); + } + } + + // Hide window and add to dock + instance.contentBorderEl.setStyle('visibility', 'hidden'); + if(instance.toolbarWrapperEl){ + instance.toolbarWrapperEl.hide(); + } + windowEl.setStyle('visibility', 'hidden'); + + // Fixes a scrollbar issue in Mac FF2 + if (Browser.Platform.mac && Browser.Engine.gecko){ + if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ + var ffversion = new Number(RegExp.$1); + if (ffversion < 3) { + instance.contentWrapperEl.setStyle('overflow', 'hidden'); + } + } + } + + MUI.Desktop.setDesktopSize(); + + // Have to use timeout because window gets focused when you click on the minimize button + setTimeout(function(){ + windowEl.setStyle('zIndex', 1); + windowEl.removeClass('isFocused'); + this.makeActiveTab(); + }.bind(this),100); + + instance.fireEvent('onMinimize', windowEl); + }, + + restoreMinimized: function(windowEl) { + + var instance = windowEl.retrieve('instance'); + + if (instance.isMinimized == false) return; + + if (MUI.Windows.windowsVisible == false){ + MUI.toggleWindowVisibility(); + } + + MUI.Desktop.setDesktopSize(); + + // Part of Mac FF2 scrollbar fix + if (instance.options.scrollbars == true && !instance.iframeEl){ + instance.contentWrapperEl.setStyle('overflow', 'auto'); + } + + if (instance.isCollapsed) { + MUI.collapseToggle(windowEl); + } + + windowEl.setStyle('visibility', 'visible'); + instance.contentBorderEl.setStyle('visibility', 'visible'); + if(instance.toolbarWrapperEl){ + instance.toolbarWrapperEl.show(); + } + + // Show iframe + if (instance.iframeEl){ + if (!Browser.Engine.trident){ + instance.iframeEl.setStyle('visibility', 'visible'); + } + else { + instance.iframeEl.show(); + } + } + + instance.isMinimized = false; + MUI.focusWindow(windowEl); + instance.fireEvent('onRestore', windowEl); + + } +}; +/* + +Script: Workspaces.js + Save and load workspaces. The Workspaces emulate Adobe Illustrator functionality remembering what windows are open and where they are positioned. + +Copyright: + Copyright (c) 2007-2009 Greg Houston, . + +License: + MIT-style license. + +Requires: + Core.js, Window.js + +To do: + - Move to Window + +*/ + +MUI.files[MUI.path.source + 'Layout/Workspaces.js'] = 'loaded'; + +MUI.extend({ + /* + + Function: saveWorkspace + Save the current workspace. + + Syntax: + (start code) + MUI.saveWorkspace(); + (end) + + Notes: + This version saves the ID of each open window to a cookie, and reloads those windows using the functions in mocha-init.js. This requires that each window have a function in mocha-init.js used to open them. Functions must be named the windowID + "Window". So if your window is called mywindow, it needs a function called mywindowWindow in mocha-init.js. + + */ + saveWorkspace: function(){ + this.cookie = new Hash.Cookie('mochaUIworkspaceCookie', {duration: 3600}); + this.cookie.empty(); + MUI.Windows.instances.each(function(instance) { + instance.saveValues(); + this.cookie.set(instance.options.id, { + 'id': instance.options.id, + 'top': instance.options.y, + 'left': instance.options.x, + 'width': instance.contentWrapperEl.getStyle('width').toInt(), + 'height': instance.contentWrapperEl.getStyle('height').toInt() + }); + }.bind(this)); + this.cookie.save(); + + new MUI.Window({ + loadMethod: 'html', + type: 'notification', + addClass: 'notification', + content: 'Workspace saved.', + closeAfter: '1400', + width: 200, + height: 40, + y: 53, + padding: { top: 10, right: 12, bottom: 10, left: 12 }, + shadowBlur: 5, + bodyBgColor: [255, 255, 255] + }); + + }, + windowUnload: function(){ + if ($$('.mocha').length == 0 && this.myChain){ + this.myChain.callChain(); + } + }, + loadWorkspace2: function(workspaceWindows){ + workspaceWindows.each(function(workspaceWindow){ + windowFunction = eval('MUI.' + workspaceWindow.id + 'Window'); + if (windowFunction){ + eval('MUI.' + workspaceWindow.id + 'Window({width:'+ workspaceWindow.width +',height:' + workspaceWindow.height + '});'); + var windowEl = $(workspaceWindow.id); + windowEl.setStyles({ + 'top': workspaceWindow.top, + 'left': workspaceWindow.left + }); + var instance = windowEl.retrieve('instance'); + instance.contentWrapperEl.setStyles({ + 'width': workspaceWindow.width, + 'height': workspaceWindow.height + }); + instance.drawWindow(); + } + }.bind(this)); + this.loadingWorkspace = false; + }, + /* + + Function: loadWorkspace + Load the saved workspace. + + Syntax: + (start code) + MUI.loadWorkspace(); + (end) + + */ + loadWorkspace: function(){ + cookie = new Hash.Cookie('mochaUIworkspaceCookie', {duration: 3600}); + workspaceWindows = cookie.load(); + + if(!cookie.getKeys().length){ + new MUI.Window({ + loadMethod: 'html', + type: 'notification', + addClass: 'notification', + content: 'You have no saved workspace.', + closeAfter: '1400', + width: 220, + height: 40, + y: 25, + padding: { top: 10, right: 12, bottom: 10, left: 12 }, + shadowBlur: 5, + bodyBgColor: [255, 255, 255] + }); + return; + } + + if ($$('.mocha').length != 0){ + this.loadingWorkspace = true; + this.myChain = new Chain(); + this.myChain.chain( + function(){ + $$('.mocha').each(function(el) { + this.closeWindow(el); + }.bind(this)); + }.bind(this), + function(){ + this.loadWorkspace2(workspaceWindows); + }.bind(this) + ); + this.myChain.callChain(); + } + else { + this.loadWorkspace2(workspaceWindows); + } + + } +}); diff --git a/src/webui/scripts/mootools-1.2-more.js b/src/webui/scripts/mootools-1.2-more.js index 1d2d23af0..a264cf53f 100644 --- a/src/webui/scripts/mootools-1.2-more.js +++ b/src/webui/scripts/mootools-1.2-more.js @@ -1,14 +1,79 @@ //MooTools More, . Copyright (c) 2006-2009 Aaron Newton , Valerio Proietti & the MooTools team , MIT Style License. -MooTools.More={version:"1.2.4.2",build:"bd5a93c0913cce25917c48cbdacde568e15e02ef"};Class.refactor=function(b,a){$each(a,function(e,d){var c=b.prototype[d]; +MooTools.More={version:"1.2.4.2",build:"bd5a93c0913cce25917c48cbdacde568e15e02ef"};(function(){var a={language:"en-US",languages:{"en-US":{}},cascades:["en-US"]}; +var b;MooTools.lang=new Events();$extend(MooTools.lang,{setLanguage:function(c){if(!a.languages[c]){return this;}a.language=c;this.load();this.fireEvent("langChange",c); +return this;},load:function(){var c=this.cascade(this.getCurrentLanguage());b={};$each(c,function(e,d){b[d]=this.lambda(e);},this);},getCurrentLanguage:function(){return a.language; +},addLanguage:function(c){a.languages[c]=a.languages[c]||{};return this;},cascade:function(e){var c=(a.languages[e]||{}).cascades||[];c.combine(a.cascades); +c.erase(e).push(e);var d=c.map(function(f){return a.languages[f];},this);return $merge.apply(this,d);},lambda:function(c){(c||{}).get=function(e,d){return $lambda(c[e]).apply(this,$splat(d)); +};return c;},get:function(e,d,c){if(b&&b[e]){return(d?b[e].get(d,c):b[e]);}},set:function(d,e,c){this.addLanguage(d);langData=a.languages[d];if(!langData[e]){langData[e]={}; +}$extend(langData[e],c);if(d==this.getCurrentLanguage()){this.load();this.fireEvent("langChange",d);}return this;},list:function(){return Hash.getKeys(a.languages); +}});})();(function(){var c=this;var b=function(){if(c.console&&console.log){try{console.log.apply(console,arguments);}catch(d){console.log(Array.slice(arguments)); +}}else{Log.logged.push(arguments);}return this;};var a=function(){this.logged.push(arguments);return this;};this.Log=new Class({logged:[],log:a,resetLog:function(){this.logged.empty(); +return this;},enableLog:function(){this.log=b;this.logged.each(function(d){this.log.apply(this,d);},this);return this.resetLog();},disableLog:function(){this.log=a; +return this;}});Log.extend(new Log).enableLog();Log.logger=function(){return this.log.apply(this,arguments);};})();Class.refactor=function(b,a){$each(a,function(e,d){var c=b.prototype[d]; if(c&&(c=c._origin)&&typeof e=="function"){b.implement(d,function(){var f=this.previous;this.previous=c;var g=e.apply(this,arguments);this.previous=f;return g; });}else{b.implement(d,e);}});return b;};Class.Mutators.Binds=function(a){return a;};Class.Mutators.initialize=function(a){return function(){$splat(this.Binds).each(function(b){var c=this[b]; if(c){this[b]=c.bind(this);}},this);return a.apply(this,arguments);};};Class.Occlude=new Class({occlude:function(c,b){b=document.id(b||this.element);var a=b.retrieve(c||this.property); if(a&&!$defined(this.occluded)){return this.occluded=a;}this.occluded=false;b.store(c||this.property,this);return this.occluded;}});(function(){var a={wait:function(b){return this.chain(function(){this.callChain.delay($pick(b,500),this); }.bind(this));}};Chain.implement(a);if(window.Fx){Fx.implement(a);["Css","Tween","Elements"].each(function(b){if(Fx[b]){Fx[b].implement(a);}});}Element.implement({chains:function(b){$splat($pick(b,["tween","morph","reveal"])).each(function(c){c=this.get(c); if(!c){return;}c.setOptions({link:"chain"});},this);return this;},pauseFx:function(c,b){this.chains(b).get($pick(b,"tween")).wait(c);return this;}});})(); -String.implement({parseQueryString:function(){var b=this.split(/[&;]/),a={};if(b.length){b.each(function(g){var c=g.indexOf("="),d=c<0?[""]:g.substr(0,c).match(/[^\]\[]+/g),e=decodeURIComponent(g.substr(c+1)),f=a; -d.each(function(j,h){var k=f[j];if(h0)?"-":"+")+d((p.abs()/60).floor(),2)+d(p%60,2);},setAMPM:function(p){p=p.toUpperCase(); +var q=this.get("hr");if(q>11&&p=="AM"){return this.decrement("hour",12);}else{if(q<12&&p=="PM"){return this.increment("hour",12);}}return this;},getAMPM:function(){return(this.get("hr")<12)?"AM":"PM"; +},parse:function(p){this.set("time",i.parse(p));return this;},isValid:function(p){return !!(p||this).valueOf();},format:function(p){if(!this.isValid()){return"invalid date"; +}p=p||"%x %X";p=k[p.toLowerCase()]||p;var q=this;return p.replace(/%([a-z%])/gi,function(s,r){switch(r){case"a":return i.getMsg("days")[q.get("day")].substr(0,3); +case"A":return i.getMsg("days")[q.get("day")];case"b":return i.getMsg("months")[q.get("month")].substr(0,3);case"B":return i.getMsg("months")[q.get("month")]; +case"c":return q.toString();case"d":return d(q.get("date"),2);case"H":return d(q.get("hr"),2);case"I":return((q.get("hr")%12)||12);case"j":return d(q.get("dayofyear"),3); +case"m":return d((q.get("mo")+1),2);case"M":return d(q.get("min"),2);case"o":return q.get("ordinal");case"p":return i.getMsg(q.get("ampm"));case"S":return d(q.get("seconds"),2); +case"U":return d(q.get("week"),2);case"w":return q.get("day");case"x":return q.format(i.getMsg("shortDate"));case"X":return q.format(i.getMsg("shortTime")); +case"y":return q.get("year").toString().substr(2);case"Y":return q.get("year");case"T":return q.get("GMTOffset");case"Z":return q.get("Timezone");}return r; +});},toISOString:function(){return this.format("iso8601");}});i.alias("toISOString","toJSON");i.alias("diff","compare");i.alias("format","strftime");var k={db:"%Y-%m-%d %H:%M:%S",compact:"%Y%m%dT%H%M%S",iso8601:"%Y-%m-%dT%H:%M:%S%T",rfc822:"%a, %d %b %Y %H:%M:%S %Z","short":"%d %b %H:%M","long":"%B %d, %Y %H:%M"}; +var g=[];var e=i.parse;var n=function(s,u,r){var q=-1;var t=i.getMsg(s+"s");switch($type(u)){case"object":q=t[u.get(s)];break;case"number":q=t[month-1]; +if(!q){throw new Error("Invalid "+s+" index: "+index);}break;case"string":var p=t.filter(function(v){return this.test(v);},new RegExp("^"+u,"i"));if(!p.length){throw new Error("Invalid "+s+" string"); +}if(p.length>1){throw new Error("Ambiguous "+s);}q=p[0];}return(r)?t.indexOf(q):q;};i.extend({getMsg:function(q,p){return MooTools.lang.get("Date",q,p); +},units:{ms:$lambda(1),second:$lambda(1000),minute:$lambda(60000),hour:$lambda(3600000),day:$lambda(86400000),week:$lambda(608400000),month:function(q,p){var r=new i; +return i.daysInMonth($pick(q,r.get("mo")),$pick(p,r.get("year")))*86400000;},year:function(p){p=p||new i().get("year");return i.isLeapYear(p)?31622400000:31536000000; +}},daysInMonth:function(q,p){return[31,i.isLeapYear(p)?29:28,31,30,31,30,31,31,30,31,30,31][q];},isLeapYear:function(p){return((p%4===0)&&(p%100!==0))||(p%400===0); +},parse:function(r){var q=$type(r);if(q=="number"){return new i(r);}if(q!="string"){return r;}r=r.clean();if(!r.length){return null;}var p;g.some(function(t){var s=t.re.exec(r); +return(s)?(p=t.handler(s)):false;});return p||new i(e(r));},parseDay:function(p,q){return n("day",p,q);},parseMonth:function(q,p){return n("month",q,p); +},parseUTC:function(q){var p=new i(q);var r=i.UTC(p.get("year"),p.get("mo"),p.get("date"),p.get("hr"),p.get("min"),p.get("sec"));return new i(r);},orderIndex:function(p){return i.getMsg("dateOrder").indexOf(p)+1; +},defineFormat:function(p,q){k[p]=q;},defineFormats:function(p){for(var q in p){i.defineFormat(q,p[q]);}},parsePatterns:g,defineParser:function(p){g.push((p.re&&p.handler)?p:l(p)); +},defineParsers:function(){Array.flatten(arguments).each(i.defineParser);},define2DigitYearStart:function(p){h=p%100;m=p-h;}});var m=1900;var h=70;var j=function(p){return new RegExp("(?:"+i.getMsg(p).map(function(q){return q.substr(0,3); +}).join("|")+")[a-z]*");};var a=function(p){switch(p){case"x":return((i.orderIndex("month")==1)?"%m[.-/]%d":"%d[.-/]%m")+"([.-/]%y)?";case"X":return"%H([.:]%M)?([.:]%S([.:]%s)?)? ?%p? ?%T?"; +}return null;};var o={d:/[0-2]?[0-9]|3[01]/,H:/[01]?[0-9]|2[0-3]/,I:/0?[1-9]|1[0-2]/,M:/[0-5]?\d/,s:/\d+/,o:/[a-z]*/,p:/[ap]\.?m\.?/,y:/\d{2}|\d{4}/,Y:/\d{4}/,T:/Z|[+-]\d{2}(?::?\d{2})?/}; +o.m=o.I;o.S=o.M;var c;var b=function(p){c=p;o.a=o.A=j("days");o.b=o.B=j("months");g.each(function(r,q){if(r.format){g[q]=l(r.format);}});};var l=function(r){if(!c){return{format:r}; +}var p=[];var q=(r.source||r).replace(/%([a-z])/gi,function(t,s){return a(s)||t;}).replace(/\((?!\?)/g,"(?:").replace(/ (?!\?|\*)/g,",? ").replace(/%([a-z%])/gi,function(t,s){var u=o[s]; +if(!u){return s;}p.push(s);return"("+u.source+")";}).replace(/\[a-z\]/gi,"[a-z\\u00c0-\\uffff]");return{format:r,re:new RegExp("^"+q+"$","i"),handler:function(u){u=u.slice(1).associate(p); +var s=new i().clearTime();if("d" in u){f.call(s,"d",1);}if("m" in u){f.call(s,"m",1);}for(var t in u){f.call(s,t,u[t]);}return s;}};};var f=function(p,q){if(!q){return this; +}switch(p){case"a":case"A":return this.set("day",i.parseDay(q,true));case"b":case"B":return this.set("mo",i.parseMonth(q,true));case"d":return this.set("date",q); +case"H":case"I":return this.set("hr",q);case"m":return this.set("mo",q-1);case"M":return this.set("min",q);case"p":return this.set("ampm",q.replace(/\./g,"")); +case"S":return this.set("sec",q);case"s":return this.set("ms",("0."+q)*1000);case"w":return this.set("day",q);case"Y":return this.set("year",q);case"y":q=+q; +if(q<100){q+=m+(q]*>([\\s\\S]*?)":"]+)?>";reg=new RegExp(g,"gi");return reg;};String.implement({standardize:function(){var e=this; +b.each(function(g,f){e=e.replace(new RegExp(g,"g"),a[f]);});return e;},repeat:function(e){return new Array(e+1).join(this);},pad:function(f,h,e){if(this.length>=f){return this; +}var g=(h==null?" ":""+h).repeat(f-this.length).substr(0,f-this.length);if(!e||e=="right"){return this+g;}if(e=="left"){return g+this;}return g.substr(0,(g.length/2).floor())+this+g.substr(0,(g.length/2).ceil()); +},getTags:function(e,f){return this.match(c(e,f))||[];},stripTags:function(e,f){return this.replace(c(e,f),"");},tidy:function(){var e=this.toString(); +$each(d,function(g,f){e=e.replace(new RegExp(f,"g"),g);});return e;}});})();String.implement({parseQueryString:function(){var b=this.split(/[&;]/),a={}; +if(b.length){b.each(function(g){var c=g.indexOf("="),d=c<0?[""]:g.substr(0,c).match(/[^\]\[]+/g),e=decodeURIComponent(g.substr(c+1)),f=a;d.each(function(j,h){var k=f[j]; +if(h~\s]/,f=function(g){var h=g.match(d);return !h?{event:g}:{event:h[1],selector:h[2]}; +},b=function(m,g){var k=m.target;if(c.test(g=g.trim())){var j=this.getElements(g);for(var h=j.length;h--;){var l=j[h];if(k==l||l.hasChild(k)){return l; +}}}else{for(;k&&k!=this;k=k.parentNode){if(Element.match(k,g)){return document.id(k);}}}return null;};var a=Element.prototype.addEvent,e=Element.prototype.removeEvent; +Element.implement({addEvent:function(j,i){var k=f(j);if(k.selector){var h=this.retrieve("$moo:delegateMonitors",{});if(!h[j]){var g=function(m){var l=b.call(this,m,k.selector); +if(l){this.fireEvent(j,[m,l],0,l);}}.bind(this);h[j]=g;a.call(this,k.event,g);}}return a.apply(this,arguments);},removeEvent:function(j,i){var k=f(j);if(k.selector){var h=this.retrieve("events"); +if(!h||!h[j]||(i&&!h[j].keys.contains(i))){return this;}if(i){e.apply(this,[j,i]);}else{e.apply(this,j);}h=this.retrieve("events");if(h&&h[j]&&h[j].length==0){var g=this.retrieve("$moo:delegateMonitors",{}); +e.apply(this,[k.event,g[j]]);delete g[j];}return this;}return e.apply(this,arguments);},fireEvent:function(j,h,g,k){var i=this.retrieve("events");if(!i||!i[j]){return this; +}i[j].keys.each(function(l){l.create({bind:k||this,delay:g,arguments:h})();},this);return this;}});})();Element.implement({measure:function(e){var g=function(h){return !!(!h||h.offsetHeight||h.offsetWidth); };if(g(this)){return e.apply(this);}var d=this.getParent(),f=[],b=[];while(!g(d)&&d!=document.body){b.push(d.expose());d=d.getParent();}var c=this.expose(); var a=e.apply(this);c();b.each(function(h){h();});return a;},expose:function(){if(this.getStyle("display")!="none"){return $empty;}var a=this.style.cssText; this.setStyles({display:"block",position:"absolute",visibility:"hidden"});return function(){this.style.cssText=a;}.bind(this);},getDimensions:function(a){a=$merge({computeSize:false},a); @@ -49,24 +121,14 @@ var j={left:"x",top:"y"};["minimum","maximum"].each(function(u){["left","top"].e });if(g.getStyle("position")=="fixed"||h.relFixedPosition){var m=window.getScroll();k.top+=m.y;k.left+=m.x;}if(h.ignoreScroll){var q=g.getScroll();k.top-=q.y; k.left-=q.x;}if(h.ignoreMargins){k.left+=(h.edge.x=="right"?o["margin-right"]:h.edge.x=="center"?-o["margin-left"]+((o["margin-right"]+o["margin-left"])/2):-o["margin-left"]); k.top+=(h.edge.y=="bottom"?o["margin-bottom"]:h.edge.y=="center"?-o["margin-top"]+((o["margin-bottom"]+o["margin-top"])/2):-o["margin-top"]);}k.left=Math.ceil(k.left); -k.top=Math.ceil(k.top);if(h.returnPos){return k;}else{this.setStyles(k);}return this;}});})();if(!window.Form){window.Form={};}(function(){Form.Request=new Class({Binds:["onSubmit","onFormValidate"],Implements:[Options,Events,Class.Occlude],options:{requestOptions:{evalScripts:true,useSpinner:true,emulation:false,link:"ignore"},extraData:{},resetForm:true},property:"form.request",initialize:function(b,c,a){this.element=document.id(b); -if(this.occlude()){return this.occluded;}this.update=document.id(c);this.setOptions(a);this.makeRequest();if(this.options.resetForm){this.request.addEvent("success",function(){$try(function(){this.element.reset(); -}.bind(this));if(window.OverText){OverText.update();}}.bind(this));}this.attach();},toElement:function(){return this.element;},makeRequest:function(){this.request=new Request.HTML($merge({url:this.element.get("action"),update:this.update,emulation:false,spinnerTarget:this.element,method:this.element.get("method")||"post"},this.options.requestOptions)).addEvents({success:function(b,a){["success","complete"].each(function(c){this.fireEvent(c,[this.update,b,a]); -},this);}.bind(this),failure:function(a){this.fireEvent("failure",a);}.bind(this),exception:function(){this.fireEvent("failure",xhr);}.bind(this)});},attach:function(a){a=$pick(a,true); -method=a?"addEvent":"removeEvent";var b=this.element.retrieve("validator");if(b){b[method]("onFormValidate",this.onFormValidate);}if(!b||!a){this.element[method]("submit",this.onSubmit); -}},detach:function(){this.attach(false);},enable:function(){this.attach();},disable:function(){this.detach();},onFormValidate:function(b,a,c){if(b||!fv.options.stopOnFailure){if(c&&c.stop){c.stop(); -}this.send();}},onSubmit:function(a){if(this.element.retrieve("validator")){this.detach();this.addFormEvent();return;}a.stop();this.send();},send:function(){var b=this.element.toQueryString().trim(); -var a=$H(this.options.extraData).toQueryString();if(b){b+="&"+a;}else{b=a;}this.fireEvent("send",[this.element,b]);this.request.send({data:b});return this; -}});Element.Properties.formRequest={set:function(){var a=Array.link(arguments,{options:Object.type,update:Element.type,updateId:String.type});var c=a.update||a.updateId; -var b=this.retrieve("form.request");if(c){if(b){b.update=document.id(c);}this.store("form.request:update",c);}if(a.options){if(b){b.setOptions(a.options); -}this.store("form.request:options",a.options);}return this;},get:function(){var a=Array.link(arguments,{options:Object.type,update:Element.type,updateId:String.type}); -var b=a.update||a.updateId;if(a.options||b||!this.retrieve("form.request")){if(a.options||!this.retrieve("form.request:options")){this.set("form.request",a.options); -}if(b){this.set("form.request",b);}this.store("form.request",new Form.Request(this,this.retrieve("form.request:update"),this.retrieve("form.request:options"))); -}return this.retrieve("form.request");}};Element.implement({formUpdate:function(b,a){this.get("form.request",b,a).send();return this;}});})();Fx.Elements=new Class({Extends:Fx.CSS,initialize:function(b,a){this.elements=this.subject=$$(b); -this.parent(a);},compute:function(g,h,j){var c={};for(var d in g){var a=g[d],e=h[d],f=c[d]={};for(var b in a){f[b]=this.parent(a[b],e[b],j);}}return c; -},set:function(b){for(var c in b){var a=b[c];for(var d in a){this.render(this.elements[c],d,a[d],this.options.unit);}}return this;},start:function(c){if(!this.check(c)){return this; -}var h={},j={};for(var d in c){var f=c[d],a=h[d]={},g=j[d]={};for(var b in f){var e=this.prepare(this.elements[d],b,f[b]);a[b]=e.from;g[b]=e.to;}}return this.parent(h,j); -}});var Accordion=Fx.Accordion=new Class({Extends:Fx.Elements,options:{display:0,show:false,height:true,width:false,opacity:true,alwaysHide:false,trigger:"click",initialDisplayFx:true,returnHeightToAuto:true},initialize:function(){var c=Array.link(arguments,{container:Element.type,options:Object.type,togglers:$defined,elements:$defined}); +k.top=Math.ceil(k.top);if(h.returnPos){return k;}else{this.setStyles(k);}return this;}});})();Element.implement({isDisplayed:function(){return this.getStyle("display")!="none"; +},isVisible:function(){var a=this.offsetWidth,b=this.offsetHeight;return(a==0&&b==0)?false:(a>0&&b>0)?true:this.isDisplayed();},toggle:function(){return this[this.isDisplayed()?"hide":"show"](); +},hide:function(){var b;try{if((b=this.getStyle("display"))=="none"){b=null;}}catch(a){}return this.store("originalDisplay",b||"block").setStyle("display","none"); +},show:function(a){return this.setStyle("display",a||this.retrieve("originalDisplay")||"block");},swapClass:function(a,b){return this.removeClass(a).addClass(b); +}});Fx.Elements=new Class({Extends:Fx.CSS,initialize:function(b,a){this.elements=this.subject=$$(b);this.parent(a);},compute:function(g,h,j){var c={};for(var d in g){var a=g[d],e=h[d],f=c[d]={}; +for(var b in a){f[b]=this.parent(a[b],e[b],j);}}return c;},set:function(b){for(var c in b){var a=b[c];for(var d in a){this.render(this.elements[c],d,a[d],this.options.unit); +}}return this;},start:function(c){if(!this.check(c)){return this;}var h={},j={};for(var d in c){var f=c[d],a=h[d]={},g=j[d]={};for(var b in f){var e=this.prepare(this.elements[d],b,f[b]); +a[b]=e.from;g[b]=e.to;}}return this.parent(h,j);}});var Accordion=Fx.Accordion=new Class({Extends:Fx.Elements,options:{display:0,show:false,height:true,width:false,opacity:true,alwaysHide:false,trigger:"click",initialDisplayFx:true,returnHeightToAuto:true},initialize:function(){var c=Array.link(arguments,{container:Element.type,options:Object.type,togglers:$defined,elements:$defined}); this.parent(c.elements,c.options);this.togglers=$$(c.togglers);this.container=document.id(c.container);this.previous=-1;this.internalChain=new Chain(); if(this.options.alwaysHide){this.options.wait=true;}if($chk(this.options.show)){this.options.display=false;this.previous=this.options.show;}if(this.options.start){this.options.display=false; this.options.show=false;}this.effects={};if(this.options.opacity){this.effects.opacity="fullOpacity";}if(this.options.width){this.effects.width=this.options.fixedWidth?"fullWidth":"offsetWidth"; @@ -86,7 +148,31 @@ this.internalChain.chain(function(){if(this.options.returnHeightToAuto&&!this.se return b?this.start(e):this.set(e);}});Fx.Move=new Class({Extends:Fx.Morph,options:{relativeTo:document.body,position:"center",edge:false,offset:{x:0,y:0}},start:function(a){return this.parent(this.element.position($merge(this.options,a,{returnPos:true}))); }});Element.Properties.move={set:function(a){var b=this.retrieve("move");if(b){b.cancel();}return this.eliminate("move").store("move:options",$extend({link:"cancel"},a)); },get:function(a){if(a||!this.retrieve("move")){if(a||!this.retrieve("move:options")){this.set("move",a);}this.store("move",new Fx.Move(this,this.retrieve("move:options"))); -}return this.retrieve("move");}};Element.implement({move:function(a){this.get("move").start(a);return this;}});Fx.Scroll=new Class({Extends:Fx,options:{offset:{x:0,y:0},wheelStops:true},initialize:function(b,a){this.element=this.subject=document.id(b); +}return this.retrieve("move");}};Element.implement({move:function(a){this.get("move").start(a);return this;}});Fx.Reveal=new Class({Extends:Fx.Morph,options:{link:"cancel",styles:["padding","border","margin"],transitionOpacity:!Browser.Engine.trident4,mode:"vertical",display:"block",hideInputs:Browser.Engine.trident?"select, input, textarea, object, embed":false},dissolve:function(){try{if(!this.hiding&&!this.showing){if(this.element.getStyle("display")!="none"){this.hiding=true; +this.showing=false;this.hidden=true;this.cssText=this.element.style.cssText;var d=this.element.getComputedSize({styles:this.options.styles,mode:this.options.mode}); +this.element.setStyle("display","block");if(this.options.transitionOpacity){d.opacity=1;}var b={};$each(d,function(f,e){b[e]=[f,0];},this);this.element.setStyle("overflow","hidden"); +var a=this.options.hideInputs?this.element.getElements(this.options.hideInputs):null;this.$chain.unshift(function(){if(this.hidden){this.hiding=false;$each(d,function(f,e){d[e]=f; +},this);this.element.style.cssText=this.cssText;this.element.setStyle("display","none");if(a){a.setStyle("visibility","visible");}}this.fireEvent("hide",this.element); +this.callChain();}.bind(this));if(a){a.setStyle("visibility","hidden");}this.start(b);}else{this.callChain.delay(10,this);this.fireEvent("complete",this.element); +this.fireEvent("hide",this.element);}}else{if(this.options.link=="chain"){this.chain(this.dissolve.bind(this));}else{if(this.options.link=="cancel"&&!this.hiding){this.cancel(); +this.dissolve();}}}}catch(c){this.hiding=false;this.element.setStyle("display","none");this.callChain.delay(10,this);this.fireEvent("complete",this.element); +this.fireEvent("hide",this.element);}return this;},reveal:function(){try{if(!this.showing&&!this.hiding){if(this.element.getStyle("display")=="none"||this.element.getStyle("visiblity")=="hidden"||this.element.getStyle("opacity")==0){this.showing=true; +this.hiding=this.hidden=false;var d;this.cssText=this.element.style.cssText;this.element.measure(function(){d=this.element.getComputedSize({styles:this.options.styles,mode:this.options.mode}); +}.bind(this));$each(d,function(f,e){d[e]=f;});if($chk(this.options.heightOverride)){d.height=this.options.heightOverride.toInt();}if($chk(this.options.widthOverride)){d.width=this.options.widthOverride.toInt(); +}if(this.options.transitionOpacity){this.element.setStyle("opacity",0);d.opacity=1;}var b={height:0,display:this.options.display};$each(d,function(f,e){b[e]=0; +});this.element.setStyles($merge(b,{overflow:"hidden"}));var a=this.options.hideInputs?this.element.getElements(this.options.hideInputs):null;if(a){a.setStyle("visibility","hidden"); +}this.start(d);this.$chain.unshift(function(){this.element.style.cssText=this.cssText;this.element.setStyle("display",this.options.display);if(!this.hidden){this.showing=false; +}if(a){a.setStyle("visibility","visible");}this.callChain();this.fireEvent("show",this.element);}.bind(this));}else{this.callChain();this.fireEvent("complete",this.element); +this.fireEvent("show",this.element);}}else{if(this.options.link=="chain"){this.chain(this.reveal.bind(this));}else{if(this.options.link=="cancel"&&!this.showing){this.cancel(); +this.reveal();}}}}catch(c){this.element.setStyles({display:this.options.display,visiblity:"visible",opacity:1});this.showing=false;this.callChain.delay(10,this); +this.fireEvent("complete",this.element);this.fireEvent("show",this.element);}return this;},toggle:function(){if(this.element.getStyle("display")=="none"||this.element.getStyle("visiblity")=="hidden"||this.element.getStyle("opacity")==0){this.reveal(); +}else{this.dissolve();}return this;},cancel:function(){this.parent.apply(this,arguments);this.element.style.cssText=this.cssText;this.hidding=false;this.showing=false; +}});Element.Properties.reveal={set:function(a){var b=this.retrieve("reveal");if(b){b.cancel();}return this.eliminate("reveal").store("reveal:options",a); +},get:function(a){if(a||!this.retrieve("reveal")){if(a||!this.retrieve("reveal:options")){this.set("reveal",a);}this.store("reveal",new Fx.Reveal(this,this.retrieve("reveal:options"))); +}return this.retrieve("reveal");}};Element.Properties.dissolve=Element.Properties.reveal;Element.implement({reveal:function(a){this.get("reveal",a).reveal(); +return this;},dissolve:function(a){this.get("reveal",a).dissolve();return this;},nix:function(){var a=Array.link(arguments,{destroy:Boolean.type,options:Object.type}); +this.get("reveal",a.options).dissolve().chain(function(){this[a.destroy?"destroy":"dispose"]();}.bind(this));return this;},wink:function(){var b=Array.link(arguments,{duration:Number.type,options:Object.type}); +var a=this.get("reveal",b.options);a.reveal().chain(function(){(function(){a.dissolve();}).delay(b.duration||2000);});}});Fx.Scroll=new Class({Extends:Fx,options:{offset:{x:0,y:0},wheelStops:true},initialize:function(b,a){this.element=this.subject=document.id(b); this.parent(a);var d=this.cancel.bind(this,false);if($type(this.element)!="element"){this.element=document.id(this.element.getDocument().body);}var c=this.element; if(this.options.wheelStops){this.addEvent("start",function(){c.addEvent("mousewheel",d);},true);this.addEvent("complete",function(){c.removeEvent("mousewheel",d); },true);}},set:function(){var a=Array.flatten(arguments);if(Browser.Engine.gecko){a=[Math.round(a[0]),Math.round(a[1])];}this.element.scrollTo(a[0],a[1]); @@ -206,74 +292,90 @@ b.addEvents({load:e,readystatechange:function(){if(["loaded","complete"].contain var g=b[f];delete b[f];d[f]=function(){if(!d){return;}if(!a.parentNode){a.width=d.width;a.height=d.height;}d=d.onload=d.onabort=d.onerror=null;g.delay(1,a,a); a.fireEvent(e,a,1);};});d.src=a.src=c;if(d&&d.complete){d.onload.delay(1);}return a.set(b);},images:function(d,c){c=$merge({onComplete:$empty,onProgress:$empty,onError:$empty,properties:{}},c); d=$splat(d);var a=[];var b=0;return new Elements(d.map(function(e){return Asset.image(e,$extend(c.properties,{onload:function(){c.onProgress.call(this,b,d.indexOf(e)); -b++;if(b==d.length){c.onComplete();}},onerror:function(){c.onError.call(this,b,d.indexOf(e));b++;if(b==d.length){c.onComplete();}}}));}));}};var Group=new Class({initialize:function(){this.instances=Array.flatten(arguments); -this.events={};this.checker={};},addEvent:function(b,a){this.checker[b]=this.checker[b]||{};this.events[b]=this.events[b]||[];if(this.events[b].contains(a)){return false; -}else{this.events[b].push(a);}this.instances.each(function(c,d){c.addEvent(b,this.check.bind(this,[b,c,d]));},this);return this;},check:function(c,a,b){this.checker[c][b]=true; -var d=this.instances.every(function(f,e){return this.checker[c][e]||false;},this);if(!d){return;}this.checker[c]={};this.events[c].each(function(e){e.call(this,this.instances,a); -},this);}});Hash.Cookie=new Class({Extends:Cookie,options:{autoSave:true},initialize:function(b,a){this.parent(b,a);this.load();},save:function(){var a=JSON.encode(this.hash); -if(!a||a.length>4096){return false;}if(a=="{}"){this.dispose();}else{this.write(a);}return true;},load:function(){this.hash=new Hash(JSON.decode(this.read(),true)); -return this;}});Hash.each(Hash.prototype,function(b,a){if(typeof b=="function"){Hash.Cookie.implement(a,function(){var c=b.apply(this.hash,arguments);if(this.options.autoSave){this.save(); -}return c;});}});var IframeShim=new Class({Implements:[Options,Events,Class.Occlude],options:{className:"iframeShim",src:'javascript:false;document.write("");',display:false,zIndex:null,margin:0,offset:{x:0,y:0},browsers:(Browser.Engine.trident4||(Browser.Engine.gecko&&!Browser.Engine.gecko19&&Browser.Platform.mac))},property:"IframeShim",initialize:function(b,a){this.element=document.id(b); -if(this.occlude()){return this.occluded;}this.setOptions(a);this.makeShim();return this;},makeShim:function(){if(this.options.browsers){var c=this.element.getStyle("zIndex").toInt(); -if(!c){c=1;var b=this.element.getStyle("position");if(b=="static"||!b){this.element.setStyle("position","relative");}this.element.setStyle("zIndex",c); -}c=($chk(this.options.zIndex)&&c>this.options.zIndex)?this.options.zIndex:c-1;if(c<0){c=1;}this.shim=new Element("iframe",{src:this.options.src,scrolling:"no",frameborder:0,styles:{zIndex:c,position:"absolute",border:"none",filter:"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"},"class":this.options.className}).store("IframeShim",this); -var a=(function(){this.shim.inject(this.element,"after");this[this.options.display?"show":"hide"]();this.fireEvent("inject");}).bind(this);if(IframeShim.ready){window.addEvent("load",a); -}else{a();}}else{this.position=this.hide=this.show=this.dispose=$lambda(this);}},position:function(){if(!IframeShim.ready||!this.shim){return this;}var a=this.element.measure(function(){return this.getSize(); -});if(this.options.margin!=undefined){a.x=a.x-(this.options.margin*2);a.y=a.y-(this.options.margin*2);this.options.offset.x+=this.options.margin;this.options.offset.y+=this.options.margin; -}this.shim.set({width:a.x,height:a.y}).position({relativeTo:this.element,offset:this.options.offset});return this;},hide:function(){if(this.shim){this.shim.setStyle("display","none"); -}return this;},show:function(){if(this.shim){this.shim.setStyle("display","block");}return this.position();},dispose:function(){if(this.shim){this.shim.dispose(); -}return this;},destroy:function(){if(this.shim){this.shim.destroy();}return this;}});window.addEvent("load",function(){IframeShim.ready=true;});var Mask=new Class({Implements:[Options,Events],Binds:["resize"],options:{style:{},"class":"mask",maskMargins:false,useIframeShim:true},initialize:function(b,a){this.target=document.id(b)||document.body; -this.target.store("mask",this);this.setOptions(a);this.render();this.inject();},render:function(){this.element=new Element("div",{"class":this.options["class"],id:this.options.id||"mask-"+$time(),styles:$merge(this.options.style,{display:"none"}),events:{click:function(){this.fireEvent("click"); -if(this.options.hideOnClick){this.hide();}}.bind(this)}});this.hidden=true;},toElement:function(){return this.element;},inject:function(b,a){a=a||this.options.inject?this.options.inject.where:""||this.target==document.body?"inside":"after"; -b=b||this.options.inject?this.options.inject.target:""||this.target;this.element.inject(b,a);if(this.options.useIframeShim){this.shim=new IframeShim(this.element); -this.addEvents({show:this.shim.show.bind(this.shim),hide:this.shim.hide.bind(this.shim),destroy:this.shim.destroy.bind(this.shim)});}},position:function(){this.resize(this.options.width,this.options.height); -this.element.position({relativeTo:this.target,position:"topLeft",ignoreMargins:!this.options.maskMargins,ignoreScroll:this.target==document.body});return this; -},resize:function(a,e){var b={styles:["padding","border"]};if(this.options.maskMargins){b.styles.push("margin");}var d=this.target.getComputedSize(b);if(this.target==document.body){var c=window.getSize(); -if(d.totalHeight(b[d]+f[d])&&a[d]+b[d]!=c[d]){e[d]=(this.page[d]-b[d]+this.options.area-f[d])*this.options.velocity; -}}}if(e.y||e.x){this.fireEvent("change",[a.x+e.x,a.y+e.y]);}}});(function(){var a=function(c,b){return(c)?($type(c)=="function"?c(b):b.get(c)):"";};this.Tips=new Class({Implements:[Events,Options],options:{onShow:function(){this.tip.setStyle("display","block"); -},onHide:function(){this.tip.setStyle("display","none");},title:"title",text:function(b){return b.get("rel")||b.get("href");},showDelay:100,hideDelay:100,className:"tip-wrap",offset:{x:16,y:16},fixed:false},initialize:function(){var b=Array.link(arguments,{options:Object.type,elements:$defined}); -this.setOptions(b.options);document.id(this);if(b.elements){this.attach(b.elements);}},toElement:function(){if(this.tip){return this.tip;}this.container=new Element("div",{"class":"tip"}); -return this.tip=new Element("div",{"class":this.options.className,styles:{position:"absolute",top:0,left:0}}).adopt(new Element("div",{"class":"tip-top"}),this.container,new Element("div",{"class":"tip-bottom"})).inject(document.body); -},attach:function(b){$$(b).each(function(d){var f=a(this.options.title,d),e=a(this.options.text,d);d.erase("title").store("tip:native",f).retrieve("tip:title",f); -d.retrieve("tip:text",e);this.fireEvent("attach",[d]);var c=["enter","leave"];if(!this.options.fixed){c.push("move");}c.each(function(h){var g=d.retrieve("tip:"+h); -if(!g){g=this["element"+h.capitalize()].bindWithEvent(this,d);}d.store("tip:"+h,g).addEvent("mouse"+h,g);},this);},this);return this;},detach:function(b){$$(b).each(function(d){["enter","leave","move"].each(function(e){d.removeEvent("mouse"+e,d.retrieve("tip:"+e)).eliminate("tip:"+e); -});this.fireEvent("detach",[d]);if(this.options.title=="title"){var c=d.retrieve("tip:native");if(c){d.set("title",c);}}},this);return this;},elementEnter:function(c,b){this.container.empty(); -["title","text"].each(function(e){var d=b.retrieve("tip:"+e);if(d){this.fill(new Element("div",{"class":"tip-"+e}).inject(this.container),d);}},this);$clear(this.timer); -this.timer=this.show.delay(this.options.showDelay,this,b);this.position((this.options.fixed)?{page:b.getPosition()}:c);},elementLeave:function(c,b){$clear(this.timer); -this.timer=this.hide.delay(this.options.hideDelay,this,b);this.fireForParent(c,b);},fireForParent:function(c,b){if(!b){return;}parentNode=b.getParent(); -if(parentNode==document.body){return;}if(parentNode.retrieve("tip:enter")){parentNode.fireEvent("mouseenter",c);}else{this.fireForParent(parentNode,c); -}},elementMove:function(c,b){this.position(c);},position:function(e){var c=window.getSize(),b=window.getScroll(),f={x:this.tip.offsetWidth,y:this.tip.offsetHeight},d={x:"left",y:"top"},g={}; -for(var h in d){g[d[h]]=e.page[h]+this.options.offset[h];if((g[d[h]]+f[h]-b[h])>c[h]){g[d[h]]=e.page[h]-this.options.offset[h]-f[h];}}this.tip.setStyles(g); -},fill:function(b,c){if(typeof c=="string"){b.set("html",c);}else{b.adopt(c);}},show:function(b){this.fireEvent("show",[this.tip,b]);},hide:function(b){this.fireEvent("hide",[this.tip,b]); -}});})();var Spinner=new Class({Extends:Mask,options:{"class":"spinner",containerPosition:{},content:{"class":"spinner-content"},messageContainer:{"class":"spinner-msg"},img:{"class":"spinner-img"},fxOptions:{link:"chain"}},initialize:function(){this.parent.apply(this,arguments); -this.target.store("spinner",this);var a=function(){this.active=false;}.bind(this);this.addEvents({hide:a,show:a});},render:function(){this.parent();this.element.set("id",this.options.id||"spinner-"+$time()); -this.content=document.id(this.options.content)||new Element("div",this.options.content);this.content.inject(this.element);if(this.options.message){this.msg=document.id(this.options.message)||new Element("p",this.options.messageContainer).appendText(this.options.message); -this.msg.inject(this.content);}if(this.options.img){this.img=document.id(this.options.img)||new Element("div",this.options.img);this.img.inject(this.content); -}this.element.set("tween",this.options.fxOptions);},show:function(a){if(this.active){return this.chain(this.show.bind(this));}if(!this.hidden){this.callChain.delay(20,this); -return this;}this.active=true;return this.parent(a);},showMask:function(a){var b=function(){this.content.position($merge({relativeTo:this.element},this.options.containerPosition)); -}.bind(this);if(a){this.parent();b();}else{this.element.setStyles({display:"block",opacity:0}).tween("opacity",this.options.style.opacity||0.9);b();this.hidden=false; -this.fireEvent("show");this.callChain();}},hide:function(a){if(this.active){return this.chain(this.hide.bind(this));}if(this.hidden){this.callChain.delay(20,this); -return this;}this.active=true;return this.parent(a);},hideMask:function(a){if(a){return this.parent();}this.element.tween("opacity",0).get("tween").chain(function(){this.element.setStyle("display","none"); -this.hidden=true;this.fireEvent("hide");this.callChain();}.bind(this));},destroy:function(){this.content.destroy();this.parent();this.target.eliminate("spinner"); -}});Spinner.implement(new Chain);if(window.Request){Request=Class.refactor(Request,{options:{useSpinner:false,spinnerOptions:{},spinnerTarget:false},initialize:function(a){this._send=this.send; -this.send=function(c){if(this.spinner){this.spinner.chain(this._send.bind(this,c)).show();}else{this._send(c);}return this;};this.previous(a);var b=document.id(this.options.spinnerTarget)||document.id(this.options.update); -if(this.options.useSpinner&&b){this.spinner=b.get("spinner",this.options.spinnerOptions);["onComplete","onException","onCancel"].each(function(c){this.addEvent(c,this.spinner.hide.bind(this.spinner)); -},this);}},getSpinner:function(){return this.spinner;}});}Element.Properties.spinner={set:function(a){var b=this.retrieve("spinner");return this.eliminate("spinner").store("spinner:options",a); -},get:function(a){if(a||!this.retrieve("spinner")){if(this.retrieve("spinner")){this.retrieve("spinner").destroy();}if(a||!this.retrieve("spinner:options")){this.set("spinner",a); -}new Spinner(this,this.retrieve("spinner:options"));}return this.retrieve("spinner");}};Element.implement({spin:function(a){this.get("spinner",a).show(); -return this;},unspin:function(){var a=Array.link(arguments,{options:Object.type,callback:Function.type});this.get("spinner",a.options).hide(a.callback); -return this;}}); \ No newline at end of file +b++;if(b==d.length){c.onComplete();}},onerror:function(){c.onError.call(this,b,d.indexOf(e));b++;if(b==d.length){c.onComplete();}}}));}));}};var Color=new Native({initialize:function(b,c){if(arguments.length>=3){c="rgb"; +b=Array.slice(arguments,0,3);}else{if(typeof b=="string"){if(b.match(/rgb/)){b=b.rgbToHex().hexToRgb(true);}else{if(b.match(/hsb/)){b=b.hsbToRgb();}else{b=b.hexToRgb(true); +}}}}c=c||"rgb";switch(c){case"hsb":var a=b;b=b.hsbToRgb();b.hsb=a;break;case"hex":b=b.hexToRgb(true);break;}b.rgb=b.slice(0,3);b.hsb=b.hsb||b.rgbToHsb(); +b.hex=b.rgbToHex();return $extend(b,this);}});Color.implement({mix:function(){var a=Array.slice(arguments);var c=($type(a.getLast())=="number")?a.pop():50; +var b=this.slice();a.each(function(d){d=new Color(d);for(var e=0;e<3;e++){b[e]=Math.round((b[e]/100*(100-c))+(d[e]/100*c));}});return new Color(b,"rgb"); +},invert:function(){return new Color(this.map(function(a){return 255-a;}));},setHue:function(a){return new Color([a,this.hsb[1],this.hsb[2]],"hsb");},setSaturation:function(a){return new Color([this.hsb[0],a,this.hsb[2]],"hsb"); +},setBrightness:function(a){return new Color([this.hsb[0],this.hsb[1],a],"hsb");}});var $RGB=function(d,c,a){return new Color([d,c,a],"rgb");};var $HSB=function(d,c,a){return new Color([d,c,a],"hsb"); +};var $HEX=function(a){return new Color(a,"hex");};Array.implement({rgbToHsb:function(){var b=this[0],c=this[1],j=this[2],g=0;var i=Math.max(b,c,j),e=Math.min(b,c,j); +var k=i-e;var h=i/255,f=(i!=0)?k/i:0;if(f!=0){var d=(i-b)/k;var a=(i-c)/k;var l=(i-j)/k;if(b==i){g=l-a;}else{if(c==i){g=2+d-l;}else{g=4+a-d;}}g/=6;if(g<0){g++; +}}return[Math.round(g*360),Math.round(f*100),Math.round(h*100)];},hsbToRgb:function(){var c=Math.round(this[2]/100*255);if(this[1]==0){return[c,c,c];}else{var a=this[0]%360; +var e=a%60;var g=Math.round((this[2]*(100-this[1]))/10000*255);var d=Math.round((this[2]*(6000-this[1]*e))/600000*255);var b=Math.round((this[2]*(6000-this[1]*(60-e)))/600000*255); +switch(Math.floor(a/60)){case 0:return[c,b,g];case 1:return[d,c,g];case 2:return[g,c,b];case 3:return[g,d,c];case 4:return[b,g,c];case 5:return[c,g,d]; +}}return false;}});String.implement({rgbToHsb:function(){var a=this.match(/\d{1,3}/g);return(a)?a.rgbToHsb():null;},hsbToRgb:function(){var a=this.match(/\d{1,3}/g); +return(a)?a.hsbToRgb():null;}});var HtmlTable=new Class({Implements:[Options,Events,Class.Occlude],options:{properties:{cellpadding:0,cellspacing:0,border:0},rows:[],headers:[],footers:[]},property:"HtmlTable",initialize:function(){var a=Array.link(arguments,{options:Object.type,table:Element.type}); +this.setOptions(a.options);this.element=a.table||new Element("table",this.options.properties);if(this.occlude()){return this.occluded;}this.build();},build:function(){this.element.store("HtmlTable",this); +this.body=document.id(this.element.tBodies[0])||new Element("tbody").inject(this.element);$$(this.body.rows);if(this.options.headers.length){this.setHeaders(this.options.headers); +}else{this.thead=document.id(this.element.tHead);}if(this.thead){this.head=document.id(this.thead.rows[0]);}if(this.options.footers.length){this.setFooters(this.options.footers); +}this.tfoot=document.id(this.element.tFoot);if(this.tfoot){this.foot=document.id(this.thead.rows[0]);}this.options.rows.each(function(a){this.push(a);},this); +["adopt","inject","wraps","grab","replaces","dispose"].each(function(a){this[a]=this.element[a].bind(this.element);},this);},toElement:function(){return this.element; +},empty:function(){this.body.empty();return this;},setHeaders:function(a){this.thead=(document.id(this.element.tHead)||new Element("thead").inject(this.element,"top")).empty(); +this.push(a,this.thead,"th");this.head=document.id(this.thead.rows[0]);return this;},setFooters:function(a){this.tfoot=(document.id(this.element.tFoot)||new Element("tfoot").inject(this.element,"top")).empty(); +this.push(a,this.tfoot);this.foot=document.id(this.thead.rows[0]);return this;},push:function(d,c,a){var b=d.map(function(g){var h=new Element(a||"td",g.properties),f=g.content||g||"",e=document.id(f); +if(e){h.adopt(e);}else{h.set("html",f);}return h;});return{tr:new Element("tr").inject(c||this.body).adopt(b),tds:b};}});HtmlTable=Class.refactor(HtmlTable,{options:{sortIndex:0,sortReverse:false,parsers:[],defaultParser:"string",classSortable:"table-sortable",classHeadSort:"table-th-sort",classHeadSortRev:"table-th-sort-rev",classNoSort:"table-th-nosort",classGroupHead:"table-tr-group-head",classGroup:"table-tr-group",classCellSort:"table-td-sort",classSortSpan:"table-th-sort-span",sortable:false},initialize:function(){this.previous.apply(this,arguments); +if(this.occluded){return this.occluded;}this.sorted={index:null,dir:1};this.bound={headClick:this.headClick.bind(this)};this.sortSpans=new Elements();if(this.options.sortable){this.enableSort(); +if(this.options.sortIndex!=null){this.sort(this.options.sortIndex,this.options.sortReverse);}}},attachSorts:function(a){this.element[$pick(a,true)?"addEvent":"removeEvent"]("click:relay(th)",this.bound.headClick); +},setHeaders:function(){this.previous.apply(this,arguments);if(this.sortEnabled){this.detectParsers();}},detectParsers:function(c){if(!this.head){return; +}var a=this.options.parsers,b=this.body.rows;this.parsers=$$(this.head.cells).map(function(d,e){if(!c&&(d.hasClass(this.options.classNoSort)||d.retrieve("htmltable-sort"))){return d.retrieve("htmltable-sort"); +}var g=new Element("span",{html:" ","class":this.options.classSortSpan}).inject(d,"top");this.sortSpans.push(g);var h=a[e],f;switch($type(h)){case"function":h={convert:h}; +f=true;break;case"string":h=h;f=true;break;}if(!f){HtmlTable.Parsers.some(function(n){var l=n.match;if(!l){return false;}if(Browser.Engine.trident){return false; +}for(var m=0,k=b.length;mi.value?1:-1; +});if(!this.sorted.reverse){s.reverse(true);}var p=s.length,k=this.body;var n,r,a,g;while(p){var q=s[--p];r=q.position;var e=k.rows[r];if(e.disabled){continue; +}if(!m){if(g===q.value){e.removeClass(t).addClass(o);}else{g=q.value;e.removeClass(o).addClass(t);}if(this.zebra){this.zebra(e,p);}e.cells[f].addClass(l); +}k.appendChild(e);for(n=0;nr){s[n].position--;}}}s=null;if(b){b.grab(k);}return this.fireEvent("sort",[k,f]);},reSort:function(){if(this.sortEnabled){this.sort.call(this,this.sorted.index,this.sorted.reverse); +}return this;},enableSort:function(){this.element.addClass(this.options.classSortable);this.attachSorts(true);this.detectParsers();this.sortEnabled=true; +return this;},disableSort:function(){this.element.remove(this.options.classSortable);this.attachSorts(false);this.sortSpans.each(function(a){a.destroy(); +});this.sortSpans.empty();this.sortEnabled=false;return this;}});HtmlTable.Parsers=new Hash({date:{match:/^\d{2}[-\/ ]\d{2}[-\/ ]\d{2,4}$/,convert:function(){return Date.parse(this.get("text").format("db")); +},type:"date"},"input-checked":{match:/ type="(radio|checkbox)" /,convert:function(){return this.getElement("input").checked;}},"input-value":{match:/=this.body.rows.length){b=this.body.rows.length-1;}if(this.hover==this.body.rows[b]){return this; +}this.enterRow(this.body.rows[b]);},leaveRow:function(a){a.removeClass(this.options.classRowHovered);},focusRow:function(){var b=arguments[1]||arguments[0]; +if(!this.body.getChildren().contains(b)){return;}var a=function(c){this.selectedRows.erase(c);c.removeClass(this.options.classRowSelected);this.fireEvent("rowUnfocus",[c,this.selectedRows]); +}.bind(this);if(!this.options.allowMultiSelect){this.selectedRows.each(a);}if(!this.selectedRows.contains(b)){this.selectedRows.push(b);b.addClass(this.options.classRowSelected); +this.fireEvent("rowFocus",[b,this.selectedRows]);}else{a(b);}return false;},selectAll:function(a){a=$pick(a,true);if(!this.options.allowMultiSelect&&a){return; +}if(!a){this.selectedRows.removeClass(this.options.classRowSelected).empty();}else{this.selectedRows.combine(this.body.rows).addClass(this.options.classRowSelected); +}return this;},selectNone:function(){return this.selectAll(false);}});(function(){var a={};var b=["shift","control","alt","meta"];var d=/^(?:shift|control|ctrl|alt|meta)$/; +var e=function(i,h){i=i.toLowerCase().replace(/^(keyup|keydown):/,function(l,k){h=k;return"";});if(!a[i]){var g="",j={};i.split("+").each(function(k){if(d.test(k)){j[k]=true; +}else{g=k;}});j.control=j.control||j.ctrl;var f="";b.each(function(k){if(j[k]){f+=k+"+";}});a[i]=f+g;}return h+":"+a[i];};this.Keyboard=new Class({Extends:Events,Implements:[Options,Log],options:{defaultEventType:"keydown",active:false,events:{}},initialize:function(f){this.setOptions(f); +if(Keyboard.manager){Keyboard.manager.manage(this);}this.setup();},setup:function(){this.addEvents(this.options.events);if(this.options.active){this.activate(); +}},handle:function(h,g){if(!this.active||h.preventKeyboardPropagation){return;}var f=!!this.manager;if(f&&this.activeKB){this.activeKB.handle(h,g);if(h.preventKeyboardPropagation){return; +}}this.fireEvent(g,h);if(!f&&this.activeKB){this.activeKB.handle(h,g);}},addEvent:function(h,g,f){return this.parent(e(h,this.options.defaultEventType),g,f); +},removeEvent:function(g,f){return this.parent(e(g,this.options.defaultEventType),f);},activate:function(){this.active=true;return this.enable();},deactivate:function(){this.active=false; +return this.fireEvent("deactivate");},toggleActive:function(){return this[this.active?"deactivate":"activate"]();},enable:function(f){if(f){if(f!=this.activeKB){this.previous=this.activeKB; +}this.activeKB=f.fireEvent("activate");}else{if(this.manager){this.manager.enable(this);}}return this;},relenquish:function(){if(this.previous){this.enable(this.previous); +}},manage:function(f){if(f.manager){f.manager.drop(f);}this.instances.push(f);f.manager=this;if(!this.activeKB){this.enable(f);}else{this._disable(f);}},_disable:function(f){if(this.activeKB==f){this.activeKB=null; +}},drop:function(f){this._disable(f);this.instances.erase(f);},instances:[],trace:function(){this.enableLog();var f=this;this.log("the following items have focus: "); +while(f){this.log(document.id(f.widget)||f.widget||f,"active: "+this.active);f=f.activeKB;}}});Keyboard.stop=function(f){f.preventKeyboardPropagation=true; +};Keyboard.manager=new this.Keyboard({active:true});Keyboard.trace=function(){Keyboard.manager.trace();};var c=function(g){var f="";b.each(function(h){if(g[h]){f+=h+"+"; +}});Keyboard.manager.handle(g,g.type+":"+f+g.key);};document.addEvents({keyup:c,keydown:c});Event.Keys.extend({pageup:33,pagedown:34,end:35,home:36,capslock:20,numlock:144,scrolllock:145}); +})();var Scroller=new Class({Implements:[Events,Options],options:{area:20,velocity:1,onChange:function(a,b){this.element.scrollTo(a,b);},fps:50},initialize:function(b,a){this.setOptions(a); +this.element=document.id(b);this.listener=($type(this.element)!="element")?document.id(this.element.getDocument().body):this.element;this.timer=null;this.bound={attach:this.attach.bind(this),detach:this.detach.bind(this),getCoords:this.getCoords.bind(this)}; +},start:function(){this.listener.addEvents({mouseover:this.bound.attach,mouseout:this.bound.detach});},stop:function(){this.listener.removeEvents({mouseover:this.bound.attach,mouseout:this.bound.detach}); +this.detach();this.timer=$clear(this.timer);},attach:function(){this.listener.addEvent("mousemove",this.bound.getCoords);},detach:function(){this.listener.removeEvent("mousemove",this.bound.getCoords); +this.timer=$clear(this.timer);},getCoords:function(a){this.page=(this.listener.get("tag")=="body")?a.client:a.page;if(!this.timer){this.timer=this.scroll.periodical(Math.round(1000/this.options.fps),this); +}},scroll:function(){var b=this.element.getSize(),a=this.element.getScroll(),f=this.element.getOffsets(),c=this.element.getScrollSize(),e={x:0,y:0};for(var d in this.page){if(this.page[d]<(this.options.area+f[d])&&a[d]!=0){e[d]=(this.page[d]-this.options.area-f[d])*this.options.velocity; +}else{if(this.page[d]+this.options.area>(b[d]+f[d])&&a[d]+b[d]!=c[d]){e[d]=(this.page[d]-b[d]+this.options.area-f[d])*this.options.velocity;}}}if(e.y||e.x){this.fireEvent("change",[a.x+e.x,a.y+e.y]); +}}});MooTools.lang.set("en-US","Date",{months:["January","February","March","April","May","June","July","August","September","October","November","December"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],dateOrder:["month","date","year"],shortDate:"%m/%d/%Y",shortTime:"%I:%M%p",AM:"AM",PM:"PM",ordinal:function(a){return(a>3&&a<21)?"th":["th","st","nd","rd","th"][Math.min(a%10,4)]; +},lessThanMinuteAgo:"less than a minute ago",minuteAgo:"about a minute ago",minutesAgo:"{delta} minutes ago",hourAgo:"about an hour ago",hoursAgo:"about {delta} hours ago",dayAgo:"1 day ago",daysAgo:"{delta} days ago",weekAgo:"1 week ago",weeksAgo:"{delta} weeks ago",monthAgo:"1 month ago",monthsAgo:"{delta} months ago",yearAgo:"1 year ago",yearsAgo:"{delta} years ago",lessThanMinuteUntil:"less than a minute from now",minuteUntil:"about a minute from now",minutesUntil:"{delta} minutes from now",hourUntil:"about an hour from now",hoursUntil:"about {delta} hours from now",dayUntil:"1 day from now",daysUntil:"{delta} days from now",weekUntil:"1 week from now",weeksUntil:"{delta} weeks from now",monthUntil:"1 month from now",monthsUntil:"{delta} months from now",yearUntil:"1 year from now",yearsUntil:"{delta} years from now"}); diff --git a/src/webui/upload.html b/src/webui/upload.html index 2d912ff71..cb58719e4 100644 --- a/src/webui/upload.html +++ b/src/webui/upload.html @@ -4,13 +4,9 @@ _(Download local torrent) - - @@ -18,11 +14,7 @@ function showSuccess() {

    _(Download local torrent)

    - -
    diff --git a/src/webui/uploadframe.html b/src/webui/uploadframe.html index c413f9c0e..11fb025ee 100644 --- a/src/webui/uploadframe.html +++ b/src/webui/uploadframe.html @@ -4,9 +4,7 @@ _(Download local torrent) - - diff --git a/src/webui/uploadlimit.html b/src/webui/uploadlimit.html index 643934a34..eb3ac2280 100644 --- a/src/webui/uploadlimit.html +++ b/src/webui/uploadlimit.html @@ -7,7 +7,7 @@ - +