var WS_S1,
    WS_S2,
    WS_S3,
    WS_S4,
    WS_S5,
    WS_S6,
    WS_S7,
    WS_S8;
// "client.services/grid-service",
define(["jquery","text!./css/styles.css","text!./css/bootstrap.min.css","text!./html/WS_S1.html","text!./html/WS_S2.html", "text!./html/WS_S3.html", "text!./html/WS_S4.html", "text!./html/WS_S5.html", "text!./html/WS_S6.html", "text!./html/WS_S7.html", "text!./html/WS_S8.html", "./js/bootstrap"],
         function ( $, cssCon, bCss, WS_S1, WS_S2, WS_S3, WS_S4, WS_S5, WS_S6, WS_S7, WS_S8 ){
	     'use strict';
           
  $("<style>").html(bCss).appendTo("head");
  $("<style>").html(cssCon).appendTo("head");
           
	return {
		initialProperties: {
			version: 1.0,
			qHyperCubeDef: {
				qDimensions: [],
				qMeasures: [],
				qInitialDataFetch: [{
					qWidth: 2,
					qHeight: 50
				}]
			}
		},
		//property panel
		definition: {
			type: "items",
			component: "accordion",
			items: {
              addons : {
                    uses : "addons",
                    items : {
                        tooltip : {
                            type  : "string",
                            label : "Tool Tip",
                            ref   : "tooltip",
                      defaultValue: "Tool Tip"
                        }
                    }
                }
			}
		},
		snapshot: {
			canTakeSnapshot: true
		},

		paint: function ( $element, layout ) {
          debugger;
			//add your rendering code here
          var self = this, html='<div>';
          
         // Actual Extension content
/*          
html+='<button type="button" class="btn btn-info btn-lg btn-block myButton" data-toggle="modal" data-target="#myModal">?</button>';                       
html+='<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
  html+='<div class="modal-dialog" role="document">';
    html+='<div class="modal-content">';
      html+='<div class="modal-header">';
        html+='<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        html+='<h4 class="modal-title" id="myModalLabel" style="text-align:center;"><img src="http://localhost:4848/extensions/tooltip/images/Help.png" style="float:left;">What is this sheet about?</h4>';
      html+='</div>';
          html+='<div class="modal-body" style="max-height:700px;overflow:auto !important">';
          
          if(layout.tooltip == "WS_S1"){
            html+=WS_S1;
          }else if(layout.tooltip == "WS_S2"){
            html+=WS_S2;
          }else if(layout.tooltip == "WS_S3"){
            html+=WS_S3;
          }else if(layout.tooltip == "WS_S4"){
            html+=WS_S4;
          }else if(layout.tooltip == "WS_S5"){
            html+=WS_S5;
          }else if(layout.tooltip == "WS_S6"){
            html+=WS_S6;
          }else if(layout.tooltip == "WS_S7"){
            html+=WS_S7;
          }else if(layout.tooltip == "WS_S8"){
            html+=WS_S8;
          }

      html+='</div>';
      html+='<div class="modal-footer">';
        html+='<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>';
      html+='</div>';
    html+='</div>';
  html+='</div>';
html+='</div>'; */
		  
		 html+='<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on left">Tooltip on left</button>''
          
     // End of extension content
          
          
                           html+='</div>';
			               $element.html( html ); 
          
			if ( this.selectionsEnabled ) {
				$element.find( '.selectable' ).on( 'qv-activate', function () {
					if ( this.hasAttribute( "data-value" ) ) {
						var value = parseInt( this.getAttribute( "data-value" ), 10 ), dim = 0;
						self.selectValues( dim, [value], true );
						$( this ).toggleClass( "selected" );
					}
				} );
			}
		}
	};

} );
