@ -1,91 +1,129 @@
function init ( ) {
var ubwidget = $ ( "#ubwidget" ) . ubwidget ( {
width : 252 ,
height : 89
} ) ;
var ubwidget = $ ( "#ubwidget" ) . ubwidget ( {
width : 252 ,
height : 89
} ) ;
var space = $ ( "<div style='font-size:15px'>h</div>" ) . ubwbutton ( { w : 17 , h : 68 } ) ;
space . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
var spaceb = $ ( "<div style='font-size:15px'>m</div>" ) . ubwbutton ( { w : 17 , h : 68 } ) ;
spaceb . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
spaceb . find ( ".ubw-button-canvas" ) . unbind ( "mouseenter" ) ;
var spacec = $ ( "<div style='font-size:15px'>s</div>" ) . ubwbutton ( { w : 17 , h : 68 } ) ;
spacec . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
spacec . find ( ".ubw-button-canvas" ) . unbind ( "mouseenter" ) ;
var space = $ ( "<div style='font-size:15px'>h</div>" ) . ubwbutton ( {
w : 17 ,
h : 68
} ) ;
space . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
var spaceb = $ ( "<div style='font-size:15px'>m</div>" ) . ubwbutton ( {
w : 17 ,
h : 68
} ) ;
spaceb . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
spaceb . find ( ".ubw-button-canvas" ) . unbind ( "mouseenter" ) ;
var spacec = $ ( "<div style='font-size:15px'>s</div>" ) . ubwbutton ( {
w : 17 ,
h : 68
} ) ;
spacec . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
spacec . find ( ".ubw-button-canvas" ) . unbind ( "mouseenter" ) ;
var hours = $ ( "<div class='scroll' id='hours'>00</div>" ) . ubwbutton ( { w : 52 , h : 68 } , { bottom : 1 , top : 1 , right : 0 , left : 0 } ) ;
hours . find ( ".ubw-button-body" ) . css ( {
borderRight : "none"
} ) ;
var minutes = $ ( "<div class='scroll' id='minutes'>00</div>" ) . ubwbutton ( { w : 52 , h : 68 } , { bottom : 1 , top : 1 , right : 0 , left : 0 } ) ;
minutes . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
var seconds = $ ( "<div class='scroll' id='seconds'>00</div>" ) . ubwbutton ( { w : 52 , h : 68 } , { bottom : 1 , top : 1 , right : 0 , left : 0 } ) ;
seconds . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
var pause = $ ( "<div id='pausebutton'><img src='images/button_pause_invert.png'></div>" )
pause . css ( {
marginLeft : 8 ,
marginTop : 3 ,
marginBottom : - 2 ,
height : 47
} ) ;
var hours = $ ( "<div class='scroll' id='hours'>00</div>" ) . ubwbutton ( {
w : 52 ,
h : 68
} , {
bottom : 1 ,
top : 1 ,
right : 0 ,
left : 0
} ) ;
hours . find ( ".ubw-button-body" ) . css ( {
borderRight : "none"
} ) ;
var minutes = $ ( "<div class='scroll' id='minutes'>00</div>" ) . ubwbutton ( {
w : 52 ,
h : 68
} , {
bottom : 1 ,
top : 1 ,
right : 0 ,
left : 0
} ) ;
minutes . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
var seconds = $ ( "<div class='scroll' id='seconds'>00</div>" ) . ubwbutton ( {
w : 52 ,
h : 68
} , {
bottom : 1 ,
top : 1 ,
right : 0 ,
left : 0
} ) ;
seconds . find ( ".ubw-button-body" ) . css ( {
borderLeft : "none" ,
borderRight : "none"
} ) ;
var pause = $ ( "<div id='pausebutton'><img src='images/button_pause_invert.png'></div>" )
pause . css ( {
marginLeft : 8 ,
marginTop : 3 ,
marginBottom : - 2 ,
height : 47
} ) ;
var reset = $ ( "<div id='resetbutton'><img src='images/button_reset_invert.png'></div>" )
. css ( {
marginLeft : 8 ,
marginTop : 1
} )
. click ( function ( ) {
$ ( "#hours" ) . find ( ".ubw-button-content" ) . text ( "00" ) ;
$ ( "#minutes" ) . find ( ".ubw-button-content" ) . text ( "00" ) ;
$ ( "#seconds" ) . find ( ".ubw-button-content" ) . text ( "00" ) ;
clearTimeout ( currentTimer ) ;
if ( play ) {
$ ( "#pausebutton" ) . trigger ( "click" ) ;
}
} ) ;
var reset = $ ( "<div id='resetbutton'><img src='images/button_reset_invert.png'></div>" )
. css ( {
marginLeft : 8 ,
marginTop : 1
} )
. click ( function ( ) {
$ ( "#hours" ) . find ( ".ubw-button-content" ) . text ( "00" ) ;
$ ( "#minutes" ) . find ( ".ubw-button-content" ) . text ( "00" ) ;
$ ( "#seconds" ) . find ( ".ubw-button-content" ) . text ( "00" ) ;
clearTimeout ( currentTimer ) ;
if ( play ) {
$ ( "#pausebutton" ) . trigger ( "click" ) ;
}
} ) ;
if ( window . widget ) {
window . widget . onremove = function ( ) {
if ( play ) {
$ ( "#pausebutton" ) . trigger ( "click" ) ;
} ;
} ;
} ;
if ( window . widget ) {
window . widget . onremove = function ( ) {
if ( play ) {
$ ( "#pausebutton" ) . trigger ( "click" ) ;
}
} ;
}
pause . toggle (
function ( ) {
play = false ;
clearTimeout ( currentTimer ) ;
$ ( this ) . find ( "img" ) . attr ( "src" , "images/button_play_invert.png" ) ;
} ,
function ( ) {
play = true ;
var timeInSeconds = parseInt ( $ ( "#seconds" ) . find ( ".ubw-button-content" ) . text ( ) , 10 ) +
parseInt ( $ ( "#minutes" ) . find ( ".ubw-button-content" ) . text ( ) , 10 ) * 60 +
parseInt ( $ ( "#hours" ) . find ( ".ubw-button-content" ) . text ( ) , 10 ) * 3600 ;
pause . toggle (
function ( ) {
play = false ;
clearTimeout ( currentTimer ) ;
$ ( this ) . find ( "img" ) . attr ( "src" , "images/button_play_invert.png" ) ;
} ,
function ( ) {
if ( $ ( "#hours" ) . find ( ".ubw-button-content" ) . text ( ) != "00" ||
$ ( "#minutes" ) . find ( ".ubw-button-content" ) . text ( ) != "00" ||
$ ( "#seconds" ) . find ( ".ubw-button-content" ) . text ( ) != "00" ) {
play = true ;
var timeInSeconds = parseInt ( $ ( "#seconds" ) . find ( ".ubw-button-content" ) . text ( ) , 10 ) +
parseInt ( $ ( "#minutes" ) . find ( ".ubw-button-content" ) . text ( ) , 10 ) * 60 +
parseInt ( $ ( "#hours" ) . find ( ".ubw-button-content" ) . text ( ) , 10 ) * 3600 ;
updateChronometerReverse ( timeInSeconds ) ;
updateChronometerReverse ( timeInSeconds ) ;
$ ( this ) . find ( "img" ) . attr ( "src" , "images/button_pause_invert.png" ) ;
}
) ; / * . m o u s e e n t e r ( f u n c t i o n ( ) {
$ ( this ) . find ( "img" ) . attr ( "src" , "images/button_pause_invert.png" ) ;
}
}
) ; / * . m o u s e e n t e r ( f u n c t i o n ( ) {
var o = $ ( this ) . find ( "img" ) . attr ( "src" ) ;
$ ( this ) . find ( "img" ) . attr ( "src" , o . split ( "." ) [ 0 ] + "xov.png" ) ;
} ) . mouseout ( function ( ) {
@ -93,103 +131,129 @@ function init(){
$ ( this ) . find ( "img" ) . attr ( "src" , o . split ( "x" ) [ 0 ] + ".png" ) ;
} ) ; * /
setTimeout ( function ( ) { pause . trigger ( "click" ) } , 200 ) ;
setTimeout ( function ( ) {
pause . trigger ( "click" )
} , 200 ) ;
hours
. bind ( "mousedown" , { button : hours } , timeButtonDownHandler )
. find ( ".ubw-button-arrowTop" ) . bind ( "mousedown" , { button : hours } , addbtn ) ;
hours
. find ( ".ubw-button-arrowBottom" ) . bind ( "mousedown" , { button : hours } , rembtn ) ;
minutes
. bind ( "mousedown" , { button : minutes } , timeButtonDownHandler )
. find ( ".ubw-button-arrowTop" ) . bind ( "mousedown" , { button : minutes } , addbtn ) ;
minutes
. find ( ".ubw-button-arrowBottom" ) . bind ( "mousedown" , { button : minutes } , rembtn ) ;
seconds
. bind ( "mousedown" , { button : seconds } , timeButtonDownHandler )
. find ( ".ubw-button-arrowTop" ) . bind ( "mousedown" , { button : seconds } , addbtn ) ;
seconds
. find ( ".ubw-button-arrowBottom" ) . bind ( "mousedown" , { button : seconds } , rembtn ) ;
hours
. bind ( "mousedown" , {
button : hours
} , timeButtonDownHandler )
. find ( ".ubw-button-arrowTop" ) . bind ( "mousedown" , {
button : hours
} , addbtn ) ;
hours
. find ( ".ubw-button-arrowBottom" ) . bind ( "mousedown" , {
button : hours
} , rembtn ) ;
minutes
. bind ( "mousedown" , {
button : minutes
} , timeButtonDownHandler )
. find ( ".ubw-button-arrowTop" ) . bind ( "mousedown" , {
button : minutes
} , addbtn ) ;
minutes
. find ( ".ubw-button-arrowBottom" ) . bind ( "mousedown" , {
button : minutes
} , rembtn ) ;
seconds
. bind ( "mousedown" , {
button : seconds
} , timeButtonDownHandler )
. find ( ".ubw-button-arrowTop" ) . bind ( "mousedown" , {
button : seconds
} , addbtn ) ;
seconds
. find ( ".ubw-button-arrowBottom" ) . bind ( "mousedown" , {
button : seconds
} , rembtn ) ;
$ ( document ) . mouseup ( function ( ) {
/ * i f ( i s S c r o l l i n g ) {
$ ( document ) . mouseup ( function ( ) {
/ * i f ( i s S c r o l l i n g ) {
$ ( ) . unbind ( "mousemove" ) ;
activeTimeScroll . find ( ".ubw-button-canvas" )
. bind ( "mouseleave" , { button : activeTimeScroll } , buttonOutHandler )
. bind ( "mouseenter" , { button : activeTimeScroll } , buttonOverHandler ) ;
} ; * /
clearTimeout ( incDecTime ) ;
} ) ;
clearTimeout ( incDecTime ) ;
} ) ;
var btnsWrapper = $ ( "<div></div>" )
. css ( {
float : "left" ,
marginLeft : 5 ,
marginTop : 6
} )
. append ( pause )
. append ( reset ) ;
var btnsWrapper = $ ( "<div></div>" )
. css ( {
float : "left" ,
marginLeft : 5 ,
marginTop : 6
} )
. append ( pause )
. append ( reset ) ;
ubwidget
. append ( hours )
. append ( space . clone ( ) )
. append ( minutes )
. append ( spaceb )
. append ( seconds )
. append ( spacec )
. append ( btnsWrapper ) ;
ubwidget
. append ( hours )
. append ( space . clone ( ) )
. append ( minutes )
. append ( spaceb )
. append ( seconds )
. append ( spacec )
. append ( btnsWrapper ) ;
clearTimeout ( currentTimer ) ;
updateChronometer ( 0 ) ;
clearTimeout ( currentTimer ) ;
var currentTimer = null ;
var incDecTime = null ;
var play = true ;
var isScrolling = false ;
var reverse = true ;
var activeTimeScroll = null ;
var currentTimer = null ;
var incDecTime = null ;
var play = true ;
var isScrolling = false ;
var reverse = true ;
var activeTimeScroll = null ;
function addbtn ( m ) {
function addbtn ( m ) {
var button = m . data . button ;
var content = button . find ( ".ubw-button-content" ) ;
var button = m . data . button ;
var content = button . find ( ".ubw-button-content" ) ;
if ( content . text ( ) . substr ( 0 , 1 ) == "0" ) {
content . text ( content . text ( ) . substr ( 1 , content . text ( ) . length ) )
}
if ( content . text ( ) . substr ( 0 , 1 ) == "0" ) {
content . text ( content . text ( ) . substr ( 1 , content . text ( ) . length ) )
}
content . text ( formatTime ( parseInt ( content . text ( ) ) + 1 ) ) ;
content . text ( formatTime ( parseInt ( content . text ( ) ) + 1 ) ) ;
incDecTime = setTimeout ( function ( ) { addbtn ( m ) } , 150 ) ;
} ;
incDecTime = setTimeout ( function ( ) {
addbtn ( m )
} , 150 ) ;
}
function rembtn ( m ) {
function rembtn ( m ) {
var button = m . data . button ;
var content = button . find ( ".ubw-button-content" ) ;
var button = m . data . button ;
var content = button . find ( ".ubw-button-content" ) ;
if ( content . text ( ) . substr ( 0 , 1 ) == "0" ) {
content . text ( content . text ( ) . substr ( 1 , content . text ( ) . length ) )
}
if ( content . text ( ) . substr ( 0 , 1 ) == "0" ) {
content . text ( content . text ( ) . substr ( 1 , content . text ( ) . length ) )
}
content . text ( formatTime ( parseInt ( content . text ( ) ) - 1 ) ) ;
content . text ( formatTime ( parseInt ( content . text ( ) ) - 1 ) ) ;
incDecTime = setTimeout ( function ( ) { rembtn ( m ) } , 150 ) ;
} ;
incDecTime = setTimeout ( function ( ) {
rembtn ( m ) ;
} , 150 ) ;
}
function timeButtonDownHandler ( m ) {
var button = m . data . button ;
var mouseStart = { pageX : m . pageX , pageY : m . pageY } ;
var content = button . find ( ".ubw-button-content" ) ;
var val = content . text ( ) ;
isScrolling = true ;
reverse = true ;
activeTimeScroll = button ;
if ( play ) {
$ ( "#pausebutton" ) . trigger ( "click" ) ;
}
function timeButtonDownHandler ( m ) {
var button = m . data . button ;
var mouseStart = {
pageX : m . pageX ,
pageY : m . pageY
} ;
var content = button . find ( ".ubw-button-content" ) ;
var val = content . text ( ) ;
isScrolling = true ;
reverse = true ;
activeTimeScroll = button ;
if ( play ) {
$ ( "#pausebutton" ) . trigger ( "click" ) ;
}
/ * b u t t o n . f i n d ( " . u b w - b u t t o n - c a n v a s " )
/ * b u t t o n . f i n d ( " . u b w - b u t t o n - c a n v a s " )
. unbind ( "mouseenter" )
. unbind ( "mouseleave" ) ;
@ -204,81 +268,89 @@ function init(){
content . text ( content . text ( ) % 60 ) ;
if ( content . text ( ) < 0 ) content . text ( 0 ) ;
} ) ; * /
} ;
}
function buttonOverHandler ( e ) {
var button = e . data . button ;
var buttonbody = button . find ( ".ubw-button-body" ) ;
function buttonOverHandler ( e ) {
var button = e . data . button ;
var buttonbody = button . find ( ".ubw-button-body" ) ;
button . css ( { zIndex : 1 } )
buttonbody . removeClass ( "ubw-button-out" )
. addClass ( "ubw-button-over" )
. css ( { fontSize : "125%" } ) ;
button . css ( {
zIndex : 1
} )
buttonbody . removeClass ( "ubw-button-out" )
. addClass ( "ubw-button-over" )
. css ( {
fontSize : "125%"
} ) ;
button . find ( ".ubw-button-canvas" ) . find ( ".ubw-button-arrowTop" ) . children ( "img" ) . attr ( "src" , "images/arrows_over/top.png" ) ;
button . find ( ".ubw-button-canvas" ) . find ( ".ubw-button-arrowBottom" ) . children ( "img" ) . attr ( "src" , "images/arrows_over/bottom.png" ) ;
} ;
button . find ( ".ubw-button-canvas" ) . find ( ".ubw-button-arrowTop" ) . children ( "img" ) . attr ( "src" , "images/arrows_over/top.png" ) ;
button . find ( ".ubw-button-canvas" ) . find ( ".ubw-button-arrowBottom" ) . children ( "img" ) . attr ( "src" , "images/arrows_over/bottom.png" ) ;
}
function buttonOutHandler ( e ) {
var button = e . data . button ;
var buttonbody = button . find ( ".ubw-button-body" ) ;
function buttonOutHandler ( e ) {
var button = e . data . button ;
var buttonbody = button . find ( ".ubw-button-body" ) ;
button . css ( { zIndex : 0 } ) ;
buttonbody . removeClass ( "ubw-button-over" )
. addClass ( "ubw-button-out" )
. css ( {
fontSize : "100%" ,
} ) ;
button . css ( {
zIndex : 0
} ) ;
buttonbody . removeClass ( "ubw-button-over" )
. addClass ( "ubw-button-out" )
. css ( {
fontSize : "100%"
} ) ;
button . find ( ".ubw-button-canvas" ) . find ( ".ubw-button-arrowTop" ) . children ( "img" ) . attr ( "src" , "images/arrows_out/top.png" ) ;
button . find ( ".ubw-button-canvas" ) . find ( ".ubw-button-arrowBottom" ) . children ( "img" ) . attr ( "src" , "images/arrows_out/top.png" ) ;
} ;
button . find ( ".ubw-button-canvas" ) . find ( ".ubw-button-arrowTop" ) . children ( "img" ) . attr ( "src" , "images/arrows_out/top.png" ) ;
button . find ( ".ubw-button-canvas" ) . find ( ".ubw-button-arrowBottom" ) . children ( "img" ) . attr ( "src" , "images/arrows_out/top.png" ) ;
}
function updateChronometerReverse ( seconds ) {
function updateChronometerReverse ( seconds ) {
currentTimer = setTimeout ( function ( ) { updateChronometerReverse ( seconds - 1 ) } , 1000 ) ;
if ( seconds < 6 && seconds > 0 ) {
DHTMLSound ( 'beep.wav' ) ;
} else if ( seconds === 0 ) {
DHTMLSound ( 'finalbeep.wav' ) ;
} ;
currentTimer = setTimeout ( function ( ) {
updateChronometerReverse ( seconds - 1 )
} , 1000 ) ;
if ( seconds < 6 && seconds > 0 ) {
DHTMLSound ( 'beep.wav' ) ;
} else if ( seconds === 0 ) {
DHTMLSound ( 'finalbeep.wav' ) ;
}
if ( seconds < 1 ) {
seconds = 0 ;
$ ( "#pausebutton" ) . trigger ( "click" ) ;
}
if ( seconds < 1 ) {
seconds = 0 ;
$ ( "#pausebutton" ) . trigger ( "click" ) ;
}
var hoursValue = $ ( "#hours" ) . find ( ".ubw-button-content" ) ;
var minutesValue = $ ( "#minutes" ) . find ( ".ubw-button-content" ) ;
var secondsValue = $ ( "#seconds" ) . find ( ".ubw-button-content" ) ;
var hoursValue = $ ( "#hours" ) . find ( ".ubw-button-content" ) ;
var minutesValue = $ ( "#minutes" ) . find ( ".ubw-button-content" ) ;
var secondsValue = $ ( "#seconds" ) . find ( ".ubw-button-content" ) ;
var currentSecond = String ( seconds % 60 ) ;
var currentMinute = String ( Math . floor ( seconds / 60 ) % 60 ) ;
var currentHour = String ( Math . floor ( seconds / 3600 ) ) ;
var currentSecond = String ( seconds % 60 ) ;
var currentMinute = String ( Math . floor ( seconds / 60 ) % 60 ) ;
var currentHour = String ( Math . floor ( seconds / 3600 ) ) ;
hoursValue . text ( formatTime ( currentHour ) ) ;
minutesValue . text ( formatTime ( currentMinute ) ) ;
secondsValue . text ( formatTime ( currentSecond ) ) ;
hoursValue . text ( formatTime ( currentHour ) ) ;
minutesValue . text ( formatTime ( currentMinute ) ) ;
secondsValue . text ( formatTime ( currentSecond ) ) ;
}
}
function formatTime ( time ) {
function formatTime ( time ) {
document . title = time + ", " + String ( time ) . length ;
document . title = time + ", " + String ( time ) . length ;
if ( time < 0 ) {
time = 59 ;
}
if ( time < 0 ) {
time = 59 ;
}
time = time % 60 ;
time = time % 60 ;
String ( time ) . length < 2 ? time = "0" + time : time = time ;
String ( time ) . length < 2 ? time = "0" + time : time = time ;
return time ;
}
return time ;
}
function DHTMLSound ( surl ) {
document . getElementById ( "audio" ) . innerHTML =
"<audio src='" + surl + "' autoplay=true >" ;
}
function DHTMLSound ( surl ) {
document . getElementById ( "audio" ) . innerHTML =
"<audio src='" + surl + "' autoplay=true >" ;
}
}