var body;
define( ["jquery","text!./styles.css","text!./body.html","qlik"], function ( $, cssContent, body, qlik ) {
	'use strict';
$("<style>").html(cssContent).appendTo("head");
	return {
		initialProperties: {
			qHyperCubeDef: {
				qDimensions: [],
				qMeasures: [],
				qInitialDataFetch: [{
					qWidth: 2,
					qHeight: 50
				}]
			}
		},
		//property panel
		definition: {
			type: "items",
			component: "accordion",
			items: {
				sorting: {
					uses: "sorting"
				},
				settings: {
					uses: "settings"
				}
			}
		},
		snapshot: {
			canTakeSnapshot: true
		},

		paint: function ( $element, layout ) {

			//add your rendering code here
			var self = this, html = '';	
			html += body;
			$element.html( html );
		  
 $('.yellow')
  .css('cursor', 'pointer')
  .click(
    function(){
     //alert('Click event is fired');
	 qlik.navigation.nextSheet();// goes to next sheet
    }
  )
 
  $('.green')
  .css('cursor', 'pointer')
  .click(
    function(){
	 qlik.navigation.prevSheet();// goes to prev sheet
    }
  )
  
  $('.blue')
  .css('cursor', 'pointer')
  .click(
    function(){
	 qlik.navigation.gotoSheet('zpqBGGJ');// goes to sheet 1
    }
  )
			
		}
	};

} );
