home *** CD-ROM | disk | FTP | other *** search
/ Joystick Magazine 2003 November / CD1_JOY_153.iso / demos / NHL2004Demo.exe / fe / COMMON / htc / scroller / newSlider.js < prev   
Encoding:
Text File  |  2003-08-20  |  34.1 KB  |  819 lines
  1. function Slider(win, size, orient, thumbSize, min_value, max_value, page_value, line_size, skin)
  2. {
  3.     Slider.prototype.uniqueID++;
  4.  
  5.     this.soundCounter        = 1;
  6.     this.uniqueID            = Slider.prototype.uniqueID;
  7.     this.window            = ( (win) && (!isNaN(win.screenLeft)) ) ? win :window;
  8.     this.document            = this.window.document;
  9.     this.written            = false;
  10.     this.thumbSize            = thumbSize;
  11.     this.thumbPressed        = false;
  12.     this.thumbOver            = false;
  13.     this.btn1Pressed        = false;
  14.     this.btn1Over            = false;
  15.     this.btn2Pressed        = false;
  16.     this.btn2Over            = false;
  17.     this.skin                = null;
  18.     this.oneThumbImage        = false;
  19.     this.valueOnThumb        = false;
  20.     this.btnPressedTime        = 0;
  21.     this.btnTimerID            = 0;
  22.     this.trackPressed        = false;
  23.     this.trackOver            = false;
  24.     this.ondrag_fireOnChange    = false;
  25.     this.disabled            = false;
  26.     this.size                = size;
  27.     this.orient                = orient;
  28.     this.min_value            = min_value;
  29.     this.max_value            = max_value;
  30.     this.page_value            = page_value;
  31.     this.line_size            = line_size;
  32.     this.ratio                = 0;
  33.     this.value                = min_value;
  34.     this.movement            = {};
  35.     this.movement.newPos    = 0;
  36.     this.movement.deltaPos    = 0;
  37.     this.movement.startPos    = 0;
  38.     if (this.orient == "horizontal") {
  39.         this.movement.eventOrient            = "screenX";
  40.         this.movement.pixelOrient            = "pixelLeft";
  41.         this.movement.sizeOrient            = "width";
  42.         this.movement.pixelSizeOrient        = "pixelWidth";
  43.         this.movement.eventOffsetOrient    = "offsetX";
  44.         this.movement.opp                = {};
  45.         this.movement.opp.pixelSizeOrient    = "pixelHeight";
  46.         this.movement.opp.sizeOrient        = "height";
  47.         this.movement.opp.pixelOrient        = "pixelTop";
  48.         this.movement.opp.eventOffsetOrient    = "offsetY";
  49.         this.movement.opp.eventOrient        = "screenY";
  50.         this.skin                        = (skin) ? skin : Slider.DefaultSkins.hsb;
  51.  
  52.         if (!this.skin.thumbImg_1 && !this.skin.thumbImg_2) { this.oneThumbImage = true; };
  53.         if (this.skin.thumbTxtColor_nml) { this.valueOnThumb = true; };
  54.  
  55.     } else {
  56.         this.movement.eventOrient            = "screenY";
  57.         this.movement.pixelOrient            = "pixelTop";
  58.         this.movement.sizeOrient            = "height";
  59.         this.movement.pixelSizeOrient        = "pixelHeight";
  60.         this.movement.eventOffsetOrient    = "offsetY";
  61.         this.movement.opp                = {};
  62.         this.movement.opp.pixelSizeOrient    = "pixelWidth";
  63.         this.movement.opp.sizeOrient        = "width";
  64.         this.movement.opp.pixelOrient        = "pixelLeft";
  65.         this.movement.opp.eventOffsetOrient    = "offsetX";
  66.         this.movement.opp.eventOrient        = "screenX";
  67.         this.skin                        = (skin) ? skin : Slider.DefaultSkins.vsb;
  68.  
  69.         if (!this.skin.thumbImg_1 && !this.skin.thumbImg_2) { this.oneThumbImage = true; };
  70.         if (this.skin.thumbTxtColor_nml) { this.valueOnThumb = true; };
  71.     };
  72.     this.element            = Slider.Template();
  73.     this.element.id            = "slider_" + this.uniqueID;
  74.  
  75.     this.window.SliderMgr.register(this.element.id, this);
  76.  
  77.     this.btn1_element        = this.element.childNodes[0];
  78.     this.track_element        = this.element.childNodes[1];
  79.     this.thumb_element        = this.element.childNodes[2];
  80.     this.btn2_element        = this.element.childNodes[3];
  81.     this.thumb_element_img0    = this.thumb_element.childNodes[0];
  82.     this.thumb_element_img1    = this.thumb_element.childNodes[1];
  83.     this.thumb_element_img2    = this.thumb_element.childNodes[2];
  84.     this.thumb_element_text    = this.thumb_element.childNodes[3];
  85.  
  86.     var btn1JAXImg            = this.skin.btn1Img.getImage();
  87.     var btn2JAXImg            = this.skin.btn2Img.getImage();
  88.     var thumb0Img, thumb1Img, thumb2Img;
  89.  
  90.     thumb0Img    = this.skin.thumbImg_0.getImage();
  91.  
  92.     if (!this.oneThumbImage) {
  93.         thumb1Img            = this.skin.thumbImg_1.getImage();
  94.         thumb2Img            = this.skin.thumbImg_2.getImage();
  95.     };
  96.  
  97.     with (this) {
  98.         with (element.style) {
  99.             pixelWidth        = (orient == "horizontal") ? size : btn1JAXImg.width;
  100.             pixelHeight    = (orient != "horizontal") ? size  : btn1JAXImg.height;
  101.         };
  102.         with (btn1_element) {
  103.             src        = btn1JAXImg.src;
  104.             width    = btn1JAXImg.width;
  105.             height    = btn1JAXImg.height;
  106.             id        = element.id + "_btn1";
  107.         };
  108.         with (btn2_element) {
  109.             src        = btn2JAXImg.src;
  110.             width    = btn2JAXImg.width;
  111.             height    = btn2JAXImg.height;
  112.             id        = element.id + "_btn2";
  113.         };
  114.         with (track_element) {
  115.             src        = skin.trackImg.getImage().src;
  116.             id        = element.id + "_track";
  117.         };
  118.         with (thumb_element) {
  119.             id        = element.id + "_thumb";
  120.             with (style) {
  121.                 pixelTop        = (orient == "horizontal") ? 0 : btn1JAXImg.height;
  122.                 pixelLeft        = (orient != "horizontal")  ? 0 : btn1JAXImg.width;
  123.             };
  124.         };
  125.         with (thumb_element_img0) {
  126.             src         = thumb0Img.src;
  127.             width    = thumb0Img.width;
  128.             height    = thumb0Img.height;
  129.             id        = thumb_element.id + "_img0";
  130.         };
  131.         if (!oneThumbImage) {
  132.             with (thumb_element_img1) {
  133.                 src    = thumb1Img.src;
  134.                 width= thumb1Img.width;
  135.                 height=thumb1Img.height;
  136.                 id    = thumb_element.id + "_img1";
  137.             };
  138.             with (thumb_element_img2) {
  139.                 src     = thumb2Img.src;
  140.                 width= thumb2Img.width;
  141.                 height=thumb2Img.height;
  142.                 id    = thumb_element.id + "_img2";
  143.             };
  144.         } else {
  145.             with (thumb_element_img1) {
  146.                 src            = "";
  147.                 width        = 0;
  148.                 height        = 0;
  149.                 id    = thumb_element.id + "_img1";
  150.             };
  151.             with (thumb_element_img2) {
  152.                 src            = "";
  153.                 width        = 0;
  154.                 height        = 0;
  155.                 id            = thumb_element.id + "_img2";
  156.             };
  157.         };
  158.         if (valueOnThumb) {
  159.             thumb_element_text.style.fontSize        = skin.thumbTxtFontSize + "px";
  160.             thumb_element_text.style.color            = skin.thumbTxtColor_nml;
  161.         };
  162.         if (orient != "horizontal") {
  163.             thumb_element_img0.style.display = "block";
  164.             thumb_element_img1.style.display = "block";
  165.         };
  166.         thumb_element_text.id    = thumb_element.id + "_text";
  167.     };
  168.  
  169.     this.Resize();
  170.     this.CalcThumbSize();
  171.     this.CalcMovementRange();
  172.  
  173. };
  174. Slider.prototype.uniqueID        = 0;
  175. Slider.prototype.write            = function(win, adjacentEl, whereStr)
  176. {
  177.     if (win) {
  178.         if (this.window != win) {
  179.             this.window    = win;
  180.             this.document    = win.document;
  181.         };
  182.     };
  183.     with (this) {
  184.         if (!whereStr) { whereStr = "beforeEnd"; };
  185.         if (!written) {
  186.             if (!adjacentEl) {
  187.                 if (document.readyState == "complete") {
  188.                     document.body.insertAdjacentHTML("beforeEnd", element.outerHTML);
  189.                 } else {
  190.                     document.write(element.outerHTML);
  191.                 };
  192.             } else {
  193.                 adjacentEl.insertAdjacentHTML(whereStr, element.outerHTML);
  194.             };
  195.         };
  196.         element                = document.all[element.id];
  197.         btn1_element            = element.all[btn1_element.id];
  198.         btn2_element            = element.all[btn2_element.id];
  199.         track_element            = element.all[track_element.id];
  200.         thumb_element            = element.all[thumb_element.id];
  201.  
  202.         thumb_element_img0        = thumb_element.all[thumb_element_img0.id];
  203.         thumb_element_img1        = thumb_element.all[thumb_element_img1.id];
  204.         thumb_element_img2        = thumb_element.all[thumb_element_img2.id];
  205.         thumb_element_text        = thumb_element.all[thumb_element_text.id];
  206.     };
  207. };
  208. Slider.prototype.getID            = function() { return this.element.id; };
  209. Slider.prototype.getMaxValue        = function() { return this.max_value; };
  210. Slider.prototype.getMinValue        = function() { return this.min_value; };
  211. Slider.prototype.getPageValue        = function() { return this.page_value; };
  212. Slider.prototype.setPageValue        = function(newPageValue) { this.page_value = newPageValue; };
  213. Slider.prototype.setSize            = function(newSize)
  214. {
  215.     with (this) {
  216.         size                = newSize;
  217.         Resize();
  218.         CalcThumbSize();
  219.         CalcMovementRange();
  220.         setValue(min_value);
  221.     };
  222. };
  223. Slider.prototype.getSize            = function() { return this.size; };
  224. Slider.prototype.getTrackSize         = function() { return (this.size - (this.skin.btn1Img.getImage()[this.movement.sizeOrient] + this.skin.btn2Img.getImage()[this.movement.sizeOrient])); };
  225. Slider.prototype.getValue            = function() { return this.value; };
  226. Slider.prototype.setValueRange        = function(newMin, newMax)
  227. {
  228.     with (this) {
  229.         max_value        = newMax;
  230.         min_value            = newMin;
  231.         CalcThumbSize();
  232.         CalcMovementRange();
  233.         this.setValue(min_value);
  234.     };
  235. };
  236. Slider.prototype.setValue            = function(newValue, fireChangeEvent)
  237. {
  238.     with (this) {
  239.         newValue            = (newValue < min_value)  ? min_value  : newValue;
  240.         newValue            = (newValue > max_value) ? max_value : newValue;
  241.         var delta    = (newValue == min_value) ? min_value : (max_value-min_value);
  242.         var newRatio = 0;
  243.         var newPos = movement.start;
  244.         if( delta != 0 )
  245.         {
  246.             newRatio        = (newValue - min_value) / (delta);
  247.             newPos            = Math.round((newRatio * movement.ratioDenominator) + movement.start);
  248.         }
  249.         movement.newPos                        = newPos;
  250.         thumb_element.style[movement.pixelOrient]    = newPos;
  251.         ratio                                    = newRatio;
  252.         value                                    = newValue;
  253.         if (fireChangeEvent)  { this.onchange(this.value); };
  254.         if (valueOnThumb) {     thumb_element_text.innerText = value; };
  255.     };
  256. };
  257. Slider.prototype.setSkin            = function()
  258. {
  259.     //alert("change slider art");
  260. };
  261. Slider.prototype.getThumbSize        = function() { return this.thumbSize; };
  262. Slider.prototype.setThumbSize        = function(newThumbSize)
  263. {
  264.     with (this) {
  265.         thumbSize            = newThumbSize;
  266.         CalcThumbSize();
  267.         CalcMovementRange();
  268.         this.setValue(min_value);
  269.     };
  270. };
  271. Slider.prototype.showValueOnThumb = function(bool)
  272. {
  273.     this.thumb_element_text.style.visibility = (bool) ? "visible" : "hidden";
  274. };
  275. Slider.prototype.getRatio            = function() { return this.ratio; };
  276. Slider.prototype.onDrag_fireOnChange    = function(bool)
  277. {
  278.     if (bool) {
  279.         this.ondrag_fireOnChange    = bool;
  280.     };
  281.     return this.ondrag_fireOnChange;
  282. };
  283.  
  284. Slider.prototype.onchange        = function(curValue) { };
  285.  
  286. Slider.prototype.CalcMovementRange        = function()
  287. {
  288.     with (this)
  289.     {
  290.         movement.start                = skin.btn1Img.getImage()[movement.sizeOrient];
  291.         movement.end                = (track_element.style[movement.pixelSizeOrient] - thumb_element.style[movement.pixelSizeOrient]) + skin.btn1Img.getImage()[movement.sizeOrient];
  292.         movement.ratioDenominator    = movement.end - movement.start;
  293.     };
  294. };
  295. Slider.prototype.Resize                = function()
  296. {
  297.     with (this)
  298.     {
  299.         track_element.style[movement.opp.pixelOrient]        = "0";
  300.         track_element.style[movement.pixelOrient]        = skin.btn1Img.getImage()[movement.sizeOrient];
  301.         track_element.style[movement.opp.pixelSizeOrient]    = skin.trackImg.getImage()[movement.opp.sizeOrient];
  302.         track_element.style[movement.pixelSizeOrient]        = size - (skin.btn1Img.getImage()[movement.sizeOrient] + skin.btn2Img.getImage()[movement.sizeOrient]);
  303.         btn2_element.style[movement.opp.pixelOrient]        = "0";
  304.         btn2_element.style[movement.pixelOrient]            = track_element.style[movement.pixelSizeOrient] + skin.btn1Img.getImage()[movement.sizeOrient];
  305.         element.style[movement.pixelSizeOrient]            = size;
  306.         element.style[movement.opp.pixelSizeOrient]        = skin.btn1Img.getImage()[movement.opp.sizeOrient];
  307.     };
  308. };
  309. Slider.prototype.CalcThumbSize            = function()
  310. {
  311.     var trackSize, thumbSide1, thumbWidth, thumbSide2, thumbRatio, linesRatio;
  312.  
  313.     with (this)
  314.     {
  315.         thumb_0        = skin.thumbImg_0.getImage();
  316.         if (!oneThumbImage) {
  317.             thumb_1        = skin.thumbImg_1.getImage();
  318.             thumb_2        = skin.thumbImg_2.getImage();
  319.         };
  320.  
  321.         trackSize        = track_element.style[movement.pixelSizeOrient];
  322.         thumbSide1    = thumb_0[movement.sizeOrient];
  323.         thumbSide2    = (!oneThumbImage) ? thumb_2[movement.sizeOrient]: 0;
  324.         thumbWidth    = 1;
  325.         thumbRatio    = ( ( ((max_value - min_value)  + min_value) / trackSize) / line_size);
  326.         var tmp        = Math.max( (( (1 / Math.abs(max_value - min_value) ) * trackSize) - 18), 19);
  327.         if (thumbSize < 0) {
  328.             thumbWidth        = tmp;
  329.             if (thumbWidth >= trackSize) {
  330.                 disabled         = true;
  331.             } else {
  332.                 if (thumbWidth < (thumbSide1 + thumbSide2) ) {
  333.                     thumbWidth    = 1;
  334.                     disabled        = false;
  335.                 } else {
  336.                     thumbWidth        = Math.round(thumbWidth - (thumbSide1 + thumbSide2));
  337.                     disabled    = false;
  338.                 };
  339.                 if ((thumbWidth + thumbSide1 + thumbSide2) > trackSize) {
  340.                     disabled    =     true;
  341.                 } else {
  342.                     disabled    = false;
  343.                 };
  344.             };
  345.         } else {
  346.             if (!oneThumbImage) {
  347.                 if (thumbSize >= (thumbSide1 + thumbSide2) ) {
  348.                     thumbWidth    = (thumbSize < trackSize && (thumbSize > (thumbSide1 + thumbSide2))) ? thumbSize - (thumbSide1 + thumbSide2) : 0;
  349.                 } else {
  350.                     thumbWidth    = 1;
  351.                 };
  352.                 disabled        = (thumbWidth) ? false : true;
  353.             } else {
  354.                 thumbWidth    = thumbSide1;
  355.                 disabled        = (thumbWidth) ? false : true;
  356.             };
  357.         };
  358.         if (!disabled) {
  359.             if (!oneThumbImage) {
  360.                 thumb_element_img1[movement.sizeOrient]        = thumbWidth;
  361.                 thumb_element_img1[movement.opp.sizeOrient]        = thumb_1[movement.opp.sizeOrient];
  362.                 thumb_element.style[movement.pixelSizeOrient]    = (thumbSide1 + thumbSide2 + thumbWidth);
  363.                 thumb_element.style[movement.opp.pixelSizeOrient]    = thumb_1[movement.opp.sizeOrient];
  364.  
  365.             } else {
  366.                 thumb_element.style[movement.pixelSizeOrient]    = thumbWidth;
  367.                 thumb_element.style[movement.opp.pixelSizeOrient]    = thumb_0[movement.opp.sizeOrient];
  368.  
  369.                 thumb_element_img0[movement.sizeOrient]        = thumbWidth;
  370.                 thumb_element_img0[movement.opp.sizeOrient]        = thumb_element.style[movement.opp.pixelSizeOrient];
  371.             };
  372.             if (valueOnThumb) {
  373.                 thumb_element_text.style.pixelWidth    = thumb_0[movement.sizeOrient];
  374.                 thumb_element_text.style.pixelHeight    = thumb_0[movement.opp.sizeOrient];
  375.                 thumb_element_text.style.pixelTop        = ( Math.round(thumb_element.style.pixelHeight /2) - Math.round(thumb_element_text.style.pixelHeight / 3)) ;
  376.                 thumb_element_text.style.pixelLeft        = ( Math.round(thumb_element.style.pixelWidth /2) - Math.round(thumb_element_text.style.pixelWidth / 2));
  377.             };
  378.         } else {
  379.             with (thumb_element_img1) {
  380.                 width    = 0;
  381.                 height    = 0;
  382.             };
  383.             with (thumb_element.style) {
  384.                 pixelWidth        = 0;
  385.                 pixelHeight        = 0;
  386.             };
  387.             thumb_element.style[movement.pixelOrient]            = skin.btn1Img.getImage()[movement.sizeOrient];
  388.             thumb_element.style[movement.opp.pixelOrient]            = 0;
  389.         };
  390.     };
  391. };
  392. Slider.DefaultSkins        = {};
  393. Slider.DefaultSkins.hsb    =
  394. {
  395.     btn1Img:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/left_arrow00.gif",                                    16, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  396.     btn2Img:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/right_arrow00.gif",                                 16, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  397.     trackImg:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/slider_mid.gif",                                     1,  16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  398.     thumbImg_0:        eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/" + System.GUI.getTeamSkin() + "/slider_handle.gif",      9, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  399.     thumbImg_1:        eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/" + System.GUI.getTeamSkin() + "/slider_handle.gif",      1, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  400.     thumbImg_2:        eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/" + System.GUI.getTeamSkin() + "/slider_handle.gif",     9, 16, "_nml.gif", "_hov.gif", "_dwn.gif")
  401. };
  402. Slider.DefaultSkins.vsb    =
  403. {
  404.     btn1Img:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/up_arrow00.gif",        16, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  405.     btn2Img:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/down_arrow00.gif",         16, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  406.     trackImg:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/slider_mid_vert.gif",        16,  1, "_nml.gif", "_hov.gif", "_dwn.gif"),
  407.     thumbImg_0:        eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/" + System.GUI.getTeamSkin() + "/slider_handle_vert.gif",     16,  9, "_nml.gif", "_hov.gif", "_dwn.gif"),
  408.     thumbImg_1:        eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/" + System.GUI.getTeamSkin() + "/slider_handle_vert.gif",      16,  1, "_nml.gif", "_hov.gif", "_dwn.gif"),
  409.     thumbImg_2:        eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/" + System.GUI.getTeamSkin() + "/slider_handle_vert.gif",    16,  9, "_nml.gif", "_hov.gif", "_dwn.gif")
  410. };
  411. Slider.DefaultSkins.hs    =
  412. {
  413.     btn1Img:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/left_arrow00.gif",        16, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  414.     btn2Img:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/right_arrow00.gif",         16, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  415.     trackImg:            eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/slider_mid.gif",        1,   16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  416.     thumbImg_0:        eaImage.createWithConvention(System.getInstallFolder() + "fe/nhl/images2/widgets/" + System.GUI.getTeamSkin() + "/slider_handle.gif",     48, 16, "_nml.gif", "_hov.gif", "_dwn.gif"),
  417.     thumbTxtFontSize:    10,
  418.     thumbTxtColor_nml:    "white",
  419.     thumbTxtColor_ovr:    "white",
  420.     thumbTxtColor_dwn:    "white"
  421. };
  422.  
  423. Slider.Template        = function()
  424. {
  425.     if (!Slider.Template.outerHTML) {
  426.         var outerHTML        = new Array();
  427.             outerHTML[0]    = "<DIV id='' hideFocus style='DISPLAY: inline; OVERFLOW: hidden; WIDTH: 400px; CURSOR: hand; POSITION: relative; HEIGHT: 0px;' tabIndex=-1 noWrap>";
  428.             outerHTML[1]    = "</DIV>";
  429.         Slider.Template.outerHTML = outerHTML.join("");
  430.     };
  431.     if (!Slider.Template.innerHTML) {
  432.         var innerHTML        = new Array();
  433.             innerHTML[0]    = "<IMG id='' style='LEFT: 0px; POSITION: absolute; TOP: 0px' height=30 alt='' src='' width=28 border=0 onmouseover='SliderMgr.onBtnOver(1, this.id);' onmouseout='SliderMgr.onBtnOut(1, this.id);' onmousedown='SliderMgr.onBtnDwn(1, this.id);' onmouseup='SliderMgr.onBtnUp(1, this.id);'>";
  434.             innerHTML[1]    = "<IMG id='' style='OVERFLOW: hidden; POSITION: absolute;' height=30 alt='' src='' width=28 border=0 onmouseover='SliderMgr.onTrackOvr(this.id);' onmouseout='SliderMgr.onTrackOut(this.id);' onmousedown='SliderMgr.onTrackDwn(this.id);' onmouseup='SliderMgr.onTrackUp(this.id);'>";
  435.             innerHTML[2]    = "<SPAN id='' style='Z-INDEX: 1; LEFT: 0px; OVERFLOW: hidden; POSITION: absolute; TOP: 0px;font-size:1px;' onmouseover='SliderMgr.onThumbOvr(this.id);' onmouseout='SliderMgr.onThumbOut(this.id);' onmousemove='SliderMgr.onThumbMove(this.id);' onmousedown='SliderMgr.onThumbDown(this.id);' onmouseup='SliderMgr.onThumbUp(this.id);'>";
  436.             innerHTML[3]    = "<IMG id='' style='Z-INDEX: 1; POSITION: relative;display:inline;' height=30 alt='' src='' width=28 border=0>";
  437.             innerHTML[4]    = "<IMG id='' style='Z-INDEX: 1; POSITION: relative;display:inline;' height=30 alt='' src='' width=28 border=0>";
  438.             innerHTML[5]    = "<IMG id='' style='Z-INDEX: 1; POSITION: relative;' height=30 alt='' src='' width=28 border=0>";
  439.             innerHTML[6]    = "<DIV id='' style='DISPLAY: inline; FONT-WEIGHT: bold; FONT-SIZE: 10px; Z-INDEX: 2; OVERFLOW: hidden; FONT-FAMILY: arial; POSITION: absolute; TEXT-ALIGN: center'></DIV>";
  440.             innerHTML[7]    = "</SPAN><IMG id='' style='POSITION: absolute;' height=30 alt='' src='' width=28 border=0 onmouseover='SliderMgr.onBtnOver(2, this.id);' onmouseout='SliderMgr.onBtnOut(2, this.id);' onmousedown='SliderMgr.onBtnDwn(2, this.id);' onmouseup='SliderMgr.onBtnUp(2, this.id);'>";
  441.         Slider.Template.innerHTML = innerHTML.join("");
  442.         outerHTML = innerHTML = null;
  443.     };
  444.     Slider.Template.element    = document.createElement(Slider.Template.outerHTML);
  445.     Slider.Template.element.insertAdjacentHTML("beforeEnd", Slider.Template.innerHTML);
  446.     return Slider.Template.element;
  447. };
  448.  
  449.  
  450. var SliderMgr        = { sliders: [] };
  451.  
  452. SliderMgr.register        = function(id, sliderObj)
  453. {
  454.     SliderMgr[id] = sliderObj;
  455. };
  456. SliderMgr.AnimateInterval        = function(nWhich, elID)
  457. {
  458.     var sliderObj            = SliderMgr[elID.replace(/_btn./gi, "")];
  459.     if ((sliderObj.btnPressedTime + 250)  <  ((new Date()).getTime())  ) {
  460.          if (sliderObj.btn1Pressed) {
  461.              if ( ((sliderObj.value -1) - sliderObj.page_value) < sliderObj.min_value) {
  462.                  sliderObj.setValue( (sliderObj.value -1), sliderObj.ondrag_fireOnChange );
  463.              } else {
  464.                  sliderObj.setValue( ((sliderObj.value - 1) - sliderObj.page_value), sliderObj.ondrag_fireOnChange );
  465.              };
  466.          } else if (sliderObj.btn2Pressed) {
  467.              if ( ((sliderObj.value + 1) + sliderObj.page_value) > sliderObj.max_value) {
  468.                  sliderObj.setValue( (sliderObj.value + 1), sliderObj.ondrag_fireOnChange );
  469.              } else {
  470.                  sliderObj.setValue( ((sliderObj.value + 1) + sliderObj.page_value), sliderObj.ondrag_fireOnChange );
  471.              };
  472.         };
  473.    if(sliderObj.btn2Pressed || sliderObj.btn1Pressed)
  474.    {
  475.          if ((sliderObj.soundCounter % 10) == 0) {
  476.              System.GUI.playSFX(11);
  477.              sliderObj.soundCounter = 1;
  478.          } else {
  479.              sliderObj.soundCounter++;
  480.          };
  481.    };
  482.      };
  483.      sliderObj = null;
  484. };
  485.  
  486. SliderMgr.onBtnOver        = function(nWhich, elID)
  487. {
  488.     var sliderObj            = SliderMgr[elID.replace(/_btn./gi, "")];
  489.  
  490.     if (nWhich == 1) {
  491.         if ( !(sliderObj.window.event.srcElement === sliderObj.btn1_element) ) { return; };
  492.         if (!sliderObj.btn1Pressed) {
  493.             //sliderObj.btn1_element.src        = sliderObj.skin.btn1Img.getImage("over").src;
  494.             sliderObj.btn1_element.src = sliderObj.skin.btn1Img.getImage("over").src.replace("00.gif", "01.gif");
  495.         };
  496.         sliderObj.btn1Over    = true;
  497.     } else {
  498.         if ( !(sliderObj.window.event.srcElement === sliderObj.btn2_element) ) { return; };
  499.         if (!sliderObj.btn2Pressed) {
  500.             //sliderObj.btn2_element.src        = sliderObj.skin.btn2Img.getImage("over").src;
  501.             sliderObj.btn2_element.src = sliderObj.skin.btn2Img.getImage("over").src.replace("00.gif", "01.gif");
  502.         };
  503.         sliderObj.btn2Over    = true;
  504.     };
  505.     sliderObj = null;
  506. };
  507. SliderMgr.onBtnOut        = function(nWhich, elID)
  508. {
  509.     var sliderObj        = SliderMgr[elID.replace(/_btn./gi, "")];
  510.      if (nWhich == 1) {
  511.          if ( !(sliderObj.window.event.srcElement === sliderObj.btn1_element) ) { return; };
  512.          sliderObj.thumb_element_img0.src        = sliderObj.skin.thumbImg_0.getImage().src;
  513.         if (!sliderObj.oneThumbImage) {
  514.             sliderObj.thumb_element_img1.src        = sliderObj.skin.thumbImg_1.getImage().src;
  515.             sliderObj.thumb_element_img2.src        = sliderObj.skin.thumbImg_2.getImage().src;
  516.         };
  517.         sliderObj.track_element.src            = sliderObj.skin.trackImg.getImage().src;
  518.          sliderObj.window.clearInterval(sliderObj.btnTimerID);
  519.          sliderObj.btn1Pressed    = false;
  520.          sliderObj.btnPressedTime = -1;
  521.          sliderObj.btn1_element.src            = sliderObj.skin.btn1Img.getImage().src;
  522.          sliderObj.btn1Over    = false;
  523.          sliderObj.btnTimerID    = -1;
  524.      } else {
  525.          if ( !(sliderObj.window.event.srcElement === sliderObj.btn2_element) ) { return; };
  526.         sliderObj.thumb_element_img0.src        = sliderObj.skin.thumbImg_0.getImage().src;
  527.         if (!sliderObj.oneThumbImage) {
  528.             sliderObj.thumb_element_img1.src        = sliderObj.skin.thumbImg_1.getImage().src;
  529.             sliderObj.thumb_element_img2.src        = sliderObj.skin.thumbImg_2.getImage().src;
  530.         };
  531.         sliderObj.track_element.src            = sliderObj.skin.trackImg.getImage().src;
  532.         sliderObj.window.clearInterval(sliderObj.btnTimerID);
  533.         sliderObj.btn2Pressed            = false;
  534.         sliderObj.btnPressedTime            = -1;
  535.         sliderObj.btn2_element.src            = sliderObj.skin.btn2Img.getImage().src;
  536.          sliderObj.btn2Over    = false;
  537.          sliderObj.btnTimerID    = -1;
  538.      };
  539.     sliderObj = null;
  540. };
  541. SliderMgr.onBtnDwn        = function(nWhich, elID)
  542. {
  543.     var sliderObj        = SliderMgr[elID.replace(/_btn./gi, "")];
  544.  
  545.     if (nWhich == 1) {
  546.         if (!sliderObj.btn1Pressed) {
  547.              sliderObj.btn1_element.src            = sliderObj.skin.btn1Img.getImage("down").src;
  548.              sliderObj.btn1Pressed            = true;
  549.              sliderObj.btn1Over                = true;
  550.              sliderObj.btnPressedTime            = (new Date()).getTime();
  551.              sliderObj.btnTimerID                = sliderObj.window.setInterval(function() { SliderMgr.AnimateInterval(nWhich, elID); }, 1);
  552.              sliderObj.thumb_element_img0.src    = sliderObj.skin.thumbImg_0.getImage("down").src;
  553.              if (!sliderObj.oneThumbImage) {
  554.                  sliderObj.thumb_element_img1.src        = sliderObj.skin.thumbImg_1.getImage("down").src;
  555.                  sliderObj.thumb_element_img2.src        = sliderObj.skin.thumbImg_2.getImage("down").src;
  556.              };
  557.             sliderObj.track_element.src            = sliderObj.skin.trackImg.getImage("over").src;
  558.             sliderObj.setValue( (sliderObj.getValue() -1), true );
  559.             if (sliderObj.valueOnThumb) {
  560.                 sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_dwn;
  561.             };
  562.          };
  563.     } else {
  564.         if (!sliderObj.btn2Pressed) {
  565.              sliderObj.btn2_element.src            = sliderObj.skin.btn2Img.getImage("down").src;
  566.              sliderObj.btn2Pressed             = true;
  567.              sliderObj.btn2Over                = true;
  568.              sliderObj.btnPressedTime            = (new Date()).getTime();
  569.              sliderObj.btnTimerID                = sliderObj.window.setInterval(function() { SliderMgr.AnimateInterval(nWhich, elID); }, 1);
  570.              sliderObj.thumb_element_img0.src    = sliderObj.skin.thumbImg_0.getImage("down").src;
  571.              if (!sliderObj.oneThumbImage) {
  572.                  sliderObj.thumb_element_img1.src        = sliderObj.skin.thumbImg_1.getImage("down").src;
  573.                  sliderObj.thumb_element_img2.src        = sliderObj.skin.thumbImg_2.getImage("down").src;
  574.              };
  575.              sliderObj.track_element.src            = sliderObj.skin.trackImg.getImage("over").src;
  576.             sliderObj.setValue( (sliderObj.getValue() + 1), true );
  577.             if (sliderObj.valueOnThumb) {
  578.                 sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_dwn;
  579.             };
  580.          };
  581.      };
  582.      System.GUI.playSFX(10);
  583.     sliderObj = null;
  584. };
  585. SliderMgr.onBtnUp        = function(nWhich, elID)
  586. {
  587.     var sliderObj        = SliderMgr[elID.replace(/_btn./gi, "")];
  588.     if (nWhich == 1) {
  589.         if (sliderObj.btn1Over) {
  590.              sliderObj.btn1_element.src            = sliderObj.skin.btn1Img.getImage("over").src;
  591.          } else {
  592.              sliderObj.btn1_element.src            = sliderObj.skin.btn1Img.getImage().src;
  593.          };
  594.          sliderObj.btn1Pressed        = false;
  595.      } else {
  596.         if (sliderObj.btn2Over) {
  597.              sliderObj.btn2_element.src            = sliderObj.skin.btn2Img.getImage("over").src;
  598.          } else {
  599.              sliderObj.btn2_element.src            = sliderObj.skin.btn2Img.getImage().src;
  600.          };
  601.          sliderObj.btn2Pressed        = false;
  602.      };
  603.      sliderObj.thumb_element_img0.src        = sliderObj.skin.thumbImg_0.getImage().src;
  604.     if (!sliderObj.oneThumbImage) {
  605.         sliderObj.thumb_element_img1.src        = sliderObj.skin.thumbImg_1.getImage().src;
  606.         sliderObj.thumb_element_img2.src        = sliderObj.skin.thumbImg_2.getImage().src;
  607.     };
  608.     sliderObj.track_element.src            = sliderObj.skin.trackImg.getImage().src;
  609.     if (sliderObj.valueOnThumb) {
  610.         sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_nml;
  611.     };
  612.     if (!sliderObj.ondrag_fireOnChange) {
  613.         sliderObj.onchange(sliderObj.value);
  614.     };
  615.     sliderObj.window.clearInterval(sliderObj.btnTimerID);
  616.      sliderObj.btnTimerID        = 0;
  617.      sliderObj.btnPressedTime    = 0;
  618. };
  619. SliderMgr.onTrackOvr    = function(elID)
  620. {
  621.     var sliderObj        = SliderMgr[elID.replace(/_track.*/gi, "")];
  622.  
  623.     if (sliderObj.trackOver)     {
  624.         sliderObj.track_element.src    = sliderObj.skin.trackImg.getImage("over").src;
  625.     };
  626.     sliderObj.trackOver    = true;
  627.     sliderObj = null;
  628. };
  629. SliderMgr.onTrackDwn    = function(elID)
  630. {
  631.     var sliderObj        = SliderMgr[elID.replace(/_track.*/gi, "")];
  632.      if (!sliderObj.trackPressed) {
  633.          sliderObj.track_element.src                = sliderObj.skin.trackImg.getImage("down").src;
  634.          if ((sliderObj.window.event[sliderObj.movement.eventOffsetOrient] + sliderObj.skin.btn1Img.getImage()[sliderObj.movement.sizeOrient]) < sliderObj.movement.newPos) {
  635.              var newValue    = (sliderObj.getValue() -1) - sliderObj.page_value;
  636.              if (newValue < sliderObj.min_value) {
  637.                  sliderObj.setValue( sliderObj.min_value, true );
  638.              } else {
  639.                  sliderObj.setValue( newValue, true );
  640.              };
  641.              sliderObj.btn1_element.src                                = sliderObj.skin.btn1Img.getImage("down").src;
  642.          } else if ((sliderObj.window.event[sliderObj.movement.eventOffsetOrient] + sliderObj.skin.btn1Img.getImage()[sliderObj.movement.sizeOrient]) > (sliderObj.movement.newPos + sliderObj.thumbSize)) {
  643.             var newValue    = (sliderObj.getValue() +1) + sliderObj.page_value;
  644.             if (newValue > sliderObj.max_value) {
  645.                 sliderObj.setValue( sliderObj.max_value, true);
  646.             } else {
  647.                  sliderObj.setValue( newValue, true );
  648.              };
  649.              sliderObj.btn2_element.src                    = sliderObj.skin.btn2Img.getImage("down").src;
  650.          };
  651.          sliderObj.thumb_element_img0.src            = sliderObj.skin.thumbImg_0.getImage("down").src;
  652.          if (!sliderObj.oneThumbImage) {
  653.              sliderObj.thumb_element_img1.src            = sliderObj.skin.thumbImg_1.getImage("down").src;
  654.              sliderObj.thumb_element_img2.src            = sliderObj.skin.thumbImg_2.getImage("down").src;
  655.          };
  656.         if (sliderObj.valueOnThumb) {
  657.             sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_dwn;
  658.         };
  659.         System.GUI.playSFX(10);
  660.      };
  661.      sliderObj.trackPressed            = true;
  662.     sliderObj = null;
  663. };
  664. SliderMgr.onTrackOut    = function(elID)
  665. {
  666.     var sliderObj        = SliderMgr[elID.replace(/_track.*/gi, "")];
  667.     if (sliderObj.trackOver)     {
  668.         sliderObj.track_element.src    = sliderObj.skin.trackImg.getImage().src;
  669.     };
  670.     sliderObj.trackOver    = false;
  671.     sliderObj = null;
  672. };
  673. SliderMgr.onTrackUp    = function(elID)
  674. {
  675.     var sliderObj        = SliderMgr[elID.replace(/_track.*/gi, "")];
  676.      if (sliderObj.trackPressed) {
  677.          sliderObj.track_element.src        = sliderObj.skin.trackImg.getImage("over").src;
  678.      };
  679.      sliderObj.thumb_element_img0.src        = sliderObj.skin.thumbImg_0.getImage().src;
  680.     if (!sliderObj.oneThumbImage) {
  681.         sliderObj.thumb_element_img1.src        = sliderObj.skin.thumbImg_1.getImage().src;
  682.         sliderObj.thumb_element_img2.src        = sliderObj.skin.thumbImg_2.getImage().src;
  683.     };
  684.     if (sliderObj.valueOnThumb) {
  685.         sliderObj.thumb_element_text.style.color        = sliderObj.skin.thumbTxtColor_nml;
  686.     };
  687.     sliderObj.btn1_element.src            = sliderObj.skin.btn1Img.getImage().src;
  688.      sliderObj.btn2_element.src        = sliderObj.skin.btn2Img.getImage().src;
  689.      sliderObj.trackPressed            = false;
  690.  
  691.     sliderObj = null;
  692. };
  693. SliderMgr.onThumbOvr    = function(elID)
  694. {
  695.     var sliderObj        = SliderMgr[elID.replace(/_thumb.*/gi, "")];
  696.     if (!sliderObj.window.event.srcElement.id.match(elID)) { return; };
  697.     if (!sliderObj.thumbPressed) {
  698.         sliderObj.thumb_element_img0.src            = sliderObj.skin.thumbImg_0.getImage("over").src;
  699.         if (!sliderObj.oneThumbImage) {
  700.             sliderObj.thumb_element_img1.src        = sliderObj.skin.thumbImg_1.getImage("over").src;
  701.             sliderObj.thumb_element_img2.src        = sliderObj.skin.thumbImg_2.getImage("over").src;
  702.         };
  703.         if (sliderObj.valueOnThumb) {
  704.             sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_ovr;
  705.         };
  706.      };
  707.      sliderObj.thumbOver        = true;
  708.      sliderObj    = null;
  709. };
  710. SliderMgr.onThumbOut    = function(elID)
  711. {
  712.     var sliderObj        = SliderMgr[elID.replace(/_thumb.*/gi, "")];
  713.     if (!sliderObj.thumbPressed) {
  714.         sliderObj.thumb_element_img0.src            = sliderObj.skin.thumbImg_0.getImage().src;
  715.         if (!sliderObj.oneThumbImage) {
  716.             sliderObj.thumb_element_img1.src        = sliderObj.skin.thumbImg_1.getImage().src;
  717.             sliderObj.thumb_element_img2.src        = sliderObj.skin.thumbImg_2.getImage().src;
  718.         };
  719.         if (sliderObj.valueOnThumb) {
  720.             sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_nml;
  721.         };
  722.      };
  723.      sliderObj.thumbOver            = false;
  724.      sliderObj = null;
  725. };
  726. SliderMgr.onThumbMove    = function(elID)
  727. {
  728.     var sliderObj        = SliderMgr[elID.replace(/_thumb.*/gi, "")];
  729.     sliderObj.window.event.cancelBubble    = true;
  730.  
  731.     if (!sliderObj.thumbPressed) { sliderObj = null; return; };
  732.  
  733.     sliderObj.track_element.src        = sliderObj.skin.trackImg.getImage("over").src;
  734.     with (sliderObj.movement) {
  735.         deltaPos        = sliderObj.window.event[eventOrient] - startPos;
  736.         startPos        = sliderObj.window.event[eventOrient];
  737.         newPos        = sliderObj.thumb_element.style[pixelOrient] + deltaPos;
  738.  
  739.         if (newPos <= start) { newPos = start; };
  740.         if (newPos >= end)   { newPos = end; };
  741.         if (newPos > sliderObj.thumb_element.style[pixelOrient]) {
  742.             sliderObj.btn1_element.src    = sliderObj.skin.btn1Img.getImage().src;
  743.             sliderObj.btn2_element.src    = sliderObj.skin.btn2Img.getImage("down").src;
  744.         } else {
  745.             if (newPos != start && newPos != end) {
  746.                 sliderObj.btn1_element.src    = sliderObj.skin.btn1Img.getImage("down").src;
  747.                 sliderObj.btn2_element.src    = sliderObj.skin.btn2Img.getImage().src;
  748.             };
  749.         };
  750.         sliderObj.thumb_element.style[pixelOrient]    = sliderObj.movement.newPos;
  751.         sliderObj.ratio                            = (sliderObj.movement.newPos - sliderObj.movement.start) / sliderObj.movement.ratioDenominator;
  752.         sliderObj.value                            = Math.round(sliderObj.ratio * (sliderObj.max_value - sliderObj.min_value)) + sliderObj.min_value;
  753.         if (sliderObj.valueOnThumb) {     sliderObj.thumb_element_text.innerText = sliderObj.value; };
  754.     };
  755.      if ((sliderObj.soundCounter % 10) == 0) {
  756.          System.GUI.playSFX(11);
  757.          sliderObj.soundCounter = 1;
  758.      } else {
  759.          sliderObj.soundCounter++;
  760.      };
  761.  
  762.      if (sliderObj.ondrag_fireOnChange) { sliderObj.onchange(sliderObj.value); };
  763.  
  764.     sliderObj = null;
  765. };
  766. SliderMgr.onThumbDown    = function(elID)
  767. {
  768.      var sliderObj        = SliderMgr[elID.replace(/_thumb.*/gi, "")];
  769.      sliderObj.thumb_element_img0.src            = sliderObj.skin.thumbImg_0.getImage("down").src;
  770.     if (!sliderObj.oneThumbImage) {
  771.         sliderObj.thumb_element_img1.src            = sliderObj.skin.thumbImg_1.getImage("down").src;
  772.         sliderObj.thumb_element_img2.src            = sliderObj.skin.thumbImg_2.getImage("down").src;
  773.     };
  774.     if (sliderObj.valueOnThumb) {
  775.         sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_dwn;
  776.     };
  777.     sliderObj.movement.startPos                = sliderObj.window.event[sliderObj.movement.eventOrient];
  778.     sliderObj.thumbPressed                    = true;
  779.     sliderObj.thumb_element.setCapture();
  780.     sliderObj = null;
  781. };
  782. SliderMgr.onThumbUp    = function(elID)
  783. {
  784.     var sliderObj        = SliderMgr[elID.replace(/_thumb.*/gi, "")];
  785.  
  786.     sliderObj.window.event.cancelBubble = true;
  787.     var oldValue        = sliderObj.value;
  788.     sliderObj.thumbPressed        = false;
  789.     sliderObj.ratio                = (sliderObj.movement.newPos - sliderObj.movement.start) / sliderObj.movement.ratioDenominator;
  790.     sliderObj.value                = Math.round(sliderObj.ratio * (sliderObj.max_value - sliderObj.min_value)) + sliderObj.min_value;
  791.  
  792.     sliderObj.thumb_element.releaseCapture();
  793.     sliderObj.track_element.src    = sliderObj.skin.trackImg.getImage().src;
  794.     sliderObj.btn2_element.src    = sliderObj.skin.btn2Img.getImage().src;
  795.     sliderObj.btn1_element.src    = sliderObj.skin.btn1Img.getImage().src;
  796.     if (sliderObj.thumbOver) {
  797.         sliderObj.thumb_element_img0.src            = sliderObj.skin.thumbImg_0.getImage("over").src;
  798.         if (!sliderObj.oneThumbImage) {
  799.             sliderObj.thumb_element_img1.src            = sliderObj.skin.thumbImg_1.getImage("over").src;
  800.             sliderObj.thumb_element_img2.src            = sliderObj.skin.thumbImg_2.getImage("over").src;
  801.         };
  802.         if (sliderObj.valueOnThumb) {
  803.             sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_ovr;
  804.         };
  805.      } else {
  806.         sliderObj.thumb_element_img0.src            = sliderObj.skin.thumbImg_0.getImage().src;
  807.         if (!sliderObj.oneThumbImage) {
  808.             sliderObj.thumb_element_img1.src            = sliderObj.skin.thumbImg_1.getImage().src;
  809.             sliderObj.thumb_element_img2.src            = sliderObj.skin.thumbImg_2.getImage().src;
  810.         };
  811.         if (sliderObj.valueOnThumb) {
  812.             sliderObj.thumb_element_text.style.color    = sliderObj.skin.thumbTxtColor_nml;
  813.         };
  814.      };
  815.     if (!sliderObj.ondrag_fireOnChange) { sliderObj.onchange(sliderObj.value); };
  816.  
  817.     sliderObj = null;
  818. };
  819.