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