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

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