src/widgets/multimediaview/js/jquery.mobile.tizen.multimediaview.js

   1 /* ***************************************************************************
   2  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   3  *
   4  * Permission is hereby granted, free of charge, to any person obtaining a
   5  * copy of this software and associated documentation files (the "Software"),
   6  * to deal in the Software without restriction, including without limitation
   7  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   8  * and/or sell copies of the Software, and to permit persons to whom the
   9  * Software is furnished to do so, subject to the following conditions:
  10  *
  11  * The above copyright notice and this permission notice shall be included in
  12  * all copies or substantial portions of the Software.
  13  *
  14  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  19  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  20  * DEALINGS IN THE SOFTWARE.
  21  * ***************************************************************************
  22  *
  23  * Authors: Yonghwi Park <yonghwi0324.park@samsung.com>
  24  *               Wonseop Kim <wonseop.kim@samsung.com>
  25 */
  26
  27 /**
  28  *
  29  * MultiMediaView is a widget that lets the user view and handle multimedia contents.
  30  * Video and audio elements are coded as standard HTML elements and enhanced by the
  31  * MultiMediaview to make them attractive and usable on a mobile device.
  32  *
  33  * HTML Attributes:
  34  *                      data-theme : Set a theme of widget.
  35  *                              If this value is not defined, widget will use parent`s theme. (optional)
  36  *                      data-controls : If this value is 'true', widget will use belonging controller.
  37  *                              If this value is 'false', widget will use browser`s controller.
  38  *                              Default value is 'true'.
  39  *                      data-fullscreen : Set a status that fullscreen when inital start.
  40  *                              Default value is 'false'.
  41  *
  42  * APIs:
  43  *                      width( [number] )
  44  *                                      : Get or set the width of widget.
  45  *                                      The first argument is the width of widget.
  46  *                                      If no first argument is specified, will act as a getter.
  47  *                      height( [number] )
  48  *                                      : Get or set the height of widget.
  49  *                                      The first argument is the height of widget.
  50  *                                      If no first argument is specified, will act as a getter.
  51  *                      size( number, number )
  52  *                                      : Set a size of widget and resize a widget.
  53  *                                       The first argument is width and second argument is height.
  54  *                      fullscreen( [boolean] )
  55  *                                      : Get or Set the status of fullscreen.
  56  *                                      If no first argument is specified, will act as a getter.
  57  *
  58  * Events:
  59  *
  60  *                      create :  triggered when a multimediaview is created.
  61  *
  62  * Examples:
  63  *
  64  *                      VIDEO :
  65  *                              <video data-controls="true" style="width:100%;">
  66  *                                      <source src="media/oceans-clip.mp4" type="video/mp4" />
  67  *                                      Your browser does not support the video tag.
  68  *                              </video>
  69  *
  70  *                      AUDIO :
  71  *                              <audio data-controls="true" style="width:100%;">
  72  *                                      <source src="media/Over the horizon.mp3" type="audio/mp3" />
  73  *                                      Your browser does not support the audio tag.
  74  *                              </audio>
  75  *
  76  */
  77
  78 ( function ( $, document, window, undefined ) {
  79         $.widget( "tizen.multimediaview", $.mobile.widget, {
  80                 options : {
  81                         theme : null,
  82                         controls : true,
  83                         fullscreen : false,
  84                         initSelector : "video, audio"
  85                 },
  86                 _create : function () {
  87                         var self = this,
  88                                 view = self.element,
  89                                 viewElement = view[0],
  90                                 option = self.options,
  91                                 role = "multimediaview",
  92                                 control = null;
  93
  94                         $.extend( this, {
  95                                 role : null,
  96                                 isControlHide : false,
  97                                 controlTimer : null,
  98                                 isVolumeHide : true,
  99                                 isVertical : true,
 100                                 backupView : null
 101                         });
 102
 103                         self.role = role;
 104                         view.addClass( "ui-multimediaview" );
 105                         control = self._createControl();
 106
 107                         if ( view[0].nodeName === "AUDIO" ) {
 108                                 control.addClass( "ui-multimediaview-audio" );
 109                         }
 110
 111                         control.hide();
 112                         view.wrap( "<div class='ui-multimediaview-wrap'>" ).after( control );
 113                         if ( option.controls ) {
 114                                 if ( view.attr("controls") ) {
 115                                         view.removeAttr( "controls" );
 116                                 }
 117                         }
 118
 119                         self._addEvent();
 120
 121                         $( document ).bind( "pagechange.multimediaview", function ( e ) {
 122                                 var $page = $( e.target );
 123                                 if ( $page.find( view ).length > 0 && viewElement.autoplay ) {
 124                                         viewElement.play();
 125                                 }
 126
 127                                 if ( option.controls ) {
 128                                         control.show();
 129                                         self._resize();
 130                                 }
 131                         }).bind( "pagebeforechange.multimediaview", function ( e ) {
 132                                 if ( viewElement.played.length !== 0 ) {
 133                                         viewElement.pause();
 134                                         control.hide();
 135                                 }
 136                         });
 137                         $( window ).bind( "resize.multimediaview orientationchange.multimediaview", function ( e ) {
 138                                 if ( !option.controls ) {
 139                                         return;
 140                                 }
 141                                 var $page = $( e.target ),
 142                                         $scrollview = view.parents( ".ui-scrollview-clip" );
 143
 144                                 $scrollview.each( function ( i ) {
 145                                         if ( $.data( this, "scrollview" ) ) {
 146                                                 $( this ).scrollview( "scrollTo", 0, 0 );
 147                                         }
 148                                 });
 149
 150                                 // for maintaining page layout
 151                                 if ( !option.fullscreen ) {
 152                                         $( ".ui-footer:visible" ).show();
 153                                 } else {
 154                                         $( ".ui-footer" ).hide();
 155                                         self._fitContentArea( $page );
 156                                 }
 157
 158                                 self._resize();
 159                         });
 160                 },
 161                 _resize : function () {
 162                         var view = this.element,
 163                                 parent = view.parent(),
 164                                 control = parent.find( ".ui-multimediaview-control" ),
 165                                 viewWidth = 0,
 166                                 viewHeight = 0,
 167                                 viewOffset = null;
 168
 169                         this._resizeFullscreen( this.options.fullscreen );
 170                         viewWidth = ( ( view[0].nodeName === "VIDEO" ) ? view.width() : parent.width() );
 171                         viewHeight = ( ( view[0].nodeName === "VIDEO" ) ? view.height() : control.height() );
 172                         viewOffset = view.offset();
 173
 174                         this._resizeControl( viewOffset, viewWidth, viewHeight );
 175
 176                         this._updateSeekBar();
 177                         this._updateVolumeState();
 178                 },
 179                 _resizeControl : function ( offset, width, height ) {
 180                         var self = this,
 181                                 view = self.element,
 182                                 viewElement = view[0],
 183                                 control = view.parent().find( ".ui-multimediaview-control" ),
 184                                 buttons = control.find( ".ui-button" ),
 185                                 playpauseButton = control.find( ".ui-playpausebutton" ),
 186                                 seekBar = control.find( ".ui-seekbar" ),
 187                                 durationLabel = control.find( ".ui-durationlabel" ),
 188                                 timestampLabel = control.find( ".ui-timestamplabel" ),
 189                                 volumeControl = control.find( ".ui-volumecontrol" ),
 190                                 volumeBar = volumeControl.find( ".ui-volumebar" ),
 191                                 controlWidth = width,
 192                                 controlHeight = control.outerHeight( true ),
 193                                 availableWidth = 0,
 194                                 controlOffset = null;
 195
 196                         if ( control ) {
 197                                 if ( view[0].nodeName === "VIDEO" ) {
 198                                         controlOffset = control.offset();
 199                                         controlOffset.left = offset.left;
 200                                         controlOffset.top = offset.top + height - controlHeight;
 201                                         control.offset( controlOffset );
 202                                 }
 203
 204                                 control.width( controlWidth );
 205                         }
 206
 207                         if ( seekBar ) {
 208                                 availableWidth = control.width() - ( buttons.outerWidth( true ) * buttons.length );
 209                                 availableWidth -= ( parseInt( buttons.eq( 0 ).css( "margin-left" ), 10 ) + parseInt( buttons.eq( 0 ).css( "margin-right" ), 10 ) ) * buttons.length;
 210                                 if ( !self.isVolumeHide ) {
 211                                         availableWidth -= volumeControl.outerWidth( true );
 212                                 }
 213                                 seekBar.width( availableWidth );
 214                         }
 215
 216                         if ( durationLabel && !isNaN( viewElement.duration ) ) {
 217                                 durationLabel.find( "p" ).text( self._convertTimeFormat( viewElement.duration ) );
 218                         }
 219
 220                         if ( viewElement.autoplay && viewElement.paused === false ) {
 221                                 playpauseButton.removeClass( "ui-play-icon" ).addClass( "ui-pause-icon" );
 222                         }
 223
 224                         if ( seekBar.width() < ( volumeBar.width() + timestampLabel.width() + durationLabel.width() ) ) {
 225                                 durationLabel.hide();
 226                         } else {
 227                                 durationLabel.show();
 228                         }
 229                 },
 230                 _resizeFullscreen : function ( isFullscreen ) {
 231                         var self = this,
 232                                 view = self.element,
 233                                 parent = view.parent(),
 234                                 control = view.parent().find( ".ui-multimediaview-control" ),
 235                                 playpauseButton = control.find( ".ui-playpausebutton" ),
 236                                 timestampLabel = control.find( ".ui-timestamplabel" ),
 237                                 seekBar = control.find( ".ui-seekbar" ),
 238                                 durationBar = seekBar.find( ".ui-duration" ),
 239                                 currenttimeBar = seekBar.find( ".ui-currenttime" ),
 240                                 docWidth = 0,
 241                                 docHeight = 0;
 242
 243                         if ( isFullscreen ) {
 244                                 if ( !self.backupView ) {
 245                                         self.backupView = {
 246                                                 width : view[0].style.getPropertyValue( "width" ) || "",
 247                                                 height : view[0].style.getPropertyValue( "height" ) || "",
 248                                                 position : view.css( "position" ),
 249                                                 zindex : view.css( "z-index" )
 250                                         };
 251                                 }
 252                                 docWidth = $( "body" )[0].clientWidth;
 253                                 docHeight = $( "body" )[0].clientHeight;
 254
 255                                 view.width( docWidth ).height( docHeight - 1 );
 256                                 view.addClass( "ui-" + self.role + "-fullscreen" );
 257                                 view.offset( {
 258                                         top : 0,
 259                                         left : 0
 260                                 });
 261                         } else {
 262                                 if ( !self.backupView ) {
 263                                         return;
 264                                 }
 265
 266                                 view.removeClass( "ui-" + self.role + "-fullscreen" );
 267                                 view.css( {
 268                                         "width" : self.backupView.width,
 269                                         "height" : self.backupView.height,
 270                                         "position": self.backupView.position,
 271                                         "z-index": self.backupView.zindex
 272                                 });
 273                                 self.backupView = null;
 274                         }
 275                         parent.show();
 276                 },
 277                 _addEvent : function () {
 278                         var self = this,
 279                                 view = self.element,
 280                                 viewElement = view[0],
 281                                 control = view.parent().find( ".ui-multimediaview-control" ),
 282                                 playpauseButton = control.find( ".ui-playpausebutton" ),
 283                                 timestampLabel = control.find( ".ui-timestamplabel" ),
 284                                 durationLabel = control.find( ".ui-durationlabel" ),
 285                                 volumeButton = control.find( ".ui-volumebutton" ),
 286                                 volumeControl = control.find( ".ui-volumecontrol" ),
 287                                 volumeBar = volumeControl.find( ".ui-volumebar" ),
 288                                 volumeGuide = volumeControl.find( ".ui-guide" ),
 289                                 volumeHandle = volumeControl.find( ".ui-handler" ),
 290                                 fullscreenButton = control.find( ".ui-fullscreenbutton" ),
 291                                 seekBar = control.find( ".ui-seekbar" ),
 292                                 durationBar = seekBar.find( ".ui-duration" ),
 293                                 currenttimeBar = seekBar.find( ".ui-currenttime" );
 294
 295                         view.bind( "loadedmetadata.multimediaview", function ( e ) {
 296                                 if ( !isNaN( viewElement.duration ) ) {
 297                                         durationLabel.find( "p" ).text( self._convertTimeFormat( viewElement.duration ) );
 298                                 }
 299                                 self._resize();
 300                         }).bind( "timeupdate.multimediaview", function ( e ) {
 301                                 self._updateSeekBar();
 302                         }).bind( "play.multimediaview", function ( e ) {
 303                                 playpauseButton.removeClass( "ui-play-icon" ).addClass( "ui-pause-icon" );
 304                         }).bind( "pause.multimediaview", function ( e ) {
 305                                 playpauseButton.removeClass( "ui-pause-icon" ).addClass( "ui-play-icon" );
 306                         }).bind( "ended.multimediaview", function ( e ) {
 307                                 if ( typeof viewElement.loop == "undefined" || viewElement.loop === "" ) {
 308                                         self.stop();
 309                                 }
 310                         }).bind( "volumechange.multimediaview", function ( e ) {
 311                                 if ( viewElement.volume < 0.1 ) {
 312                                         viewElement.muted = true;
 313                                         volumeButton.removeClass( "ui-volume-icon" ).addClass( "ui-mute-icon" );
 314                                 } else {
 315                                         viewElement.muted = false;
 316                                         volumeButton.removeClass( "ui-mute-icon" ).addClass( "ui-volume-icon" );
 317                                 }
 318
 319                                 if ( !self.isVolumeHide ) {
 320                                         self._updateVolumeState();
 321                                 }
 322                         }).bind( "durationchange.multimediaview", function ( e ) {
 323                                 if ( !isNaN( viewElement.duration ) ) {
 324                                         durationLabel.find( "p" ).text( self._convertTimeFormat( viewElement.duration ) );
 325                                 }
 326                                 self._resize();
 327                         }).bind( "error.multimediaview", function ( e ) {
 328                                 switch ( e.target.error.code ) {
 329                                 case e.target.error.MEDIA_ERR_ABORTED :
 330                                         window.alert( 'You aborted the video playback.' );
 331                                         break;
 332                                 case e.target.error.MEDIA_ERR_NETWORK :
 333                                         window.alert( 'A network error caused the video download to fail part-way.' );
 334                                         break;
 335                                 case e.target.error.MEDIA_ERR_DECODE :
 336                                         window.alert( 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support.' );
 337                                         break;
 338                                 case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED :
 339                                         window.alert( 'The video could not be loaded, either because the server or network failed or because the format is not supported.' );
 340                                         break;
 341                                 default :
 342                                         window.alert( 'An unknown error occurred.' );
 343                                         break;
 344                                 }
 345                         }).bind( "vclick.multimediaview", function ( e ) {
 346                                 if ( !self.options.controls ) {
 347                                         return;
 348                                 }
 349
 350                                 control.fadeToggle( "fast", function () {
 351                                         var offset = control.offset();
 352                                         self.isControlHide = !self.isControlHide;
 353                                         if ( self.options.mediatype == "video" ) {
 354                                                 self._startTimer();
 355                                         }
 356                                 });
 357                                 self._resize();
 358                         });
 359
 360                         playpauseButton.bind( "vclick.multimediaview", function () {
 361                                 self._endTimer();
 362
 363                                 if ( viewElement.paused ) {
 364                                         viewElement.play();
 365                                 } else {
 366                                         viewElement.pause();
 367                                 }
 368
 369                                 if ( self.options.mediatype == "video" ) {
 370                                         self._startTimer();
 371                                 }
 372                         });
 373
 374                         fullscreenButton.bind( "vclick.multimediaview", function ( e ) {
 375                                 self.fullscreen( !self.options.fullscreen );
 376                                 control.fadeIn( "fast" );
 377                                 self._endTimer();
 378                                 e.preventDefault();
 379                                 e.stopPropagation();
 380                         });
 381
 382                         seekBar.bind( "vmousedown.multimediaview", function ( e ) {
 383                                 var x = e.clientX,
 384                                         duration = viewElement.duration,
 385                                         durationOffset = durationBar.offset(),
 386                                         durationWidth = durationBar.width(),
 387                                         timerate = ( x - durationOffset.left ) / durationWidth,
 388                                         time = duration * timerate;
 389
 390                                 viewElement.currentTime = time;
 391
 392                                 self._endTimer();
 393
 394                                 e.preventDefault();
 395                                 e.stopPropagation();
 396
 397                                 $( document ).bind( "vmousemove.multimediaview", function ( e ) {
 398                                         var x = e.clientX,
 399                                                 timerate = ( x - durationOffset.left ) / durationWidth;
 400
 401                                         viewElement.currentTime = duration * timerate;
 402
 403                                         e.preventDefault();
 404                                         e.stopPropagation();
 405                                 }).bind( "vmouseup.multimediaview", function () {
 406                                         $( document ).unbind( "vmousemove.multimediaview vmouseup.multimediaview" );
 407                                         if ( viewElement.paused ) {
 408                                                 viewElement.pause();
 409                                         } else {
 410                                                 viewElement.play();
 411                                         }
 412                                 });
 413                         });
 414
 415                         volumeButton.bind( "vclick.multimediaview", function () {
 416                                 if ( self.isVolumeHide ) {
 417                                         var view = self.element,
 418                                                 volume = viewElement.volume;
 419
 420                                         self.isVolumeHide = false;
 421                                         self._resize();
 422                                         volumeControl.fadeIn( "fast" );
 423                                         self._updateVolumeState();
 424                                         self._updateSeekBar();
 425                                 } else {
 426                                         self.isVolumeHide = true;
 427                                         volumeControl.fadeOut( "fast", function () {
 428                                                 self._resize();
 429                                         });
 430                                         self._updateSeekBar();
 431                                 }
 432                         });
 433
 434                         volumeBar.bind( "vmousedown.multimediaview", function ( e ) {
 435                                 var baseX = e.clientX,
 436                                         volumeGuideLeft = volumeGuide.offset().left,
 437                                         volumeGuideWidth = volumeGuide.width(),
 438                                         volumeBase = volumeGuideLeft + volumeGuideWidth,
 439                                         handlerOffset = volumeHandle.offset(),
 440                                         volumerate = ( baseX - volumeGuideLeft ) / volumeGuideWidth,
 441                                         currentVolume = ( baseX - volumeGuideLeft ) / volumeGuideWidth;
 442
 443                                 self._endTimer();
 444                                 self._setVolume( currentVolume.toFixed( 2 ) );
 445
 446                                 e.preventDefault();
 447                                 e.stopPropagation();
 448
 449                                 $( document ).bind( "vmousemove.multimediaview", function ( e ) {
 450                                         var currentX = e.clientX,
 451                                                 currentVolume = ( currentX - volumeGuideLeft ) / volumeGuideWidth;
 452
 453                                         self._setVolume( currentVolume.toFixed( 2 ) );
 454
 455                                         e.preventDefault();
 456                                         e.stopPropagation();
 457                                 }).bind( "vmouseup.multimediaview", function () {
 458                                         $( document ).unbind( "vmousemove.multimediaview vmouseup.multimediaview" );
 459
 460                                         if ( self.options.mediatype == "video" ) {
 461                                                 self._startTimer();
 462                                         }
 463                                 });
 464                         });
 465                 },
 466                 _removeEvent : function () {
 467                         var self = this,
 468                                 view = self.element,
 469                                 control = view.parent().find( ".ui-multimediaview-control" ),
 470                                 playpauseButton = control.find( ".ui-playpausebutton" ),
 471                                 fullscreenButton = control.find( ".ui-fullscreenbutton" ),
 472                                 seekBar = control.find( ".ui-seekbar" ),
 473                                 volumeControl = control.find( ".ui-volumecontrol" ),
 474                                 volumeBar = volumeControl.find( ".ui-volumebar" ),
 475                                 volumeHandle = volumeControl.find( ".ui-handler" );
 476
 477                         view.unbind( ".multimediaview" );
 478                         playpauseButton.unbind( ".multimediaview" );
 479                         fullscreenButton.unbind( ".multimediaview" );
 480                         seekBar.unbind( ".multimediaview" );
 481                         volumeBar.unbind( ".multimediaview" );
 482                         volumeHandle.unbind( ".multimediaview" );
 483                 },
 484                 _createControl : function () {
 485                         var self = this,
 486                                 view = self.element,
 487                                 control = $( "<span></span>" ),
 488                                 playpauseButton = $( "<span></span>" ),
 489                                 seekBar = $( "<span></span>" ),
 490                                 timestampLabel = $( "<span><p>00:00:00</p></span>" ),
 491                                 durationLabel = $( "<span><p>00:00:00</p></span>" ),
 492                                 volumeButton = $( "<span></span>" ),
 493                                 volumeControl = $( "<span></span>" ),
 494                                 volumeBar = $( "<div></div>" ),
 495                                 volumeGuide = $( "<span></span>" ),
 496                                 volumeValue = $( "<span></span>" ),
 497                                 volumeHandle = $( "<span></span>" ),
 498                                 fullscreenButton = $( "<span></span>" ),
 499                                 durationBar = $( "<span></span>" ),
 500                                 currenttimeBar = $( "<span></span>" );
 501
 502                         control.addClass( "ui-" + self.role + "-control" );
 503                         playpauseButton.addClass( "ui-playpausebutton ui-button" );
 504                         seekBar.addClass( "ui-seekbar" );
 505                         timestampLabel.addClass( "ui-timestamplabel" );
 506                         durationLabel.addClass( "ui-durationlabel" );
 507                         volumeButton.addClass( "ui-volumebutton ui-button" );
 508                         fullscreenButton.addClass( "ui-fullscreenbutton ui-button" );
 509                         durationBar.addClass( "ui-duration" );
 510                         currenttimeBar.addClass( "ui-currenttime" );
 511                         volumeControl.addClass( "ui-volumecontrol" );
 512                         volumeBar.addClass( "ui-volumebar" );
 513                         volumeGuide.addClass( "ui-guide" );
 514                         volumeValue.addClass( "ui-value" );
 515                         volumeHandle.addClass( "ui-handler" );
 516
 517                         seekBar.append( durationBar ).append( currenttimeBar ).append( durationLabel ).append( timestampLabel );
 518
 519                         playpauseButton.addClass( "ui-play-icon" );
 520                         if ( view[0].muted ) {
 521                                 $( volumeButton ).addClass( "ui-mute-icon" );
 522                         } else {
 523                                 $( volumeButton ).addClass( "ui-volume-icon" );
 524                         }
 525
 526                         volumeBar.append( volumeGuide ).append( volumeValue ).append( volumeHandle );
 527                         volumeControl.append( volumeBar );
 528
 529                         control.append( playpauseButton ).append( seekBar ).append( volumeControl ).append( volumeButton );
 530
 531                         if ( self.element[0].nodeName === "VIDEO" ) {
 532                                 $( fullscreenButton ).addClass( "ui-fullscreen-on" );
 533                                 control.append( fullscreenButton );
 534                         }
 535                         volumeControl.hide();
 536
 537                         return control;
 538                 },
 539                 _startTimer : function ( duration ) {
 540                         this._endTimer();
 541
 542                         if ( !duration ) {
 543                                 duration = 3000;
 544                         }
 545
 546                         var self = this,
 547                                 view = self.element,
 548                                 control = view.parent().find( ".ui-multimediaview-control" ),
 549                                 volumeControl = control.find( ".ui-volumecontrol" );
 550
 551                         self.controlTimer = setTimeout( function () {
 552                                 self.isVolumeHide = true;
 553                                 self.isControlHide = true;
 554                                 self.controlTimer = null;
 555                                 volumeControl.hide();
 556                                 control.fadeOut( "fast" );
 557                         }, duration );
 558                 },
 559                 _endTimer : function () {
 560                         if ( this.controlTimer ) {
 561                                 clearTimeout( this.controlTimer );
 562                                 this.controlTimer = null;
 563                         }
 564                 },
 565                 _convertTimeFormat : function ( systime ) {
 566                         var ss = parseInt( systime % 60, 10 ).toString(),
 567                                 mm = parseInt( ( systime / 60 ) % 60, 10 ).toString(),
 568                                 hh = parseInt( systime / 3600, 10 ).toString(),
 569                                 time =  ( ( hh.length < 2  ) ? "0" + hh : hh ) + ":" +
 570                                                 ( ( mm.length < 2  ) ? "0" + mm : mm ) + ":" +
 571                                                 ( ( ss.length < 2  ) ? "0" + ss : ss );
 572
 573                         return time;
 574                 },
 575                 _updateSeekBar : function ( currenttime ) {
 576                         var self = this,
 577                                 view = self.element,
 578                                 duration = view[0].duration,
 579                                 control = view.parent().find( ".ui-multimediaview-control" ),
 580                                 seekBar = control.find(  ".ui-seekbar"  ),
 581                                 durationBar = seekBar.find( ".ui-duration" ),
 582                                 currenttimeBar = seekBar.find( ".ui-currenttime" ),
 583                                 timestampLabel = control.find( ".ui-timestamplabel" ),
 584                                 durationOffset = durationBar.offset(),
 585                                 durationWidth = durationBar.width(),
 586                                 durationHeight = durationBar.height(),
 587                                 timebarWidth = 0;
 588
 589                         if ( typeof currenttime == "undefined" ) {
 590                                 currenttime = view[0].currentTime;
 591                         }
 592                         timebarWidth = parseInt( currenttime / duration * durationWidth, 10 );
 593                         durationBar.offset( durationOffset );
 594                         currenttimeBar.offset( durationOffset ).width( timebarWidth );
 595                         timestampLabel.find( "p" ).text( self._convertTimeFormat( currenttime ) );
 596                 },
 597                 _updateVolumeState : function () {
 598                         var self = this,
 599                                 view = self.element,
 600                                 control = view.parent().find( ".ui-multimediaview-control" ),
 601                                 volumeControl = control.find( ".ui-volumecontrol" ),
 602                                 volumeButton = control.find( ".ui-volumebutton" ),
 603                                 volumeBar = volumeControl.find( ".ui-volumebar" ),
 604                                 volumeGuide = volumeControl.find( ".ui-guide" ),
 605                                 volumeValue = volumeControl.find( ".ui-value" ),
 606                                 volumeHandle = volumeControl.find( ".ui-handler" ),
 607                                 handlerWidth = volumeHandle.width(),
 608                                 handlerHeight = volumeHandle.height(),
 609                                 volumeGuideHeight = volumeGuide.height(),
 610                                 volumeGuideWidth = volumeGuide.width(),
 611                                 volumeGuideTop = 0,
 612                                 volumeGuideLeft = 0,
 613                                 volumeBase = 0,
 614                                 handlerOffset = null,
 615                                 volume = view[0].volume;
 616
 617                         volumeGuideTop = parseInt( volumeGuide.offset().top, 10 );
 618                         volumeGuideLeft = parseInt( volumeGuide.offset().left, 10 );
 619                         volumeBase = volumeGuideLeft;
 620                         handlerOffset = volumeHandle.offset();
 621                         handlerOffset.top = volumeGuideTop - parseInt( ( handlerHeight - volumeGuideHeight ) / 2, 10 );
 622                         handlerOffset.left = volumeBase + parseInt( volumeGuideWidth * volume, 10 ) - parseInt( handlerWidth / 2, 10 );
 623                         volumeHandle.offset( handlerOffset );
 624                         volumeValue.width( parseInt( volumeGuideWidth * ( volume ), 10 ) );
 625                 },
 626                 _setVolume : function ( value ) {
 627                         var viewElement = this.element[0];
 628
 629                         if ( value < 0.0 || value > 1.0 ) {
 630                                 return;
 631                         }
 632
 633                         viewElement.volume = value;
 634                 },
 635                 _fitContentArea: function ( page, parent ) {
 636                         if ( typeof parent == "undefined" ) {
 637                                 parent = window;
 638                         }
 639
 640                         var $page = $( page ),
 641                                 $content = $( ".ui-content:visible:first" ),
 642                                 hh = $( ".ui-header:visible" ).outerHeight() || 0,
 643                                 fh = $( ".ui-footer:visible" ).outerHeight() || 0,
 644                                 pt = parseFloat( $content.css( "padding-top" ) ),
 645                                 pb = parseFloat( $content.css( "padding-bottom" ) ),
 646                                 wh = ( ( parent === window ) ? window.innerHeight : $( parent ).height() ),
 647                                 height = wh - ( hh + fh ) - ( pt + pb );
 648
 649                         $content.offset( {
 650                                 top : ( hh + pt )
 651                         }).height( height );
 652                 },
 653                 width : function ( value ) {
 654                         var self = this,
 655                                 args = arguments,
 656                                 view = self.element;
 657
 658                         if ( args.length === 0 ) {
 659                                 return view.width();
 660                         }
 661                         if ( args.length === 1 ) {
 662                                 view.width( value );
 663                                 self._resize();
 664                         }
 665                 },
 666                 height : function ( value ) {
 667                         var self = this,
 668                                 view = self.element,
 669                                 args = arguments;
 670
 671                         if ( args.length === 0 ) {
 672                                 return view.height();
 673                         }
 674                         if ( args.length === 1 ) {
 675                                 view.height( value );
 676                                 self._resize();
 677                         }
 678                 },
 679                 size : function ( width, height ) {
 680                         var self = this,
 681                                 view = self.element;
 682
 683                         view.width( width ).height( height );
 684                         self._resize();
 685                 },
 686                 fullscreen : function ( value ) {
 687                         var self = this,
 688                                 view = self.element,
 689                                 control = view.parent().find( ".ui-multimediaview-control" ),
 690                                 fullscreenButton = control.find( ".ui-fullscreenbutton" ),
 691                                 args = arguments,
 692                                 option = self.options,
 693                                 currentPage = $( ".ui-page-active" );
 694
 695                         if ( args.length === 0 ) {
 696                                 return option.fullscreen;
 697                         }
 698                         if ( args.length === 1 ) {
 699                                 view.parents( ".ui-content" ).scrollview( "scrollTo", 0, 0 );
 700
 701                                 this.options.fullscreen = value;
 702                                 if ( value ) {
 703                                         currentPage.children( ".ui-header" ).hide();
 704                                         currentPage.children( ".ui-footer" ).hide();
 705                                         this._fitContentArea( currentPage );
 706                                         fullscreenButton.removeClass( "ui-fullscreen-on" ).addClass( "ui-fullscreen-off" );
 707                                 } else {
 708                                         currentPage.children( ".ui-header" ).show();
 709                                         currentPage.children( ".ui-footer" ).show();
 710                                         this._fitContentArea( currentPage );
 711                                         fullscreenButton.removeClass( "ui-fullscreen-off" ).addClass( "ui-fullscreen-on" );
 712                                 }
 713                                 self._resize();
 714                         }
 715                 },
 716                 refresh : function () {
 717                         this._resize();
 718                 }
 719         });
 720
 721         $( document ).bind( "pagecreate create", function ( e ) {
 722                 $.tizen.multimediaview.prototype.enhanceWithin( e.target );
 723         });
 724 } ( jQuery, document, window ) );