CC-3168: Stream Settings: "Vorbis Metadata" confusing string

Done

airtime_mvc/application/forms/StreamSetting.php

@@ -38,8 +38,17 @@ class Application_Form_StreamSetting extends Zend_Form
             $this->addElement($output_type);
         }
         
+        # tooltip
+        $description = 'VLC and mplayer have a serious bug when playing an OGG/VORBIS 
+                    stream that has metadata information enabled (stream metadata is the 
+                    track title, show name, etc displayed in the audio player): they will 
+                    disconnect from the stream after every song if this option is enabled. 
+                    If your listeners do not require support for these audio players, 
+                    then you should enable this option.';
+        
         $icecast_vorbis_metadata = new Zend_Form_Element_Checkbox('icecast_vorbis_metadata');
         $icecast_vorbis_metadata->setLabel('Icecast Vorbis Metadata')
+                                ->setDescription($description)
                                 ->setRequired(false)
                                 ->setValue(($setting['icecast_vorbis_metadata'] == "true")?1:0)
                                 ->setDecorators(array('ViewHelper'));

airtime_mvc/application/views/scripts/preference/stream-setting.phtml

@@ -31,7 +31,12 @@
         <?php } ?>
             <dt id="vorbisMetadata-label">
                 <label class="required">
-                <?php echo $this->form->getElement('icecast_vorbis_metadata')->getLabel() ?> :
+                    <?php echo $this->form->getElement('icecast_vorbis_metadata')->getLabel() ?> : 
+                    <span class='info-tooltip' href='#'>
+                        <span>
+                            <?php echo $this->form->getElement('icecast_vorbis_metadata')->getDescription() ?>
+                        </span>
+                    </span>
                 </label>
             </dt>
             <dd id="vorbisMetadata-element">

airtime_mvc/public/css/styles.css

@@ -93,6 +93,40 @@ select {
 }
 /* Version Notification Ends*/
 
+/* Info Tooltip Starts */
+.info-tooltip {
+        cursor: help;
+        position: relative;
+        
+        display:inline-block; zoom:1; display:inline;
+        width:14px; height:14px;
+        background:url(/css/images/icon_info.png) 0 0 no-repeat;
+        float:right; position:relative; top:2px; right:7px;
+        line-height:16px !important;
+}
+.info-tooltip span {
+        margin-left: -9999em;
+        position: absolute;
+        padding: 1em 1em 1em 1em;
+        text-indent:0; font-family:Arial, Helvetica, sans-serif !important; font-size:13px !important;
+        border:#505050 solid 3px;
+        background:#e6e6e6;
+        cursor:text;
+}
+.info-tooltip:hover span:before {
+        content:"";
+        position:absolute; top:22px; left:-11px;
+        width:8px; height:15px;
+        margin:-7px 0 0 0;
+        background:url(/css/images/tooltip_arrow.png) 0 0 no-repeat;
+}
+.info-tooltip:hover span {
+        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
+        position: absolute; left: 25px; top: -18px; z-index: 99;
+        margin-left: 0; width: 250px;
+}
+/* Info Tooltip Ends */
+
 /* Clearfix */
 .clearfix:after, li:after { content: "."; display: block;	height: 0; clear: both;  visibility: hidden;}
 .clearfix, li {	display: inline-block; }