jam-cloud/web/failure.html

8469 lines
598 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html><head>
<title>JamKazam</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"/>
<![endif]-->
<!--<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" href="/assets/client/client-b1e4d9d67373403b67fb8ffe77f03bc5e912285801b1ee03dadd2679d27d9f8f.css" media="all">
<script async="" src="//www.google-analytics.com/analytics.js"></script><script src="//d2wy8f7a9ursnm.cloudfront.net/v7/bugsnag.min.js"></script>
<script>
//<![CDATA[
window.gon={};gon.global={"facebook_app_id":"1441492266082868","ftue_network_test_packet_size":60,"ftue_network_test_packet_size_video":500,"ftue_network_test_backend_retries":3,"twitter_public_account":"jamkazam","scoring_get_work_interval":1000,"scoring_get_work_backoff_interval":60000,"ftue_network_test_min_wait_since_last_score":5,"influxdb_host":"localhost","influxdb_port":8086,"influxdb_database":"development","influxdb_username":"root","influxdb_password":"root","recurly_public_api_key":"sc-s6G2OA80Rwyvsb1RmS3mAE","one_free_jamtrack_per_user":true,"video_available":"full","gear_check_ignore_high_latency":false,"purchases_enabled":true,"estimate_taxes":true,"web_performance_timing_enabled":true,"jamtrack_landing_bubbles_enabled":true,"jamtrack_browser_bubbles_enabled":true,"bugsnag_key":"fa0e229f687bcb2c8711fcb80223744e","bugsnag_notify_release_stages":["production"],"vst_enabled":true,"chat_opened_by_default":false,"network_test_required":false,"musician_count":"200,000+","subscription_codes":[{"id":null,"name":"Free","price":0.0,"cycle":"month"},{"id":"jamsubsilver","name":"Silver","price":4.99,"cycle":"month"},{"id":"jamsubgold","name":"Gold","price":9.99,"cycle":"month"},{"id":"jamsubplatinum","name":"Platinum","price":19.99,"cycle":"month"},{"id":"jamsubsilveryearly","name":"Silver","price":49.99,"cycle":"year"},{"id":"jamsubgoldyearly","name":"Gold","price":99.99,"cycle":"year"},{"id":"jamsubplatinumyearly","name":"Platinum","price":199.99,"cycle":"year"}],"braintree_token":"sandbox_pgjp8dvs_5v5rwm94m2vrfbms","paypal_admin_only":false,"use_video_conferencing_server":false,"manual_override_installer_ends_with":"JamKazam-1.0.3776.dmg","show_recording_debug_status":false,"env":"test","version":"0.0.1"};gon.root_url="http://127.0.0.1:41029/";gon.client_path="/client";gon.websocket_gateway_uri="ws://127.0.0.1:6759/websocket";gon.websocket_gateway_trusted_uri="ws://localhost:6768/websocket";gon.check_for_client_updates=true;gon.fp_apikey="AoskPXootR5OS6iIGegL2z";gon.fp_upload_dir="avatars";gon.allow_force_native_client=true;gon.ftue_io_wait_time=1;gon.ftue_packet_rate_treshold=0.95;gon.ftue_network_test_duration=1;gon.ftue_network_test_max_clients=5;gon.ftue_maximum_gear_latency=20;gon.musician_search_meta={"per_page":10,"filter_keys":{"keys":["sort_order","instruments","genres","concert_gigs","joined_within_days","interests","studio_sessions","ages","skill_level"],"multi":["instruments","genres","ages"],"single":["sort_order","concert_gigs","joined_within_days","interests","studio_sessions","skill_level"]},"sort_order":{"keys":["latency","distance"],"map":{"latency":"Latency to Me","distance":"Distance to Me"}},"interests":{"keys":["any","virtual_band","traditional_band","paid_sessions","free_sessions","cowriting"],"map":{"any":"Any","virtual_band":"Virtual Band","traditional_band":"Traditional Band","paid_sessions":"Paid Sessions","free_sessions":"Free Sessions","cowriting":"Co-Writing"}},"ages":{"keys":[10,20,30,40,50],"map":{"10":"Teens","20":"20's","30":"30's","40":"40's","50":"50+"}}};gon.band_search_meta={"to_join":{"per_page":10,"filter_keys":{"keys":["sort_order","instruments","genres","concert_gigs","joined_within_days","band_type","band_status","play_commitment","touring_option"],"multi":["instruments","genres"],"single":["sort_order","concert_gigs","joined_within_days","band_type","band_status","play_commitment","touring_option"]},"sort_order":{"keys":["distance"],"map":{"distance":"Distance to Me"}},"band_type":{"keys":["any","amateur","professional"],"map":{"any":"Any","amateur":"Amateur","professional":"Professional"}},"band_status":{"keys":["any","virtual_band","traditional_band"],"map":{"any":"Any","virtual_band":"Virtual Band","traditional_band":"Traditional Band"}},"play_commitment":{"keys":["any","1","2","3","4"],"map":{"any":"Any","1":"Infrequent","2":"Once a Week","3":"2-3 Times Per Week","4":"4+ Times Per Week"}},"touring_option":{"keys":["any","yes","no"],"map":{"any":"Any","yes":"yes","no":"no"}}},"to_hire":{"per_page":10,"filter_keys":{"keys":["sort_order","genres","concert_gigs","band_status","performance_samples","max_cost","free_gigs"],"multi":["genres"],"single":["sort_order","concert_gigs","band_status","performance_samples","max_cost","free_gigs"]},"sort_order":{"keys":["distance","price_asc","price_desc"],"map":{"distance":"Distance to Me","price_asc":"Gig Minimum Price (Low to High)","price_desc":"Gig Minimum Price (High to Low)"}},"band_status":{"keys":["any","virtual_band","traditional_band"],"map":{"any":"Any","virtual_band":"Virtual Band","traditional_band":"Traditional Band"}},"performance_samples":{"keys":["any","yes","no"],"map":{"any":"Any","yes":"yes","no":"no"}}}};gon.session_stat_thresholds={"network":{"wifi":{"warn":true,"poor":true,"eql":true},"net_bitrate":{"warn":210,"poor":155,"inverse":true},"audio_bitrate_tx":{"warn":128,"poor":96,"inverse":true},"audio_bitrate_rx":{"warn":128,"poor":96,"inverse":true},"video_rtpbw_tx":{"warn":600.1,"poor":400.1,"inverse":true,"zero_is_good":true},"video_rtpbw_rx":{"warn":600.1,"poor":400.1,"inverse":true,"zero_is_good":true},"ping":{"warn":30.1,"poor":50.1},"pkt_loss":{"warn":2.1,"poor":5.1},"audiojq_median":{"warn":4.1,"poor":6.1},"jitter_var":{"warn":2.1,"poor":4.1}},"system":{"cpu":{"warn":60.1,"poor":80.1}},"audio":{"audio_in_type":{"warn":"Windows WDM-KS","poor":null,"eql":true},"audio_out_type":{"warn":"Windows WDM-KS","poor":null,"eql":true},"framesize":{"warn":2.6,"poor":2.6},"latency":{"warn":10,"poor":20},"input_jitter":{"warn":0.51,"poor":1.01},"output_jitter":{"warn":0.51,"poor":1.01}},"aggregate":{"latency":{"warn":20.1,"poor":35.1}}};gon.midi_enabled=true;gon.chat_blast=true;gon.jamclass_enabled=true;gon.isNativeClient=true;gon.use_cached_session_scores=true;gon.allow_both_find_algos=false;gon.stripe_publishable_key="pk_test_HLTvioRAxN3hr5fNfrztZeoX";gon.spa_origin_url="http://beta.jamkazam.local:4000";gon.olark_box_start_hidden=true;gon.user_id="b900991c-69af-4b6d-b9d3-9a75143d74cc";gon.user_email="person_1@example.com";gon.user_name="Person 1";gon.recurly_tax_estimate_jam_track_plan="jamtrack-acdc-backinblack";
//]]>
</script>
<!--
-->
<script src="/assets/application-8721f618b71c78da42b864ff32e61119a0e33387c930287ccc2d1384416845fe.js"></script>
<meta name="description" content="Enter here to browse the JamKazam platform">
<meta property="fb:app_id" content="1441492266082868">
<meta property="og:title" content="JamKazam">
<meta property="og:url" content="http://127.0.0.1:41029/client">
<meta property="og:description" content="Play music together over the Internet as if in the same room.">
<meta property="og:image" content="http://127.0.0.1:41029/assets/web/logo-256-c9ef2f9c39301b9e176557b8f88ec20417229e6dc1057e3042739e3a6b9d04b1.png">
<meta property="og:image:width" content="256">
<meta property="og:image:height" content="256">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@jamkazam">
<meta name="twitter:title" content="JamKazam">
<meta name="twitter:description" content="Play music together over the Internet as if in the same room.">
</head>
<body class="jam" data-client-type="client">
<div class="curtain " style="width: 100%; height: 100%; z-index: 9999; display: none;">
<div class="splash">
<img src="/assets/header/logo.png">
<p>Connecting...</p>
</div>
</div>
<div class="dialog-overlay op70" style="display:none; width:100%; height:100%; z-index:99;"></div>
<!-- Header -->
<div layout="header" class="header" style="display:none;">
<!-- logo -->
<h1>JamKazam</h1>
<!--
<a onclick="jamClient.FTUESetStatus(false);">Want FTUE</a> |
<a onclick="jamClient.FTUESetStatus(true);">No FTUE</a> |
<a layout-link="session-settings">SS</a>
-->
<div id="profile" class="userinfo">
<!-- shopping cart -->
<a id="header-shopping-cart" href="/client#/shoppingCart" class="header-shopping-cart hidden">
<img src="/assets/content/shopping-cart.png">
</a>
<span style="white-space: nowrap">
<!-- profile area -->
<div class="arrow-down"></div>
<!-- user name -->
<div id="user" class="user"></div>
<!-- end profile area -->
<!-- avatar -->
<a href="#" class="avatar_large">
<img id="header-avatar" src="/assets/shared/avatar_generic.png">
</a>
<ul class="shortcuts" style="z-index:1000;">
<!-- <li><a layout-link="account">Profile</a></li> -->
<li class="account-home"><a href="/client#/account">Account Home</a></li>
<li class="identity"><a href="/client#/account/identity">Identity</a></li>
<li class="profile"><a href="/client#/account/profile">Profile</a></li>
<!--<li class="subscriptions"><a href="/client#/account/subscriptions">Subscriptions</a></li> -->
<!-- <li class="payments"><a href="/client#/account/payments">Payments</a></li> -->
<li class="audio"><a href="/client#/account/audio">Audio Gear</a></li>
<li class="audio account-menu-group"><a href="/client#/account/video">Video Gear</a></li>
<!--<li class="band-setup"><a href="/client#/jamclass">JamClass</a></li>-->
<li class="invite-friends"><span class="menuheader"><span class="arrow-right"></span><a href="#">Invite Friends</a></span>
<ul class="shortcuts-submenu">
<li class="google-invite"><a href="#">Google</a></li>
<li class="email-invite"><a href="#">Email</a></li>
<li class="facebook-invite"><a href="#">Facebook</a></li>
</ul>
</li>
<li class="download-app"><a rel="external" href="/downloads">Download App</a></li>
<li class="get-help"><a rel="external" href="/help_desk">Get Help</a></li>
<li class="sign-out"><a rel="nofollow" data-method="delete" href="/signout">Sign Out</a></li>
</ul>
</span>
</div>
<!--<div data-react-class="BroadcastHolder" data-react-props="{&quot;is_guitar_center&quot;:false}" data-react-cache-id="BroadcastHolder-0"></div>-->
<div data-react-class="TopMessageHolder" data-react-props="{&quot;is_guitar_center&quot;:false}" data-react-cache-id="TopMessageHolder-0"></div>
</div>
<!-- Templates -->
<script type="text/template" id="template-search-section">
<h2>{section}</h2>
<ul>
{items}
</ul>
</script>
<script type="text/template" id="template-search-noresults">
<h2 class="emptyresult">No Matches</h2>
<p>No results returned</p>
</script>
<script type="text/template" id="template-search-item">
<li>
<a>
<img src="{image}"/>
<span class="text">{first_name} {last_name}</span>
<span class="subtext">{subtext}</span>
</a>
</li>
</script>
<!--
<h1>JamKazam</h1>
<div class="search">
<a href="/client#/testBridge">Test Bridge</a><br/>
<input type="text" class="searchtextinput" placeholder="Search for Bands, Musicians and Fans"/>
</div>
<div class="userinfo">
<!-- gravatar_for current_user, size: 52, hclass: "avatar medium" -->
<!--
<div class="username">
<h2>TODO Name</h2>
<img class="profile-toggle" src="/assets/down_arrow-4a662e7090402dbbbcc6566194fe6106b6a7e4e2d63cb4dd4a05612287df4340.png" />
<ul>
<li><a layout-link="account">Profile</a></li>
<li><a rel="nofollow" data-method="delete" href="/signout">Sign out</a></li>
</ul>
</div>
</div>
-->
<div class="screen no-login-required" layout="screen" layout-id="home"><div class="grid" layout-grid="2x12"><div class="homecard createsession logged-in" layout-grid-columns="4" layout-grid-position="0,0" layout-grid-rows="1" layout-link="createSession" type="createSession"><h2>create session</h2><div class="homebox-info"><!--4 friends online, 2 currently in sessions--></div></div><div class="homecard findsession logged-in" layout-grid-columns="4" layout-grid-position="4,0" layout-grid-rows="1" layout-link="findSession" type="findSession"><h2>find session</h2><div class="homebox-info"><!--1 session invitation, 19 public sessions active--></div></div><div class="homecard jamtrack" layout-grid-columns="4" layout-grid-position="8,0" layout-grid-rows="1" layout-link="jamtrack" type="jamtrack"><h2>jamtracks</h2><div class="homebox-info"></div></div><!--5 followers, 3 following--><div class="homecard musicians logged-in" layout-grid-columns="3" layout-grid-position="0,1" layout-grid-rows="1" layout-link="musicians"><h2>musicians</h2><div class="homebox-info"><!--5 followers, 3 following--></div></div><div class="homecard bands logged-in" layout-grid-columns="3" layout-grid-position="3,1" layout-grid-rows="1" layout-link="bands"><h2>bands</h2><div class="homebox-info"><!--1 session invitation, 19 public sessions active--></div></div><div class="homecard profile logged-in" layout-grid-columns="3" layout-grid-position="6,1" layout-grid-rows="1"><h2>profile</h2><div class="homebox-info"><!--5 followers, 3 following--></div></div><div class="homecard account logged-in" layout-grid-columns="3" layout-grid-position="9,1" layout-grid-rows="1" layout-link="account"><h2>account</h2><div class="homebox-info"><!--free service level--></div></div></div></div>
<!-- start footer -->
<div id="footer">
<!-- copyright -->
<div id="copyright">Copyright © 2026 JamKazam, Inc. All Rights Reserved</div>
<!-- footer links -->
<div id="footer-links">
<a rel="external" href="/corp/about">about</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a rel="external" href="/corp/news">news</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a rel="external" href="/corp/media_center">media</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a rel="external" href="/corp/contact">contact</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a rel="external" href="/corp/privacy">privacy</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a rel="external" href="/corp/terms">terms of service</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a rel="external" href="/help_desk">help</a>
</div>
<span id="recording-manager-viewer">
<span id="recording-manager-launcher" class="recording-manager-launcher">
File Manager
</span>
<span id="recording-manager-convert" class="recording-manager-command">
<span>converting</span><span class="percent">0</span>
</span>
<span id="recording-manager-upload" class="recording-manager-command">
<span>uploading</span><span class="percent">0</span>
</span>
<span id="recording-manager-download" class="recording-manager-command">
<span>downloading</span><span class="percent">0</span>
</span>
<span id="recording-manager-delete" class="recording-manager-command-hidden">
<span>delete</span><span class="percent">0</span>
</span>
</span>
<div class="clearall"></div>
</div>
<!-- end footer -->
<script type="text/template" id="template-paginator">
<div class="paginator" data-current-page="{{data.currentPage}}">
{% if (0 == data.currentPage) { %}
<span class="page-less arrow-left"></span>
{% } else { %}
<a href='#' class="page-less arrow-left"></a>
{% } %}
{% for(var i = 0; i < data.pages; i++) { %}
{% if (i == data.currentPage) { %}
<span class="page-link" data-page="{{i}}">{{i + 1}}</span>
{% } else { %}
<a href='#' class="page-link" data-page="{{i}}">{{i + 1}}</a>
{% } %}
{% } %}
{% if (data.currentPage == data.pages - 1) { %}
<span class="page-less arrow-right"></span>
{% } else { %}
<a href='#' class="page-more arrow-right"></a>
{% } %}
</div>
</script>
<!-- Search Results Screen -->
<div layout="screen" layout-id="searchResults" layout-arg="query" class="screen secondary">
<div class="content-head">
<div class="content-icon">
<a href="#"><img src="/assets/content/icon_search-e6c3267ed0864a134d25109bd4a397cf7152e2e8b7ae83d87ffe96c032a3d4c9.png" width="19" height="19"></a>
</div>
<h1>search results</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="search-result-header">
<div class="right mr30">
<span id="result-count"></span><span id="query"></span>
</div>
<div class="left ml35">
<a data-search_text_type="musicians" id="musician-search-result" href="#" class="search-nav active">MUSICIANS</a>
<a data-search_text_type="bands" id="band-search-result" href="#" class="search-nav">BANDS</a>
<a data-search_text_type="fans" id="fan-search-result" href="#" class="search-nav">FANS</a>
</div>
</div>
<div class="content-scroller">
<div id="search-results" class="content-wrapper" style="padding-left:50px;">
</div>
</div>
</div>
<script type="text/template" id="template-musicians-search-result">
<div user-id="{userId}" class="search-result">
<a href="#" user-id="{userId}" hoveraction="musician" class="avatar-small">
<img src="{avatar_url}" />
</a>
<div class="search-result-name">
<a user-id="{userId}" hoveraction="musician" href="{profile_url}">{userName}</a><br />
<span class="search-result-location">{location}</span>
</div>
<br clear="left" />
<div id="instruments" class="left ml10 nowrap">
{instruments}
</div>
<a class="btn-connect-friend button-orange smallbutton right">CONNECT</a>
</div>
</script>
<script type="text/template" id="template-fans-search-result">
<div user-id="{userId}" class="search-result">
<a user-id="{userId}" hoveraction="fan" href="#" class="avatar-small">
<img src="{avatar_url}" />
</a>
<div class="search-result-name">
<a user-id="{userId}" hoveraction="fan" href="{profile_url}">{userName}</a><br />
<span class="search-result-location">{location}</span>
</div>
<br clear="left" />
</div>
</script>
<script type="text/template" id="template-bands-search-result">
<div user-id="{bandId}" class="search-result">
<a band-id="{bandId}" hoveraction="band" href="#" class="avatar-small">
<img src="{avatar_url}" />
</a>
<div class="search-result-name">
<a band-id="{bandId}" hoveraction="band" href="{profile_url}">{bandName}</a><br />
<span class="search-result-location">{location}</span>
</div>
<br clear="left" />
</div>
</script>
<script type="text/template" id="template-invitation-sent">
<div user-id="{userId}" class="search-connected">
<div style="margin-top:10px;">
<br />
<img src="/assets/content/icon_goodquality.png" width="16" height="16" />
<br />
<b>Invitation Sent!</b><br />
<a href="{profile_url}">View {first_name}&#39;s Profile</a>
</div>
</div>
</script>
<!-- Templates for faders -->
<!-- Vertical Fader -->
<script type="text/template" id="template-fader-v">
<div class="fader vertical" data-control="fader" data-fader-id="{{ faderId }}" data-orientation="vertical" style="height:{{height}}px;">
<div class="handle" style="bottom:0%;" data-control="fader-handle">
<img width="28" height="11" src="/assets/content/slider_gain_vertical-f6e8cc9b4479a357825fef51069c34b8721446a0406c7da3d2b37c0fe160bf62.png" />
</div>
</div>
</script>
<!-- Horizontal Fader -->
<script type="text/template" id="template-fader-h">
<div class="fader horizontal" data-control="fader" data-fader-id="{{ faderId }}" data-orientation="horizontal" style="width:{{width}}px;">
<div class="handle" style="left:0%;" data-control="fader-handle">
<img height="17" width="8" src="/assets/content/slider_volume-89a8b65836d8eace033d1b44793baaf8c06cd8d47959c1756d7c6c9e31c36a67.png" />
</div>
</div>
</script>
<!-- Reusable templates for gain meters -->
<!-- Horizontal VU Template -->
<script type="text/template" id="template-vu-h">
<table class="gainmeter-vu-top vu horizontal" cellspacing="3" cellpadding="0">
<tr>
{%
var redSwitch = Math.round(data.lightCount * 0.6666667);
for (var i=0; i<data.lightCount; i++) {
var lightClass = (i >= redSwitch) ? 'vu-red-off' : 'vu-green-off';
%}
<td width="{{data.lightWidth}}" height="{{data.lightHeight}}"
class="vulight vu{{i}} {{lightClass}}"></td>
{% } %}
</tr>
</table>
</script>
<!-- Vertical VU Template -->
<script type="text/template" id="template-vu-v">
<table class="vu vertical">
{%
var redSwitch = Math.round(data.lightCount * 0.6666667);
var lightClass = 'vu-red-off';
for (var i=data.lightCount-1; i>=0; i--) {
var lightClass = (i >= redSwitch) ? 'vu-red-off' : 'vu-green-off';
%}
<tr><td width="{{data.lightWidth}}" height="{{data.lightHeight}}"
class="vulight vu{{i}} {{lightClass}}"></td></tr>
{% } %}
</table>
</script>
<!--%= render "ftue" % No longer used-->
<div class="no-websocket-connection">
<div class="server-connection">
<h2>
<img class="alert-icon left-side" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png">
<span>Disconnected from Server</span>
<img class="alert-icon right-side" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png">
</h2>
<div class="message-contents"></div>
</div>
</div>
<script id="template-server-connection" type="text/template">
<div class="reconnect-progress-msg">
<span class="reconnect-before">Reconnecting automatically in </span>
<span class="reconnect-countdown">{{data.countdown}}</span>
</div>
<a class="disconnected-reconnect reconnect-enabled" href="#">RECONNECT NOW</a>
</script>
<script id="template-no-login" type="text/template">
<div>
<div class="login-back-in-msg">
<span>You will need to log back in</span>
</div>
<a class="disconnected-login" href="#">GO TO SIGN IN</a>
</div>
</script>
<script id="template-icon-instrument-select" type="text/template">
<div class="icon-instrument-select">
<div class="current-instrument none"></div>
<a class="arrow-down"></a>
<ul>
{% _.each(data.instruments, function(instrument, instrumentId) { %}
<li data-instrument-id="{{instrumentId}}">
<a href="#">
<img src="{{instrument.asset}}">
{{instrument.name}}
</a>
</li>
{% }) %}
</ul>
</div>
</script>
<script id="template-mute-select" type="text/template"><ul><li data-mute-option="master"><a href="#">Mute For Everyone in Master Mix</a></li><li data-mute-option="personal"><a href="#">Mute Only in My Personal Mix</a></li></ul></script>
<script id="template-manage-vsts" type="text/template"><ul><li data-manage-vst-option="scan"><a href="#">scan for new or updated plugins</a></li><li data-manage-vst-option="manage"><a href="#">manage folders/paths to scan for plug-ins</a></li><li data-manage-vst-option="clear"><a href="#">clear plug-in list</a></li></ul></script>
<script id="template-lesson-session-actions" type="text/template">{% if (data.cardNotOk) { %}<ul><li data-lesson-option="enter-payment"><a href="#">Enter Payment</a></li></ul>{% } else if (data.attachments_only) { %}<ul><li data-lesson-option="attach-recording"><a href="#">Attach Recording</a></li><li data-lesson-option="attach-notation"><a href="#">Attach Notation File</a></li><li data-lesson-option="attach-audio"><a href="#">Attach Audio File</a></li></ul>{% } else if (data.isScheduled) { %}<ul><li data-lesson-option="status"><a href="#">View Status</a></li><li data-lesson-option="messages"><a href="#">View Messages</a></li><li data-lesson-option="messages"><a href="#">Attach Message</a></li><li data-lesson-option="attach-recording"><a href="#">Attach Recording</a></li><li data-lesson-option="attach-notation"><a href="#">Attach Notation File</a></li><li data-lesson-option="attach-audio"><a href="#">Attach Audio File</a></li><li data-lesson-option="join"><a href="#">Join Lesson Session</a></li><li data-lesson-option="reschedule"><a href="#">Reschedule Lesson</a></li><li data-lesson-option="cancel"><a href="#">Cancel Lesson</a></li>{% if (data.isAdmin) { %}<li data-lesson-option="start-5-min"><a href="#">Set Start In 5 Min</a></li><li data-lesson-option="start-65-ago"><a href="#">Set Start 65 Min Ago</a></li>{% } %}</ul>{% } else if (data.isRequested) { %}<ul><li data-lesson-option="status"><a href="#">View Status</a></li><li data-lesson-option="messages"><a href="#">View Messages</a></li><li data-lesson-option="messages"><a href="#">Attach Message</a></li><li data-lesson-option="cancel">{% if (data.isStudent) { %}<a href="#">Cancel Request</a>{% } else { %}<a href="#">Decline Request</a>{% } %}</li></ul>{% } else { %}<ul><li data-lesson-option="status"><a href="#">View Status</a></li><li data-lesson-option="messages"><a href="#">View Messages</a></li><li data-lesson-option="messages"><a href="#">Attach Message</a></li><li data-lesson-option="attach-recording"><a href="#">Attach Recording</a></li><li data-lesson-option="attach-notation"><a href="#">Attach Notation File</a></li><li data-lesson-option="attach-audio"><a href="#">Attach Audio File</a></li></ul>{% } %}</script>
<script id="template-jamblaster-options" type="text/template"><ul>{% if (data.autoconnect) { %}<li data-jamblaster-option="auto-connect"><a href="#">Cancel Auto Connect</a></li>{% } else { %}<li data-jamblaster-option="auto-connect"><a href="#">Auto Connect</a></li>{% } %}<li data-jamblaster-option="restart"><a href="#">Restart</a></li><li data-jamblaster-option="name"><a href="#">Name</a></li><li data-jamblaster-option="check-for-updates"><a href="#">Check for Updates</a></li>{% if (data.isDynamicPorts) { %}<li data-jamblaster-option="set-static-ports"><a href="#">Revert To Dynamic Ports</a></li>{% } else { %}<li data-jamblaster-option="set-static-ports"><a href="#">Set Static Ports</a></li>{% } %}<li data-jamblaster-option="factory-reset"><a href="#">Factory Reset</a></li></ul></script>
<script id="template-vst-effects" type="text/template"><ul><li data-manage-vst-option="open-vst"><a href="#">Open&nbsp;<span class="vst-name"></span></a></li><li data-manage-vst-option="update-track"><a href="#">Update Track . . .</a></li></ul></script>
<script id="template-metronome-playback-mode" type="text/template"><p class="please-select">Please select one:</p><ul><li data-playback-option="self"><a href="#">- Play metronome</a></li><li data-playback-option="cricket"><a href="#">- Play cluster test</a></li><li data-ui-option="show-metronome-window"><a href="#">- Show visual metronome</a></li></ul></script>
<script id="template-wizard-buttons" type="text/template">
<div class="wizard-buttons-holder">
<div class="left-buttons">
<a class="button-grey btn-help" href="#">HELP</a>
<a class="button-grey btn-cancel" href="#" layout-action="close">CANCEL</a>
</div>
<div class="right-buttons">
<a class="button-grey btn-back" href="#">BACK</a>
<a class="button-orange btn-next" href="#">NEXT</a>
<a class="button-orange btn-close" href="#" layout-action="close">CLOSE</a>
</div>
</div>
</script>
<div class="dialog gear-wizard" id="gear-wizard-dialog" layout="dialog" layout-id="gear-wizard">
<div class="content-head">
<h1 class="top-header">audio gear setup</h1>
</div>
<div class="ftue-inner" layout-wizard="gear-wizard">
<div class="wizard-step" dialog-purpose="Intro" dialog-title="Understand Your Gear" layout-wizard-step="0">
<div class="ftuesteps"></div>
<div class="clearall"></div>
<div class="help-text">
Please click the Watch Video button below to see a video explaining the different kinds of gear setups you can use with JamKazam.
It will take a few minutes, but it will educate you and save you time and trouble.
</div>
<div class="center video-button-holder">
<a class="button-orange watch-video" href="#" rel="external">INSTRUCTIONS</a>
</div>
</div>
<div class="wizard-step" dialog-purpose="SelectAudioGear" dialog-title="Select &amp; Test Audio Gear" layout-wizard-step="1">
<div class="ftuesteps"></div>
<div class="clearall"></div>
<div class="help-text">In this step, you will select, configure, and test your audio gear. Please click Instructions button for guidance.</div>
<div class="wizard-step-content">
<div class="wizard-step-column">
<h2>Instructions</h2>
<div class="ftue-box instructions">
<ul>
<li>Select audio interface for inputs and outputs.</li>
<li>Check output ports you will use to monitor.</li>
<li>Configure interface settings.</li>
<li>View test results.</li>
</ul>
<div class="center">
<a class="button-orange watch-video" rel="external">
INSTRUCTIONS
</a>
</div>
</div>
</div>
<div class="wizard-step-column">
<h2>Audio Input Device</h2>
<select class="w100 select-audio-input-device">
<option>None</option>
</select>
<h2 class="audio-channels">Audio Input Ports</h2>
<div class="ftue-box list ports input-ports"></div>
<a class="button-orange asio-settings-input-btn">ASIO SETTINGS...</a>
<a class="button-orange resync-btn">RESYNC</a>
<div class="resync-status">
<span class="resynctext">RESYNCING...</span>
<span class="spinner-small"></span>
</div>
</div>
<div class="wizard-step-column">
<h2>Audio Output Device</h2>
<select class="w100 select-audio-output-device">
<option>Same as input</option>
</select>
<h2 class="audio-channels">Audio Output Ports</h2>
<div class="ftue-box list ports output-ports"></div>
<div class="sample-rate">
<h2 class="sample-rate-header">Sample Rate:</h2>
<select class="select-sample-rate"><option value="USE_DEVICE_DEFAULT_SR">Match</option><option value="PREFER_44">44100</option><option value="PREFER_48">48000</option><option value="PREFER_96">96000</option></select>
</div>
<a class="button-orange asio-settings-output-btn">ASIO SETTINGS...</a>
<div class="frame-and-buffers"><div class="framesize"><h2>Frame Size:</h2><select class="select-frame-size"><option val="1">1</option><option val="2">2</option><option val="2.5">2.5</option><option val="5"> 5</option><option val="10"> 10</option></select></div><div class="buffers"><h2>Buffer In/Out<a class="adjust-gear-settings" href="#">?</a></h2><select class="select-buffer-in"><option val="0"> 0</option><option val="1"> 1</option><option val="2"> 2</option><option val="3"> 3</option><option val="4"> 4</option><option val="5"> 5</option><option val="6"> 6</option><option val="7"> 7</option><option val="8"> 8</option><option val="9"> 9</option><option val="10">10</option></select><select class="select-buffer-out"><option val="0"> 0</option><option val="1"> 1</option><option val="2"> 2</option><option val="3"> 3</option><option val="4"> 4</option><option val="5"> 5</option><option val="6"> 6</option><option val="7"> 7</option><option val="8"> 8</option><option val="9"> 9</option><option val="10">10</option></select></div></div>
</div>
<div class="wizard-step-column">
<h2>Test Results</h2>
<div class="ftue-box results" data-type="automated">
<div class="left w50 center white scoring-section latency-score-section">
<div class="p5">
<div class="latency">LATENCY</div>
<span class="latency-score"></span>
<div class="spinner-small"></div>
</div>
</div>
<div class="left w50 center white scoring-section io-score-section">
<div class="p5">
<div class="io">I/O</div>
<span class="io-skip-msg">
Not Tested
</span>
<span class="io-countdown">
<span class="secs"></span>
seconds left
<span class="spinner-small"></span>
</span>
<span class="io-rate">Rate=<span class="io-rate-score"></span></span>
<span class="io-var">Var=<span class="io-var-score"></span></span>
</div>
</div>
<div class="clearall">
<ul class="results-text">
<li class="latency-good">Your latency is good.</li>
<li class="latency-acceptable">Your latency is fair.</li>
<li class="latency-bad">Your latency is poor.</li>
<li class="io-rate-good">Your I/O rate is good.</li>
<li class="io-rate-acceptable">Your I/O rate is fair.</li>
<li class="io-rate-bad">Your I/O rate is poor.</li>
<li class="io-var-good">Your I/O variance is good.</li>
<li class="io-var-acceptable">Your I/O variance is fair.</li>
<li class="io-var-bad">Your I/O variance is poor.</li>
<li class="success">You may proceed to the next step.</li>
<li class="failure">
<span class="conditional" data-type="automated">
We're sorry, but your audio gear has failed.
<span class="io-failure">
<a class="adjust-gear-for-io-fail" href="#">Tweak your settings,</a>
watch the video, or click HELP button below.
</span>
<span class="no-io-failure">
Please watch video or click HELP button below.
</span>
</span>
<span class="conditional" data-type="loopback">We're sorry, but your audio gear has failed. Please watch videos on the previous screen.</span>
<span class="conditional" data-type="adjust-gear-speed">We're sorry, but your audio gear has failed. Adjust your settings and try again.</span>
</li>
</ul>
<div class="unknown-text">
<div>We cannot accurately predict the latency of your audio gear. To proceed, you must run an audio loopback test. Click button below to do this.</div>
<div class="loopback-button-holder">
<a class="button-orange loopback-test" href="#">RUN LOOPBACK TEST</a>
</div>
</div>
<div class="loopback-completed">
You have completed the loopback test successfully. Click Next to continue.
</div>
<div class="adjust-gear-speed-completed">
You have adjusted your gear speed settings successfully. Click Next to continue.
</div>
</div>
</div>
</div>
<div class="clearall"></div>
</div>
</div>
<div class="wizard-step" dialog-purpose="ConfigureTracks" dialog-title="Configure Tracks" layout-wizard-step="2">
<div class="ftuesteps"></div>
<div class="clearall"></div>
<div class="help-text">In this step, you will set up your live performance audio tracks.</div>
<div class="wizard-step-content no-selection-range">
<div class="wizard-step-column">
<h2>Instructions</h2>
<div class="ftue-box instructions">
<ul>
<li>Edit the first audio track using the "update" link to set it up as an instrumental or vocal track as you like.</li>
<li>If desired, add other audio or MIDI tracks for other instruments or vocals.</li>
</ul>
<div class="center">
<a class="button-orange watch-video" rel="external">INSTRUCTIONS</a>
</div>
</div>
</div>
<div class="wizard-step-column">
<div data-react-class="ConfigureTracks" data-react-props="{}" data-react-cache-id="ConfigureTracks-0"><div class="ConfigureTracks"><select class="certified-audio-profile" style="display: none;"></select><div class="inputs-view"><div><h3 class="session-audio-inputs-header">Session Audio Inputs (Live Tracks)</h3><h3 class="plugin-header">Plugin</h3><h3 class="instrument-header">Instrument</h3></div><div class="live-tracks"></div><div class="add-track-action"><a class="button-orange">ADD AUDIO TRACK . . . </a><a class="button-orange">ADD MIDI TRACK . . . </a></div></div><div class="outputs-view"><div><h3 class="session-audio-outputs-header">Session Audio Outputs (Requires 2 Ports)</h3><div class="output-tracks"></div><a class="button-orange">UPDATE OUTPUTS . . . </a></div></div><div class="clearall"></div></div></div>
</div>
</div>
</div>
<div class="wizard-step" dialog-purpose="ConfigureVoiceChat" dialog-title="Configure Voice Chat" layout-wizard-step="3">
<div class="ftuesteps"></div>
<div class="clearall"></div>
<div class="help-text">In this step, you may set up a microphone to use for voice chat if needed.</div>
<div class="wizard-step-content">
<div class="wizard-step-column">
<h2>Instructions</h2>
<div class="ftue-box instructions">
<p>If you have set up a mic in step 2 for your instrument or voice, click Next to move forward.</p>
<p>Otherwise, follow the instructions to set up a voice chat mic.</p>
<div class="center">
<a class="button-orange watch-video" rel="external">INSTRUCTIONS</a>
</div>
</div>
</div>
<div class="wizard-step-column">
<h2 class="sub-header">Select Voice Chat Option</h2>
<form class="voice">
<div class="voicechat-option reuse-audio-input">
<input checked="checked" name="voicechat" type="radio">
<h3>Use Music Microphone</h3>
<p>I am already using a microphone to capture my vocal or instrumental music, so I can talk with other musicians using that microphone</p>
</div>
<div class="voicechat-option use-chat-input">
<input name="voicechat" type="radio">
<h3>Use Chat Microphone</h3>
<p>I am not using a microphone for acoustic instruments or vocals, so use the input selected below for voice chat during my sessions</p>
</div>
</form>
<div class="clearall"></div>
<!-- / .wizard-step-column -->
<h2 class="sub-header voice-chat-header">Voice Chat Input</h2>
<div class="ftue-box chat-inputs"></div>
<div class="vu-meter">
<div class="ftue-controls">
<div class="ftue-vu-left voice-chat-vu-left"></div>
<div class="ftue-fader chat-fader"></div>
<div class="gain-label">GAIN</div>
<div class="ftue-vu-right voice-chat-vu-right"></div>
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step" dialog-purpose="DirectMonitoring" dialog-title="Turn Off Direct Monitoring" layout-wizard-step="4">
<div class="ftuesteps"></div>
<div class="clearall"></div>
<div class="help-text">In this step, you will ensure that any direct monitoring feature on your audio interface is turned off.</div>
<div class="wizard-step-content">
<div class="wizard-step-column">
<h2>Instructions</h2>
<div class="ftue-box instructions">
<ul>
<li>Find the Direct Monitoring control on your audio interface.</li>
<li>If a button or switch, set it to off position.</li>
<li>If a knob, turn it so 100% of audio is from your computer, and 0% is from inputs.</li>
<li>
If audio is poor try
<a class="adjust-settings-direct-monitor" href="#">tweaking your settings</a>
</li>
</ul>
<div class="center">
<a class="button-orange watch-video" rel="external">INSTRUCTIONS</a>
</div>
</div>
</div>
<div class="wizard-step-column">
<div class="help-content">
When you have fully turned off the direct monitoring control (if any) on your audio interface,
please click the Play button below. If you hear the audio clearly, then your settings are correct,
and you can move ahead to the next step.
If you use your audio interface for recording, and use the direct monitoring feature for recording,
please note that you will need to remember to turn this feature off every time that you use the JamKazam service.
</div>
<div class="center">
<a class="ftue-box test-direct-monitoring paused no-selection-range">
<div class="playing">
<img align="top" height="20" src="assets/content/icon_pausebutton.png" width="20">
<span class="direct-monitoring-btn">Pause</span>
</div>
<div class="paused">
<img align="top" height="20" src="assets/content/icon_playbutton.png" width="20">
<span class="direct-monitoring-btn">Play</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="wizard-step success" dialog-purpose="Success" dialog-title="Success!" layout-wizard-step="5">
<div class="ftuesteps"></div>
<div class="clearall"></div>
<div class="wizard-step-content">
<div class="wizard-step-column">
<p>Congratulations! You are now ready to create, join, and play in online sessions with other JamKazam musicians. Have fun and thanks for joining us!</p>
<p class="congrats-sig">— Team JamKazam</p>
</div>
<div class="wizard-step-column"></div>
</div>
</div>
<div class="wizard-buttons"></div>
</div>
</div>
<script id="template-ftuesteps" type="text/template">
<div class="ftuesteps-inner">
<a class="ftue-stepnumber" data-step-number="0">1</a>
<div class="ftue-step-title">Understand Your Gear</div>
<a class="ftue-stepnumber" data-step-number="1">2</a>
<div class="ftue-step-title">Select & Test Audio Gear</div>
<a class="ftue-stepnumber" data-step-number="2">3</a>
<div class="ftue-step-title">Configure Tracks</div>
<a class="ftue-stepnumber" data-step-number="3">4</a>
<div class="ftue-step-title">Configure Voice Chat</div>
<a class="ftue-stepnumber" data-step-number="4">5</a>
<div class="ftue-step-title">Turn Off Direct Monitoring</div>
<a class="ftue-stepnumber" data-step-number="5">6</a>
<div class="ftue-step-title">Success!</div>
</div>
</script>
<script id="template-wizard-buttons" type="text/template">
<div class="wizard-buttons-holder">
<a class="button-grey btn-cancel" href="#" layout-action="close">CANCEL</a>
<a class="button-grey btn-help" href="#">HELP</a>
<a class="button-orange btn-back" href="#">BACK</a>
<a class="button-orange btn-next" href="#">NEXT</a>
<a class="button-orange btn-close" href="#" layout-action="close">CLOSE</a>
</div>
</script>
<script id="template-audio-port" type="text/template">
<div class="audio-port">
<input data-id="{{data.id}}" type="checkbox">
<span>
{{data.name}}
</span>
</div>
</script>
<script id="template-assignable-port" type="text/template">
<div class="ftue-input" data-direction="{{data.direction}}" data-input-id="{{data.id}}">{{data.name}}</div>
</script>
<script id="template-track-target" type="text/template">
<div class="track" data-num="{{data.num}}">
<div class="num">{{data.num + 1}}:</div>
<div class="track-target target" data-num="{{data.num}}" track-count="0">
<span class="placeholder">None</span>
</div>
</div>
</script>
<script id="template-output-target" type="text/template">
<div class="output" data-num="{{data.num}}">
<div class="num">{{data.num + 1}}:</div>
<div class="output-target target" data-num="{{data.num}}" output-count="0">
<span class="placeholder">None</span>
</div>
</div>
</script>
<script id="template-chat-input" type="text/template">
<div class="chat-input">
<input data-channel-id="{{data.id}}" data-channel-name="{{data.name}}" name="chat-device" type="radio">
<p>
<span>{{data.name}}</span>
</p>
</div>
</script>
<script id="template-device-not-valid" type="text/template">
<div class="device-not-valid">
<p>It appears this audio configuration is not valid. Specifically:</p>
{% if (data.specific_errors.length &gt; 0) { %}
<ul>
{% window._.each(data.specific_errors, function(msg) { %}
<li>
{{msg}}
</li>
{% }) %}
</ul>
{% } %}
<p>To try and remedy this yourself, there are multiple things you can try:</p>
{% if (data.specific_errors.length &gt; 0) { %}
<ul>
{% window._.each(data.specific_resolutions, function(msg) { %}
<li>
{{msg}}
</li>
{% }) %}
</ul>
{% } %}
</div>
</script>
<div class="dialog loopback-wizard" id="loopback-wizard-dialog" layout="dialog" layout-id="loopback-wizard">
<div class="content-head">
<h1>loopback latency test</h1>
</div>
<div class="ftue-inner" layout-wizard="loopback-wizard">
<div class="wizard-step" dialog-purpose="Intro" dialog-title="Welcome" layout-wizard-step="0">
<div class="help-text">
Please identify which of the three types of audio gear below you
are going to use with the JamKazam service, and click one to
watch a video on how to navigate this initial setup and testing
process. After watching the video, click the 'NEXT' button to
get started. If you don't have your audio gear handy now, click
Cancel.
<ul class="device_type">
<li class="ftue-video-link first" external-link-mac="https://www.youtube.com/watch?v=TRzb7OTlO-Q" external-link-win="https://www.youtube.com/watch?v=b1JrwGeUcOo">
AUDIO DEVICE WITH PORTS FOR INSTRUMENT OR MIC INPUT JACKS
<br>
<p>
<img width="243" height="70" src="/assets/content/audio_capture_ftue-2734b8c8fb666a390aafb7514b5e885132eb64a58d1b71087b23b3a3ba46f93b.png">
</p>
</li><li class="ftue-video-link" external-link-mac="https://www.youtube.com/watch?v=vIs7ArrjMpE" external-link-win="https://www.youtube.com/watch?v=IDrLa8TOXwQ">
USB MICROPHONE
<br>
<p>
<img width="70" height="113" src="/assets/content/microphone_ftue-a4b0376feddee286a6c3c2a79f7b57fe0aeb6abee8c0fd7c0a45347452e4188c.png">
</p>
</li>
<li class="ftue-video-link" external-link-mac="https://www.youtube.com/watch?v=Gatmd_ja47U" external-link-win="https://www.youtube.com/watch?v=PCri4Xed4CA">
COMPUTER'S BUILT-IN MIC &amp; SPEAKERS/HEADPHONES
<br>
<p>
<img width="118" height="105" src="/assets/content/computer_ftue-78718e84ca4c57d122f2c7d00f41e4401bb20a2cb28f0e534cc7b3b2e99f154a.png">
</p>
</li>
</ul>
</div>
</div>
<div class="wizard-step" dialog-purpose="VerifyAudio" dialog-title="Verify Audio" layout-wizard-step="1">
<div class="help-text">
Your currently configured audio gear is shown below. Before proceeding to the next step of the loopback test, play and speak and use the gain sliders
so that you can clearly hear both your instrument and/or voice through your headphones. When done click Next.
</div>
<div class="wizard-step-content">
<div class="wizard-step-column">
<h2>
Audio Input
<a class="button-orange asio-settings-input-btn">ASIO SETTINGS</a>
</h2>
<div class="audio-device input">Unknown</div>
<h2 class="ports-header">Audio Input Ports</h2>
<div class="ftue-box input-ports ports"></div>
<div class="ftue-controls">
<div class="ftue-vu-left audio-input-vu-left"></div>
<div class="ftue-fader audio-input-fader"></div>
<div class="gain-label">GAIN</div>
<div class="ftue-vu-right audio-input-vu-right"></div>
</div>
<div class="frame-and-buffers"><div class="framesize"><h2>Frame Size:</h2><select class="select-frame-size"><option val="1">1</option><option val="2">2</option><option val="2.5">2.5</option><option val="5"> 5</option><option val="10"> 10</option></select></div><div class="buffers"><h2>Buffer In/Out<a class="adjust-gear-settings" href="#">?</a></h2><select class="select-buffer-in"><option val="0"> 0</option><option val="1"> 1</option><option val="2"> 2</option><option val="3"> 3</option><option val="4"> 4</option><option val="5"> 5</option><option val="6"> 6</option><option val="7"> 7</option><option val="8"> 8</option><option val="9"> 9</option><option val="10">10</option></select><select class="select-buffer-out"><option val="0"> 0</option><option val="1"> 1</option><option val="2"> 2</option><option val="3"> 3</option><option val="4"> 4</option><option val="5"> 5</option><option val="6"> 6</option><option val="7"> 7</option><option val="8"> 8</option><option val="9"> 9</option><option val="10">10</option></select></div></div>
</div>
<div class="wizard-step-column">
<h2>
Audio Output
<a class="button-orange asio-settings-output-btn">ASIO SETTINGS</a>
</h2>
<div class="audio-device output">Unknown</div>
<h2 class="ports-header">Audio Output Ports</h2>
<div class="ftue-box output-ports ports"></div>
<div class="ftue-controls">
<div class="ftue-vu-left audio-output-vu-left"></div>
<div class="ftue-fader audio-output-fader"></div>
<div class="gain-label">GAIN</div>
<div class="ftue-vu-right audio-output-vu-right"></div>
</div>
<a class="button-orange resync-btn">RESYNC</a>
</div>
<div class="wizard-step-column">
<h2 class="test-results-header">
Test &amp; Results
</h2>
<a class="button-orange run-test-btn">RUN TEST</a>
<div class="ftue-box results" data-type="loopback">
<div class="left w50 center white scoring-section latency-score-section">
<div class="p5">
<div class="latency">LATENCY</div>
<span class="latency-score"></span>
<div class="spinner-small"></div>
</div>
</div>
<div class="left w50 center white scoring-section io-score-section">
<div class="p5">
<div class="io">I/O</div>
<span class="io-skip-msg">
Not Tested
</span>
<span class="io-countdown">
<span class="secs"></span>
seconds left
<span class="spinner-small"></span>
</span>
<span class="io-rate">Rate=<span class="io-rate-score"></span></span>
<span class="io-var">Var=<span class="io-var-score"></span></span>
</div>
</div>
<div class="clearall">
<ul class="results-text">
<li class="latency-good">Your latency is good.</li>
<li class="latency-acceptable">Your latency is fair.</li>
<li class="latency-bad">Your latency is poor.</li>
<li class="io-rate-good">Your I/O rate is good.</li>
<li class="io-rate-acceptable">Your I/O rate is fair.</li>
<li class="io-rate-bad">Your I/O rate is poor.</li>
<li class="io-var-good">Your I/O variance is good.</li>
<li class="io-var-acceptable">Your I/O variance is fair.</li>
<li class="io-var-bad">Your I/O variance is poor.</li>
<li class="success">You may proceed to the next step.</li>
<li class="failure">
<span class="conditional" data-type="automated">
We're sorry, but your audio gear has failed.
<span class="io-failure">
<a class="adjust-gear-for-io-fail" href="#">Tweak your settings,</a>
watch the video, or click HELP button below.
</span>
<span class="no-io-failure">
Please watch video or click HELP button below.
</span>
</span>
<span class="conditional" data-type="loopback">We're sorry, but your audio gear has failed. Please watch videos on the previous screen.</span>
<span class="conditional" data-type="adjust-gear-speed">We're sorry, but your audio gear has failed. Adjust your settings and try again.</span>
</li>
</ul>
<div class="unknown-text">
<div>We cannot accurately predict the latency of your audio gear. To proceed, you must run an audio loopback test. Click button below to do this.</div>
<div class="loopback-button-holder">
<a class="button-orange loopback-test" href="#">RUN LOOPBACK TEST</a>
</div>
</div>
<div class="loopback-completed">
You have completed the loopback test successfully. Click Next to continue.
</div>
<div class="adjust-gear-speed-completed">
You have adjusted your gear speed settings successfully. Click Next to continue.
</div>
</div>
</div>
</div>
<div class="clearall"></div>
</div>
</div>
<div class="wizard-step" dialog-purpose="Congratulations" dialog-title="Congratulations" layout-wizard-step="2">
<div class="help-text">
Congratulations!
<br>
<br>
You have successfully scored your audio gear using the loopback test. Close the dialog to proceed.
</div>
</div>
<div class="wizard-buttons"></div>
</div>
</div>
<!-- Terms Dialog -->
<div class="dialog" layout="dialog" layout-id="terms" id="session-terms-conditions">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png">
<h1>Terms and Conditions</h1>
</div>
<div class="dialog-inner">
<span>
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">Creative Commons CC BY-NC-SA license</a> in accordance with the <a rel="external" href="http://www.jamkazam.com/corp/terms" target="_blank">JamKazam Terms of Service</a>.
</span>
<br clear="left"><br>
<div class="right">
<a id="btn-accept-terms" layout-action="close" class="button-orange">ACCEPT</a>
</div>
<div class="right">
<a id="btn-cancel-terms" layout-action="close" class="button-grey">CANCEL</a>
</div>
<br clear="all">
</div>
</div>
<div class="dialog" layout="dialog" layout-id="rate-session-dialog" id="rate-session-dialog">
<!-- dialog header -->
<div class="content-head">
<img height="19" width="19" class="content-icon" src="/assets/shared/icon_session-09f5811cb411fd11c2d89a78b852185141054ac7f15e294b434590c3695bb7ce.png">
<h1>please rate your session</h1>
</div>
<div class="dialog-inner">
<div class="center">
<a id="btn-rate-session-up" class="rate-thumbsup" href="#"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="btn-rate-session-down" href="#" class="rate-thumbsdown"></a>
<br clear="left"><br>
<textarea id="txt-rate-session-comment" class="w80" rows="3" placeholder="Tell us more about what you liked or didn't like..."></textarea>
<br><br>
<a id="btn-rate-session-send" href="#" class="button-orange">SEND FEEDBACK</a>&nbsp;&nbsp;&nbsp;<a id="btn-rate-session-cancel" href="#" class="button-grey">NOT NOW, THANKS</a>
</div>
</div>
<!-- end inner -->
</div>
<!-- Alert Dialog -->
<div class="dialog" layout="dialog" layout-id="alert" style="max-width:550px;">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png">
<h1>Alert</h1>
</div>
<div class="dialog-inner">
<span id="alert-message"></span>
<br clear="left"><br>
<div class="left">
<a id="btn-alert-cancel" class="button-grey">CANCEL</a>
</div>
<div class="right">
<a id="btn-alert-ok" class="button-orange"></a>
</div>
<br clear="all">
</div>
</div>
<!-- Confirm Dialog -->
<div class="dialog" layout="dialog" layout-id="confirm" style="max-width:350px;">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png">
<h1 id="confirm-title">Alert</h1>
</div>
<div class="dialog-inner">
<span id="confirm-message"></span>
<br clear="left"><br>
<div class="left">
<a id="btn-confirm-cancel" class="button-grey">CANCEL</a>
</div>
<div class="right">
<a id="btn-confirm-ok" class="button-orange"></a>
</div>
<br clear="all">
</div>
</div>
<div id="sidebar-div" layout="sidebar" class="sidebar" style="display:none;">
<div layout-sidebar-expander="visible" class="expander visible">
<p>
<img src="/assets/sidebar/expand_arrows_right-9325de417cc3a251cb1349ddf75d5e2fc8ea824ea707f87b28274a5eb5589940.jpg">
</p>
</div>
<div layout-sidebar-expander="hidden" class="expander hidden">
<p>
<img src="/assets/sidebar/expand_arrows_left-2fbdd56c528cde59210fdcc26cd0789d14c889302db23fda4a111d2e884a1162.jpg">
</p>
</div>
<!-- Search Box -->
<div class="search" layout="panel" layout-id="panelSearch">
<div layout-panel="collapsed">
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header always-open">
<h2>search</h2>
<div class="searchbox">
<form id="searchForm">
<input id="search-input" autocomplete="off" type="text" name="search" placeholder="enter search terms">
</form>
</div>
</div>
<!-- border between header and beginning of search results -->
<!--<div class="sidebar-search-result"></div>-->
<div class="panelcontents" layout-panel="contents">
<div id="sidebar-search-header" style="margin: 4px 4px 8px 8px">
<div class="left">
<strong><a id="sidebar-search-expand" style="color:#fff; text-decoration:underline">«&nbsp;EXPAND</a></strong>
</div>
<!-- search filter dropdown -->
<div class="right">
Show:&nbsp;<select name="search_text_type" id="search_text_type"><option value="musicians">Musicians</option>
<option value="bands">Bands</option>
<option value="fans">Fans</option></select>
</div>
</div>
<div style="clear:both;"></div><br>
<div id="sidebar-search-results" class="results-wrapper"></div>
</div>
</div>
</div>
<!-- Friends -->
<div layout="panel" layout-id="panelFriends">
<div layout-panel="collapsed">
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>friends<div id="sidebar-friend-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul id="sidebar-friend-list">
<li class="invite-friend-row">
<div class="friend-name">
Invite More Friends<a id="friend-help-howto" href="#">Help</a>
</div>
<br clear="all">
<div class="invitation-button-holder">
<div class="left mr20 email-invitation-holder">
<div class="left">
<a class="btn-email-invitation">
<img align="absmiddle" src="/assets/content/icon_gmail-e38b3123e4c986b56707c11ad0e11e1ad14ed8ed9fc8bcc6c395ff21ca660244.png" width="24" height="24">
</a>
</div>
<div class="right mt5 ml5">E-mail</div>
</div>
<div class="left left gmail-invitation-holder">
<div class="left">
<a class="btn-gmail-invitation">
<img align="absmiddle" src="/assets/content/icon_google-de53b44c89f8779e3edf59c054014a809c56a07686712bcd6af3e4e1dcc157d7.png" width="24" height="24">
</a>
</div>
<div class="right mt5 ml5">Google+</div>
</div>
<!--<div class="left left facebook-invitation-holder">
<div class="left">
<a class="btn-facebook-invitation">
<img align="absmiddle" src="/assets/content/icon_facebook-8bfa4cfb93779f15b518fe382dd5c7cb3752cb3ac818d3cf8e777f0ab64150a0.png" width="24" height="24" />
</a>
</div>
<div class="right mt5 ml5">Facebook</div>
</div>-->
</div>
<br clear="all">
</li>
</ul>
</div>
</div>
</div>
<!-- Chat -->
<div layout="panel" layout-id="panelChat">
<div layout-panel="collapsed">
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>chat<div id="sidebar-chat-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="chatcontents">
<div data-react-class="ChatWindow" data-react-props="{}" data-react-cache-id="ChatWindow-0"></div>
<!--<div class="chat-status">
<span>Chat is available when in session.</span>
</div>
<div class="chat-list-scroller">
<div class="previous-chat-list wrapword">
</div>
</div>
<div class="chat-sender">
<form class="chat-message-form">
<textarea name="chat-message" id="new-chat-message" placeholder="enter message"></textarea>
</form>
<div class="right">
<a class="btn-next-pager" href="#">NEXT</a>
<a class="button-orange btn-send-chat-message" href="#">SEND</a>
</div>
</div>-->
</div>
</div>
</div>
<!-- Notifications -->
<div layout="panel" layout-id="panelNotifications">
<div layout-panel="collapsed">
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>notifications<div id="sidebar-notification-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="panelcontents notification-scroller">
<ul id="sidebar-notification-list">
</ul>
</div>
</div>
</div>
</div>
<!-- Search result template -->
<script type="text/template" id="template-musicians-sidebar-search-result">
<div user-id="{userId}" class="sidebar-search-result">
<a user-id="{userId}" hoveraction="musician" class="avatar-small">
<img src="{avatar_url}" />
</a>
<div class="result-name">
<a user-id="{userId}" hoveraction="musician" href="{profile_url}">{userName}</a><br />
<span class="result-location">{location}</span>
</div><br />
<a class="btn-connect-friend button-orange smallbutton right">CONNECT</a>
<br clear="all" />
</div>
</script>
<script type="text/template" id="template-bands-sidebar-search-result">
<div band-id="{bandId}" class="sidebar-search-result">
<a band-id="{bandId}" hoveraction="band" class="avatar-small">
<img src="{avatar_url}" />
</a>
<div class="result-name">
<a band-id="{bandId}" hoveraction="band" href="{profile_url}">{bandName}</a><br />
<span class="result-location">{location}</span>
</div>
<br clear="all" />
</div>
</script>
<script type="text/template" id="template-fans-sidebar-search-result">
<div user-id="{userId}" class="sidebar-search-result">
<a user-id="{userId}" hoveraction="fan" class="avatar-small">
<img src="{avatar_url}" />
</a>
<div class="result-name">
<a user-id="{userId}" hoveraction="fan" href="{profile_url}">{userName}</a><br />
<span class="result-location">{location}</span>
</div><br />
<br clear="all" />
</div>
</script>
<!-- Friend panel template -->
<script type="text/template" id="template-friend-panel">
<li class="{cssClass}">
<div class="avatar-small" user-id="{userId}" hoveraction="{hoverAction}"><img src="{avatar_url}" /></div>
<div class="friend-name" user-id="{userId}" hoveraction="{hoverAction}">
<span class="friend-name-label">{userName}</span><br/>
<span class="friend-status">
{status} {extra_info}
</span>
</div>
<div class="friend-icon">{info_image_url}</div>
<br clear="all" />
</li>
</script>
<!-- Friend request confirmation template -->
<script type="text/template" id="template-sidebar-invitation-sent">
<div user-id="{userId}" class="sidebar-search-connected">
<div style="margin-top:10px;">
<br />
<img src="/assets/content/icon_goodquality.png" width="16" height="16" />
<br />
<b>Invitation Sent!</b><br />
<a href="{profile_url}">View {first_name}&#39;s Profile</a>
</div>
</div>
</script>
<!-- Notification panel template -->
<script type="text/template" id="template-notification-panel">
<li class="notification-entry" session-id="{sessionId}" notification-id="{notificationId}">
<div class="avatar-small" user-id="{userId}" hoveraction="musician"><img src="{avatar_url}" /></div>
<div session-id="{sessionId}" hoveraction="hoveraction" class="note-text">
{text}<br/>
<em>{date}</em>
<div class="note-delete">
<a>
<img id="img-delete-notification" notification-id="{notificationId}" src="/assets/shared/icon_delete_sm.png" width="13" height="13" />
</a>
</div>
</div><br />
<div id="div-actions">
<a id="btn-notification-action" class="button-orange smallbutton right"></a>
</div>
<br/>
<br clear="all" />
</li>
</script>
<!-- Chat panel template -->
<script type="text/template" id="template-chat-message">
<div class="chat-message">
<span class="chat-message-sender">{{data.sender}}</span>
<span class="chat-message-text">{{data.msg}}</span>
<time class="chat-message-timestamp timeago" datetime="{{data.sent}}">{{data.sent}}</time>
</div>
</script>
<!-- Create Session Screen -->
<div layout="screen" layout-id="createSession" class="screen secondary create-session" id="create-session-layout">
<div class="content">
<div class="content-head">
<div class="content-icon">
<img src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png" width="19" height="19">
</div>
<h1>sessions</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
<div class="clearall"></div>
</div>
<div class="content-body">
<div class="content-body-scroller">
<form id="create-session-form">
<div class="content-wrapper">
<div class="session-header">
<div id="create-session-steps"></div>
</div>
<!-- left column -->
<div class="session-wrapper">
<div id="session-step-1" class="create-session-wizard" layout-wizard-step="0">
<div class="column column-left">
<h2 style="position:relative">start a session <div id="video-beta">Video System: <div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="" id="video-beta-options"><option value="new">BETA (Incompatible with Recording)</option><option value="old">Standard</option></select></span><span class="selected">BETA (Incompatible with Recording)</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">BETA (Incompatible with Recording)</li><li>Standard</li></ul></div></div></div></h2>
<div class="quick-options">
<div class="quick-option"><a class="button-orange quick-start-solo" href="#">QUICK START PRIVATE</a><p>Quick start a private session now. Good for solo practice. Or invite specific friends to join you.</p></div>
<div class="quick-option"><a class="button-orange quick-start-open" href="#">QUICK START PUBLIC</a><p>Quick start an open session that anyone can join. Good for meeting others, spontaneous jams.</p></div>
<div class="quick-option"><a class="button-orange quick-start-friends" href="#">QUICK START FRIENDS</a><p>Quick start a friends-only session. No invitations needed. Good for playing with same folks.</p></div>
<div class="quick-option"><a class="button-orange start-or-schedule" href="#">SCHEDULE FUTURE</a><p>Use a wizard with more settings/controls for session. Good for scheduling future sessions.</p><a class="schedule-learn-more" href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122469" rel="external">learn more</a></div>
</div>
<h2>featured sessions</h2>
<table class="jamtable featured-sessions">
<thead>
<tr><th>SESSION</th><th>MUSICIANS</th><th>DATE/TIME</th><th>ACTIONS</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="column column-right">
<h2>check out other sessions</h2>
<div class="find-sessions">
<a href="/client#/findSession" class="button-orange">FIND SESSIONS</a>
<p>
Use the Find Sessions feature to browse through current and future/scheduled sessions you can join to play with other musicians.
</p>
<a class="find-session-learn-more" href="https://jamkazam.freshdesk.com/support/solutions/articles/66000124831" rel="external">learn more</a>
</div>
<div class="view-the-feed">
<a href="/client#/feed" class="button-orange">VIEW THE FEED</a>
<p>
Use the Feed to check out current and past sessions and session recordings, and to listen to current sessions.
</p>
</div>
<h2 class="learn-more-sessions-header">learn more about sessions</h2>
<div class="learn-more-sessions">
<a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000108388" rel="external">Creating, finding, and joining sessions</a>
<a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000110434" rel="external">Connecting with others</a>
<a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000110433" rel="external">Playing with others in sessions</a>
<a href="https://jamkazam.freshdesk.com/support/solutions/66000073846" rel="external">Live broadcasting your sessions</a>
</div>
</div>
</div>
<div id="session-step-2" class="create-session-wizard" layout-wizard-step="1">
<div class="w60 left">
<h3>When do you want to schedule and play in this session?</h3>
<br>
<div class="icheckbuttons">
<ul id="create-session-type">
<li create-type="schedule-future">
<input type="radio" name="session-when" id="session-when-schedule-future" info-value="schedule-future">
<label for="session-when-schedule-future" class="radio-text">
I want to schedule a session for a specific future time
</label>
<div class="clearall"></div>
</li>
<li create-type="rsvp">
<input type="radio" name="session-when" id="session-when-rsvp" info-value="rsvp">
<label for="session-when-rsvp" class="radio-text">
I want to choose the time after others RSVP to my session
</label>
<div class="clearall"></div>
</li>
<li create-type="immediately">
<input type="radio" name="session-when" id="session-when-immediately" info-value="immediately">
<label for="session-when-immediately" class="radio-text">
I want to start a new session right now for others to join
</label>
<div class="clearall"></div>
</li>
</ul>
</div>
<div class="session-when-info info-box">
<div class="" info-id="start-scheduled">
If you have already scheduled a session, and you want to start the session now so that other
musicians who RSVP'd can join you in the session, then choose the session you want to start now
from the list of sessions you have scheduled on the right side of this screen and then
click the NEXT button.
</div>
<div class="hidden" info-id="schedule-future">
This is a good option to choose if you have other musician friends online on JamKazam who are
ready to play right now. To schedule a session for a specific time in the future, just choose
the date, start time, and end time for your session, and specify the time zone to avoid confusion.
The end time just sets expectations for the other musicians. Your session can go on as long as
you'd like, won't automatically end. You can also set up regular sessions that recur weekly.
</div>
<div class="hidden" info-id="rsvp">
This is good option to choose if you are not sure who might play in the session with you, and
you want to wait to schedule a specific time until you have RSVPs from musicians who play the
set of instruments you need for the session. When using this option, just click NEXT to move
forward to the next step.
</div>
<div class="hidden" info-id="immediately">
This is good option to choose if you have other musician friends online on JamKazam who are
ready to play right now. Otherwise, the chances that other musicians with the right instruments,
skill sets, interests, and shared repertoire of music will be online to jump into a session
with you are pretty slim. To use this option, just click the NEXT button to proceed.
</div>
<div class="hidden" info-id="quick-start">
This is good option to choose if you just want to jump into a quick test session alone to make
sure you audio gear is working properly, and to familiarize yourself with the session interface.
Choosing this option will set your session to private so that you won't be disturbed, and will
set other options to defaults. To use this option, just click the NEXT button to proceed.
</div>
</div>
</div>
<div class="w35 right">
<div id="start-scheduled-wrapper">
<div>
<h3 class="left">My Scheduled Sessions</h3>
<a class="right" id="edit_scheduled_sessions" target="_blank" href="#">(edit)</a>
<div class="clearall"></div>
</div>
<br>
<div class="icheckbuttons session-list">
<div id="scheduled-session-not-found">
You currently have no scheduled sessions.
</div>
<div class="spinner-small upload-spinner" id="fetching-spinner">
</div>
<span id="fetching-spinner-label">Fetching your scheduled sessions...</span>
<ul id="scheduled-session-list">
</ul>
</div>
</div>
<div id="schedule-future-wrapper" class="hidden">
<h3>When will the session happen?</h3>
<br>
<div class="left ib w15 h40">Date:</div>
<div class="right ib w85 h40">
<input type="text" id="session-start-date">
</div>
<div class="clearall left ib w15 h40">Start:</div>
<div class="left ib w35 h40 start-time-list-holder">
<select id="start-time-list">
</select>
</div>
<div class="left ib w15 h40 end-label">End:</div>
<div class="left ib w35 h40 end-time-list-holder">
<select id="end-time-list">
</select>
</div>
<div class="clearall left ib w35 h40">Time Zone:</div>
<div class="right ib w65 h40 timezone-list-holder">
<select name="timezone-list" id="timezone-list" class="w100"><option value="International Date Line West,Etc/GMT+12" class="label" data-tz="Etc/GMT+12" data-utc-offset="-43200">(GMT-12:00) Etc/GMT+12</option><option value="Midway Island,Pacific/Midway" class="label" data-tz="Pacific/Midway" data-utc-offset="-39600">(GMT-11:00) Pacific/Midway</option><option value="American Samoa,Pacific/Pago_Pago" class="label" data-tz="Pacific/Pago_Pago" data-utc-offset="-39600">(GMT-11:00) Pacific/Pago_Pago</option><option value="Hawaii,Pacific/Honolulu" class="label" data-tz="Pacific/Honolulu" data-utc-offset="-36000">(GMT-10:00) Pacific/Honolulu</option><option value="Alaska,America/Juneau" class="label" data-tz="America/Juneau" data-utc-offset="-32400">(GMT-09:00) America/Juneau</option><option value="Pacific Time (US &amp; Canada),America/Los_Angeles" class="label" data-tz="America/Los_Angeles" data-utc-offset="-28800">(GMT-08:00) America/Los_Angeles</option><option value="Tijuana,America/Tijuana" class="label" data-tz="America/Tijuana" data-utc-offset="-28800">(GMT-08:00) America/Tijuana</option><option value="Mountain Time (US &amp; Canada),America/Denver" class="label" data-tz="America/Denver" data-utc-offset="-25200">(GMT-07:00) America/Denver</option><option value="Arizona,America/Phoenix" class="label" data-tz="America/Phoenix" data-utc-offset="-25200">(GMT-07:00) America/Phoenix</option><option value="Chihuahua,America/Chihuahua" class="label" data-tz="America/Chihuahua" data-utc-offset="-21600">(GMT-06:00) America/Chihuahua</option><option value="Mazatlan,America/Mazatlan" class="label" data-tz="America/Mazatlan" data-utc-offset="-25200">(GMT-07:00) America/Mazatlan</option><option value="Central Time (US &amp; Canada),America/Chicago" class="label" data-tz="America/Chicago" data-utc-offset="-21600">(GMT-06:00) America/Chicago</option><option value="Saskatchewan,America/Regina" class="label" data-tz="America/Regina" data-utc-offset="-21600">(GMT-06:00) America/Regina</option><option value="Guadalajara,America/Mexico_City" class="label" data-tz="America/Mexico_City" data-utc-offset="-21600">(GMT-06:00) America/Mexico_City</option><option value="Mexico City,America/Mexico_City" class="label" data-tz="America/Mexico_City" data-utc-offset="-21600">(GMT-06:00) America/Mexico_City</option><option value="Monterrey,America/Monterrey" class="label" data-tz="America/Monterrey" data-utc-offset="-21600">(GMT-06:00) America/Monterrey</option><option value="Central America,America/Guatemala" class="label" data-tz="America/Guatemala" data-utc-offset="-21600">(GMT-06:00) America/Guatemala</option><option value="Eastern Time (US &amp; Canada),America/New_York" class="label" data-tz="America/New_York" data-utc-offset="-18000">(GMT-05:00) America/New_York</option><option value="Indiana (East),America/Indiana/Indianapolis" class="label" data-tz="America/Indiana/Indianapolis" data-utc-offset="-18000">(GMT-05:00) America/Indiana/Indianapolis</option><option value="Bogota,America/Bogota" class="label" data-tz="America/Bogota" data-utc-offset="-18000">(GMT-05:00) America/Bogota</option><option value="Lima,America/Lima" class="label" data-tz="America/Lima" data-utc-offset="-18000">(GMT-05:00) America/Lima</option><option value="Quito,America/Lima" class="label" data-tz="America/Lima" data-utc-offset="-18000">(GMT-05:00) America/Lima</option><option value="Atlantic Time (Canada),America/Halifax" class="label" data-tz="America/Halifax" data-utc-offset="-14400">(GMT-04:00) America/Halifax</option><option value="Caracas,America/Caracas" class="label" data-tz="America/Caracas" data-utc-offset="-14400">(GMT-04:00) America/Caracas</option><option value="La Paz,America/La_Paz" class="label" data-tz="America/La_Paz" data-utc-offset="-14400">(GMT-04:00) America/La_Paz</option><option value="Santiago,America/Santiago" class="label" data-tz="America/Santiago" data-utc-offset="-14400">(GMT-04:00) America/Santiago</option><option value="Newfoundland,America/St_Johns" class="label" data-tz="America/St_Johns" data-utc-offset="-12600">(GMT-03:30) America/St_Johns</option><option value="Brasilia,America/Sao_Paulo" class="label" data-tz="America/Sao_Paulo" data-utc-offset="-10800">(GMT-03:00) America/Sao_Paulo</option><option value="Buenos Aires,America/Argentina/Buenos_Aires" class="label" data-tz="America/Argentina/Buenos_Aires" data-utc-offset="-10800">(GMT-03:00) America/Argentina/Buenos_Aires</option><option value="Montevideo,America/Montevideo" class="label" data-tz="America/Montevideo" data-utc-offset="-10800">(GMT-03:00) America/Montevideo</option><option value="Georgetown,America/Guyana" class="label" data-tz="America/Guyana" data-utc-offset="-14400">(GMT-04:00) America/Guyana</option><option value="Puerto Rico,America/Puerto_Rico" class="label" data-tz="America/Puerto_Rico" data-utc-offset="-14400">(GMT-04:00) America/Puerto_Rico</option><option value="Mid-Atlantic,Atlantic/South_Georgia" class="label" data-tz="Atlantic/South_Georgia" data-utc-offset="-7200">(GMT-02:00) Atlantic/South_Georgia</option><option value="Azores,Atlantic/Azores" class="label" data-tz="Atlantic/Azores" data-utc-offset="-3600">(GMT-01:00) Atlantic/Azores</option><option value="Cape Verde Is.,Atlantic/Cape_Verde" class="label" data-tz="Atlantic/Cape_Verde" data-utc-offset="-3600">(GMT-01:00) Atlantic/Cape_Verde</option><option value="Dublin,Europe/Dublin" class="label" data-tz="Europe/Dublin" data-utc-offset="0">(GMT+00:00) Europe/Dublin</option><option value="Edinburgh,Europe/London" class="label" data-tz="Europe/London" data-utc-offset="0">(GMT+00:00) Europe/London</option><option value="Lisbon,Europe/Lisbon" class="label" data-tz="Europe/Lisbon" data-utc-offset="0">(GMT+00:00) Europe/Lisbon</option><option value="London,Europe/London" class="label" data-tz="Europe/London" data-utc-offset="0">(GMT+00:00) Europe/London</option><option value="Casablanca,Africa/Casablanca" class="label" data-tz="Africa/Casablanca" data-utc-offset="0">(GMT+00:00) Africa/Casablanca</option><option value="Monrovia,Africa/Monrovia" class="label" data-tz="Africa/Monrovia" data-utc-offset="0">(GMT+00:00) Africa/Monrovia</option><option value="UTC,Etc/UTC" class="label" data-tz="Etc/UTC" data-utc-offset="0">(GMT+00:00) Etc/UTC</option><option value="Belgrade,Europe/Belgrade" class="label" data-tz="Europe/Belgrade" data-utc-offset="3600">(GMT+01:00) Europe/Belgrade</option><option value="Bratislava,Europe/Bratislava" class="label" data-tz="Europe/Bratislava" data-utc-offset="3600">(GMT+01:00) Europe/Bratislava</option><option value="Budapest,Europe/Budapest" class="label" data-tz="Europe/Budapest" data-utc-offset="3600">(GMT+01:00) Europe/Budapest</option><option value="Ljubljana,Europe/Ljubljana" class="label" data-tz="Europe/Ljubljana" data-utc-offset="3600">(GMT+01:00) Europe/Ljubljana</option><option value="Prague,Europe/Prague" class="label" data-tz="Europe/Prague" data-utc-offset="3600">(GMT+01:00) Europe/Prague</option><option value="Sarajevo,Europe/Sarajevo" class="label" data-tz="Europe/Sarajevo" data-utc-offset="3600">(GMT+01:00) Europe/Sarajevo</option><option value="Skopje,Europe/Skopje" class="label" data-tz="Europe/Skopje" data-utc-offset="3600">(GMT+01:00) Europe/Skopje</option><option value="Warsaw,Europe/Warsaw" class="label" data-tz="Europe/Warsaw" data-utc-offset="3600">(GMT+01:00) Europe/Warsaw</option><option value="Zagreb,Europe/Zagreb" class="label" data-tz="Europe/Zagreb" data-utc-offset="3600">(GMT+01:00) Europe/Zagreb</option><option value="Brussels,Europe/Brussels" class="label" data-tz="Europe/Brussels" data-utc-offset="3600">(GMT+01:00) Europe/Brussels</option><option value="Copenhagen,Europe/Copenhagen" class="label" data-tz="Europe/Copenhagen" data-utc-offset="3600">(GMT+01:00) Europe/Copenhagen</option><option value="Madrid,Europe/Madrid" class="label" data-tz="Europe/Madrid" data-utc-offset="3600">(GMT+01:00) Europe/Madrid</option><option value="Paris,Europe/Paris" class="label" data-tz="Europe/Paris" data-utc-offset="3600">(GMT+01:00) Europe/Paris</option><option value="Amsterdam,Europe/Amsterdam" class="label" data-tz="Europe/Amsterdam" data-utc-offset="3600">(GMT+01:00) Europe/Amsterdam</option><option value="Berlin,Europe/Berlin" class="label" data-tz="Europe/Berlin" data-utc-offset="3600">(GMT+01:00) Europe/Berlin</option><option value="Bern,Europe/Zurich" class="label" data-tz="Europe/Zurich" data-utc-offset="3600">(GMT+01:00) Europe/Zurich</option><option value="Zurich,Europe/Zurich" class="label" data-tz="Europe/Zurich" data-utc-offset="3600">(GMT+01:00) Europe/Zurich</option><option value="Rome,Europe/Rome" class="label" data-tz="Europe/Rome" data-utc-offset="3600">(GMT+01:00) Europe/Rome</option><option value="Stockholm,Europe/Stockholm" class="label" data-tz="Europe/Stockholm" data-utc-offset="3600">(GMT+01:00) Europe/Stockholm</option><option value="Vienna,Europe/Vienna" class="label" data-tz="Europe/Vienna" data-utc-offset="3600">(GMT+01:00) Europe/Vienna</option><option value="West Central Africa,Africa/Algiers" class="label" data-tz="Africa/Algiers" data-utc-offset="3600">(GMT+01:00) Africa/Algiers</option><option value="Bucharest,Europe/Bucharest" class="label" data-tz="Europe/Bucharest" data-utc-offset="7200">(GMT+02:00) Europe/Bucharest</option><option value="Cairo,Africa/Cairo" class="label" data-tz="Africa/Cairo" data-utc-offset="7200">(GMT+02:00) Africa/Cairo</option><option value="Helsinki,Europe/Helsinki" class="label" data-tz="Europe/Helsinki" data-utc-offset="7200">(GMT+02:00) Europe/Helsinki</option><option value="Riga,Europe/Riga" class="label" data-tz="Europe/Riga" data-utc-offset="7200">(GMT+02:00) Europe/Riga</option><option value="Sofia,Europe/Sofia" class="label" data-tz="Europe/Sofia" data-utc-offset="7200">(GMT+02:00) Europe/Sofia</option><option value="Tallinn,Europe/Tallinn" class="label" data-tz="Europe/Tallinn" data-utc-offset="7200">(GMT+02:00) Europe/Tallinn</option><option value="Vilnius,Europe/Vilnius" class="label" data-tz="Europe/Vilnius" data-utc-offset="7200">(GMT+02:00) Europe/Vilnius</option><option value="Athens,Europe/Athens" class="label" data-tz="Europe/Athens" data-utc-offset="7200">(GMT+02:00) Europe/Athens</option><option value="Istanbul,Europe/Istanbul" class="label" data-tz="Europe/Istanbul" data-utc-offset="10800">(GMT+03:00) Europe/Istanbul</option><option value="Minsk,Europe/Minsk" class="label" data-tz="Europe/Minsk" data-utc-offset="10800">(GMT+03:00) Europe/Minsk</option><option value="Jerusalem,Asia/Jerusalem" class="label" data-tz="Asia/Jerusalem" data-utc-offset="7200">(GMT+02:00) Asia/Jerusalem</option><option value="Harare,Africa/Harare" class="label" data-tz="Africa/Harare" data-utc-offset="7200">(GMT+02:00) Africa/Harare</option><option value="Pretoria,Africa/Johannesburg" class="label" data-tz="Africa/Johannesburg" data-utc-offset="7200">(GMT+02:00) Africa/Johannesburg</option><option value="Kaliningrad,Europe/Kaliningrad" class="label" data-tz="Europe/Kaliningrad" data-utc-offset="7200">(GMT+02:00) Europe/Kaliningrad</option><option value="Moscow,Europe/Moscow" class="label" data-tz="Europe/Moscow" data-utc-offset="10800">(GMT+03:00) Europe/Moscow</option><option value="St. Petersburg,Europe/Moscow" class="label" data-tz="Europe/Moscow" data-utc-offset="10800">(GMT+03:00) Europe/Moscow</option><option value="Volgograd,Europe/Volgograd" class="label" data-tz="Europe/Volgograd" data-utc-offset="10800">(GMT+03:00) Europe/Volgograd</option><option value="Samara,Europe/Samara" class="label" data-tz="Europe/Samara" data-utc-offset="14400">(GMT+04:00) Europe/Samara</option><option value="Kuwait,Asia/Kuwait" class="label" data-tz="Asia/Kuwait" data-utc-offset="10800">(GMT+03:00) Asia/Kuwait</option><option value="Riyadh,Asia/Riyadh" class="label" data-tz="Asia/Riyadh" data-utc-offset="10800">(GMT+03:00) Asia/Riyadh</option><option value="Nairobi,Africa/Nairobi" class="label" data-tz="Africa/Nairobi" data-utc-offset="10800">(GMT+03:00) Africa/Nairobi</option><option value="Baghdad,Asia/Baghdad" class="label" data-tz="Asia/Baghdad" data-utc-offset="10800">(GMT+03:00) Asia/Baghdad</option><option value="Tehran,Asia/Tehran" class="label" data-tz="Asia/Tehran" data-utc-offset="12600">(GMT+03:30) Asia/Tehran</option><option value="Abu Dhabi,Asia/Muscat" class="label" data-tz="Asia/Muscat" data-utc-offset="14400">(GMT+04:00) Asia/Muscat</option><option value="Muscat,Asia/Muscat" class="label" data-tz="Asia/Muscat" data-utc-offset="14400">(GMT+04:00) Asia/Muscat</option><option value="Baku,Asia/Baku" class="label" data-tz="Asia/Baku" data-utc-offset="14400">(GMT+04:00) Asia/Baku</option><option value="Tbilisi,Asia/Tbilisi" class="label" data-tz="Asia/Tbilisi" data-utc-offset="14400">(GMT+04:00) Asia/Tbilisi</option><option value="Yerevan,Asia/Yerevan" class="label" data-tz="Asia/Yerevan" data-utc-offset="14400">(GMT+04:00) Asia/Yerevan</option><option value="Kabul,Asia/Kabul" class="label" data-tz="Asia/Kabul" data-utc-offset="16200">(GMT+04:30) Asia/Kabul</option><option value="Ekaterinburg,Asia/Yekaterinburg" class="label" data-tz="Asia/Yekaterinburg" data-utc-offset="18000">(GMT+05:00) Asia/Yekaterinburg</option><option value="Islamabad,Asia/Karachi" class="label" data-tz="Asia/Karachi" data-utc-offset="18000">(GMT+05:00) Asia/Karachi</option><option value="Karachi,Asia/Karachi" class="label" data-tz="Asia/Karachi" data-utc-offset="18000">(GMT+05:00) Asia/Karachi</option><option value="Tashkent,Asia/Tashkent" class="label" data-tz="Asia/Tashkent" data-utc-offset="18000">(GMT+05:00) Asia/Tashkent</option><option value="Chennai,Asia/Kolkata" class="label" data-tz="Asia/Kolkata" data-utc-offset="19800">(GMT+05:30) Asia/Kolkata</option><option value="Kolkata,Asia/Kolkata" class="label" data-tz="Asia/Kolkata" data-utc-offset="19800">(GMT+05:30) Asia/Kolkata</option><option value="Mumbai,Asia/Kolkata" class="label" data-tz="Asia/Kolkata" data-utc-offset="19800">(GMT+05:30) Asia/Kolkata</option><option value="New Delhi,Asia/Kolkata" class="label" data-tz="Asia/Kolkata" data-utc-offset="19800">(GMT+05:30) Asia/Kolkata</option><option value="Kathmandu,Asia/Kathmandu" class="label" data-tz="Asia/Kathmandu" data-utc-offset="20700">(GMT+05:45) Asia/Kathmandu</option><option value="Dhaka,Asia/Dhaka" class="label" data-tz="Asia/Dhaka" data-utc-offset="21600">(GMT+06:00) Asia/Dhaka</option><option value="Sri Jayawardenepura,Asia/Colombo" class="label" data-tz="Asia/Colombo" data-utc-offset="19800">(GMT+05:30) Asia/Colombo</option><option value="Almaty,Asia/Almaty" class="label" data-tz="Asia/Almaty" data-utc-offset="18000">(GMT+05:00) Asia/Almaty</option><option value="Astana,Asia/Almaty" class="label" data-tz="Asia/Almaty" data-utc-offset="18000">(GMT+05:00) Asia/Almaty</option><option value="Novosibirsk,Asia/Novosibirsk" class="label" data-tz="Asia/Novosibirsk" data-utc-offset="25200">(GMT+07:00) Asia/Novosibirsk</option><option value="Bangkok,Asia/Bangkok" class="label" data-tz="Asia/Bangkok" data-utc-offset="25200">(GMT+07:00) Asia/Bangkok</option><option value="Hanoi,Asia/Bangkok" class="label" data-tz="Asia/Bangkok" data-utc-offset="25200">(GMT+07:00) Asia/Bangkok</option><option value="Jakarta,Asia/Jakarta" class="label" data-tz="Asia/Jakarta" data-utc-offset="25200">(GMT+07:00) Asia/Jakarta</option><option value="Krasnoyarsk,Asia/Krasnoyarsk" class="label" data-tz="Asia/Krasnoyarsk" data-utc-offset="25200">(GMT+07:00) Asia/Krasnoyarsk</option><option value="Beijing,Asia/Shanghai" class="label" data-tz="Asia/Shanghai" data-utc-offset="28800">(GMT+08:00) Asia/Shanghai</option><option value="Chongqing,Asia/Chongqing" class="label" data-tz="Asia/Chongqing" data-utc-offset="28800">(GMT+08:00) Asia/Chongqing</option><option value="Hong Kong,Asia/Hong_Kong" class="label" data-tz="Asia/Hong_Kong" data-utc-offset="28800">(GMT+08:00) Asia/Hong_Kong</option><option value="Urumqi,Asia/Urumqi" class="label" data-tz="Asia/Urumqi" data-utc-offset="21600">(GMT+06:00) Asia/Urumqi</option><option value="Kuala Lumpur,Asia/Kuala_Lumpur" class="label" data-tz="Asia/Kuala_Lumpur" data-utc-offset="28800">(GMT+08:00) Asia/Kuala_Lumpur</option><option value="Singapore,Asia/Singapore" class="label" data-tz="Asia/Singapore" data-utc-offset="28800">(GMT+08:00) Asia/Singapore</option><option value="Taipei,Asia/Taipei" class="label" data-tz="Asia/Taipei" data-utc-offset="28800">(GMT+08:00) Asia/Taipei</option><option value="Perth,Australia/Perth" class="label" data-tz="Australia/Perth" data-utc-offset="28800">(GMT+08:00) Australia/Perth</option><option value="Irkutsk,Asia/Irkutsk" class="label" data-tz="Asia/Irkutsk" data-utc-offset="28800">(GMT+08:00) Asia/Irkutsk</option><option value="Ulaanbaatar,Asia/Ulaanbaatar" class="label" data-tz="Asia/Ulaanbaatar" data-utc-offset="28800">(GMT+08:00) Asia/Ulaanbaatar</option><option value="Seoul,Asia/Seoul" class="label" data-tz="Asia/Seoul" data-utc-offset="32400">(GMT+09:00) Asia/Seoul</option><option value="Osaka,Asia/Tokyo" class="label" data-tz="Asia/Tokyo" data-utc-offset="32400">(GMT+09:00) Asia/Tokyo</option><option value="Sapporo,Asia/Tokyo" class="label" data-tz="Asia/Tokyo" data-utc-offset="32400">(GMT+09:00) Asia/Tokyo</option><option value="Tokyo,Asia/Tokyo" class="label" data-tz="Asia/Tokyo" data-utc-offset="32400">(GMT+09:00) Asia/Tokyo</option><option value="Yakutsk,Asia/Yakutsk" class="label" data-tz="Asia/Yakutsk" data-utc-offset="32400">(GMT+09:00) Asia/Yakutsk</option><option value="Darwin,Australia/Darwin" class="label" data-tz="Australia/Darwin" data-utc-offset="34200">(GMT+09:30) Australia/Darwin</option><option value="Adelaide,Australia/Adelaide" class="label" data-tz="Australia/Adelaide" data-utc-offset="34200">(GMT+09:30) Australia/Adelaide</option><option value="Canberra,Australia/Canberra" class="label" data-tz="Australia/Canberra" data-utc-offset="36000">(GMT+10:00) Australia/Canberra</option><option value="Melbourne,Australia/Melbourne" class="label" data-tz="Australia/Melbourne" data-utc-offset="36000">(GMT+10:00) Australia/Melbourne</option><option value="Sydney,Australia/Sydney" class="label" data-tz="Australia/Sydney" data-utc-offset="36000">(GMT+10:00) Australia/Sydney</option><option value="Brisbane,Australia/Brisbane" class="label" data-tz="Australia/Brisbane" data-utc-offset="36000">(GMT+10:00) Australia/Brisbane</option><option value="Hobart,Australia/Hobart" class="label" data-tz="Australia/Hobart" data-utc-offset="36000">(GMT+10:00) Australia/Hobart</option><option value="Vladivostok,Asia/Vladivostok" class="label" data-tz="Asia/Vladivostok" data-utc-offset="36000">(GMT+10:00) Asia/Vladivostok</option><option value="Guam,Pacific/Guam" class="label" data-tz="Pacific/Guam" data-utc-offset="36000">(GMT+10:00) Pacific/Guam</option><option value="Port Moresby,Pacific/Port_Moresby" class="label" data-tz="Pacific/Port_Moresby" data-utc-offset="36000">(GMT+10:00) Pacific/Port_Moresby</option><option value="Magadan,Asia/Magadan" class="label" data-tz="Asia/Magadan" data-utc-offset="39600">(GMT+11:00) Asia/Magadan</option><option value="Srednekolymsk,Asia/Srednekolymsk" class="label" data-tz="Asia/Srednekolymsk" data-utc-offset="39600">(GMT+11:00) Asia/Srednekolymsk</option><option value="Solomon Is.,Pacific/Guadalcanal" class="label" data-tz="Pacific/Guadalcanal" data-utc-offset="39600">(GMT+11:00) Pacific/Guadalcanal</option><option value="New Caledonia,Pacific/Noumea" class="label" data-tz="Pacific/Noumea" data-utc-offset="39600">(GMT+11:00) Pacific/Noumea</option><option value="Fiji,Pacific/Fiji" class="label" data-tz="Pacific/Fiji" data-utc-offset="43200">(GMT+12:00) Pacific/Fiji</option><option value="Kamchatka,Asia/Kamchatka" class="label" data-tz="Asia/Kamchatka" data-utc-offset="43200">(GMT+12:00) Asia/Kamchatka</option><option value="Marshall Is.,Pacific/Majuro" class="label" data-tz="Pacific/Majuro" data-utc-offset="43200">(GMT+12:00) Pacific/Majuro</option><option value="Auckland,Pacific/Auckland" class="label" data-tz="Pacific/Auckland" data-utc-offset="43200">(GMT+12:00) Pacific/Auckland</option><option value="Wellington,Pacific/Auckland" class="label" data-tz="Pacific/Auckland" data-utc-offset="43200">(GMT+12:00) Pacific/Auckland</option><option value="Nuku" alofa,pacific="" tongatapu'="" class="label" data-tz="Pacific/Tongatapu" data-utc-offset="46800">(GMT+13:00) Pacific/Tongatapu</option><option value="Tokelau Is.,Pacific/Fakaofo" class="label" data-tz="Pacific/Fakaofo" data-utc-offset="46800">(GMT+13:00) Pacific/Fakaofo</option><option value="Chatham Is.,Pacific/Chatham" class="label" data-tz="Pacific/Chatham" data-utc-offset="45900">(GMT+12:45) Pacific/Chatham</option><option value="Samoa,Pacific/Apia" class="label" data-tz="Pacific/Apia" data-utc-offset="46800">(GMT+13:00) Pacific/Apia</option></select>
</div>
<div class="clearall left ib w35 h40">Recurring:</div>
<div class="right ib w65 h40 recurring-mode-list-holder">
<select id="recurring-mode-list" class="w100">
<option value="once" class="label">Not Recurring</option>
<option value="weekly" class="label">Weekly</option>
</select>
</div>
</div>
</div>
<div class="clearall"></div>
</div>
<div id="session-step-3" class="create-session-wizard" layout-wizard-step="2">
<div class="w100">
<div id="divSessionGenre" class="left w40">
<h3 class="mb5">Please select a genre for your session:</h3>
<div id="create-session-genre">
<div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="genre-list" name="genres" id="EasyDropDownB0FCC7">
<option value="">Any Genre</option>
</select></span><span class="selected">Any Genre</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Any Genre</li></ul></div></div>
</div>
</div>
<div class="w50 right">
A genre will help other musicians more easily find your session if they are interested in a
particular style of music like classical, jazz, rock or bluegrass.
</div>
<div class="clearall"></div>
</div>
<div class="w100 mt15">
<div id="divSessionName" class="w40 left">
<h3 class="mb5">Please enter a name for your session:</h3>
<div>
<input id="session-name" type="text" name="session-name">
</div>
</div>
<div class="w50 right">
Give your session a name that will help other musicians see at a quick glance if it's interesting to them.
</div>
<div class="clearall"></div>
</div>
<div class="w100 mt15">
<div id="divSessionDescription" class="w40 left">
<h3 class="session-description-header">Please enter a description for your session:</h3>
<div>
<textarea rows="3" id="session-description" name="description" class="session-description"></textarea>
</div>
</div>
<div class="w50 right">
We strongly recommend listing the names of any specific pieces of music you plan to play in your session,
both so that other musicians can decide to join you, and also so that they can practice a bit to be prepared.
</div>
<div class="clearall"></div>
</div>
<div class="w100 mt20 upload-files-section">
<div class="w50 left">
<h3 class="hb3">Upload music notation for your session (optional):</h3>
<div>
<div class="spinner-small upload-spinner" id="file-upload-spinner"></div>
<div class="select-files-section">
<a id="session-notation-file-selection" class="button-orange btn-select-files" href="#">SELECT FILES...</a>
<input type="file" class="hidden" id="session-select-files" value="Select Files..." accept=".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt" multiple="">
</div>
<div class="selected-files-section">
<ul id="selected-filenames"></ul>
</div>
<div class="clearall"></div>
</div>
</div>
<div class="w50 left">
If you're playing a piece of music that you wrote, you may upload sheet music files that other
musicians can use to learn/play. Please do not upload sheet music that violates anyone else's copyright.
</div>
<div class="clearall"></div>
</div>
</div>
<div id="session-step-4" class="create-session-wizard" layout-wizard-step="3">
<div class="w45 left">
<div id="create-session-invite-musicians"></div>
<div class="plus-any-interested-section">
<div class="icheckbuttons plus-checkbox">
<input type="checkbox" name="plus-musicians" id="session-plus-musicians" checked="checked">
<label for="session-plus-musicians" class="radio-text">
Plus any interested JamKazam musicians that I approve
</label>
<div class="clearall"></div>
</div>
</div>
<br>
<div class="invite-info-text">
To invite specific friends, click the Choose Friends button and select them in the dialog box, or
just start typing your friends' names and select them from the popup menu. If you choose to let
other interested musicians join you, you will have the opportunity to approve them when they RSVP.
</div>
<h3 class="session-band-list-header">Is this a band session?</h3>
<select id="session-band-list">
<option value="">No</option>
</select>
<div class="clearall"></div>
<h3 class="session-language-list-header">What language will be spoken?</h3>
<select id="session-language-list">
<option value="eng">English</option>
<option value="afr">Afrikaans</option>
<option value="sqi">Albanian</option>
<option value="ara">Arabic</option>
<option value="hye">Armenian</option>
<option value="eus">Basque</option>
<option value="ben">Bengali</option>
<option value="bul">Bulgarian</option>
<option value="cat">Catalan</option>
<option value="khm">Central Khmer</option>
<option value="zho">Chinese</option>
<option value="hrv">Croatian</option>
<option value="ces">Czech</option>
<option value="dan">Danish</option>
<option value="nld">Dutch</option>
<option value="est">Estonian</option>
<option value="fij">Fijian</option>
<option value="fin">Finnish</option>
<option value="fra">French</option>
<option value="kat">Georgian</option>
<option value="deu">German</option>
<option value="guj">Gujarati</option>
<option value="heb">Hebrew</option>
<option value="hin">Hindi</option>
<option value="hun">Hungarian</option>
<option value="isl">Icelandic</option>
<option value="ind">Indonesian</option>
<option value="gle">Irish</option>
<option value="ita">Italian</option>
<option value="jpn">Japanese</option>
<option value="kor">Korean</option>
<option value="lat">Latin</option>
<option value="lav">Latvian</option>
<option value="lit">Lithuanian</option>
<option value="mkd">Macedonian</option>
<option value="msa">Malay</option>
<option value="mal">Malayalam</option>
<option value="mlt">Maltese</option>
<option value="mri">Maori</option>
<option value="mar">Marathi</option>
<option value="ell">Greek</option>
<option value="mon">Mongolian</option>
<option value="nep">Nepali</option>
<option value="nor">Norwegian</option>
<option value="pan">Panjabi</option>
<option value="fas">Persian</option>
<option value="pol">Polish</option>
<option value="por">Portuguese</option>
<option value="que">Quechua</option>
<option value="ron">Romanian</option>
<option value="rus">Russian</option>
<option value="smo">Samoan</option>
<option value="srp">Serbian</option>
<option value="slk">Slovak</option>
<option value="slv">Slovenian</option>
<option value="spa">Spanish</option>
<option value="swa">Swahili</option>
<option value="swe">Swedish</option>
<option value="tam">Tamil</option>
<option value="tat">Tatar</option>
<option value="tel">Telugu</option>
<option value="tha">Thai</option>
<option value="bod">Tibetan</option>
<option value="ton">Tonga (Tonga Islands)</option>
<option value="tur">Turkish</option>
<option value="ukr">Ukrainian</option>
<option value="urd">Urdu</option>
<option value="uzb">Uzbek</option>
<option value="vie">Vietnamese</option>
<option value="cym">Welsh</option>
<option value="xho">Xhosa</option>
</select>
<div class="clearall"></div>
</div>
<div class="w50 right">
<h3 class="mb5">What will you play?</h3>
<div class="session-instrumentlist f12" id="instrument-select-list">
</div>
<br>
<h3 class="mb5">What other instruments/parts will you need?</h3>
<div class="session-instrumentlist f12" id="instrument-select-rsvp-list"></div>
<div class="instruments-rsvp-help-text">
To let other musicians know which parts you'll need in the session, check the instrumental and
vocal parts that you need, the number of each, and the desired skill level of the musicians you're comfortable playing with.
</div>
</div>
<div class="clearall"></div>
</div>
<div id="session-step-5" class="create-session-wizard" layout-wizard-step="4">
<div class="left w55 f13">
<div class="icheckbuttons">
<ul id="session-policy">
<li>
<input type="radio" name="session-policy-type" id="session-policy-standard" policy-id="Standard" checked="checked">
<label for="session-policy-standard" class="radio-text">
Standard legal agreement<br>
</label>
<div class="clearall"></div>
</li>
<li>
<input type="radio" name="session-policy-type" id="session-policy-creative" policy-id="Creative Commons">
<label for="session-policy-creative" class="radio-text">
Creative Commons agreement<br>
</label>
<div class="clearall"></div>
</li>
<li>
<input type="radio" name="session-policy-type" id="session-policy-offline" policy-id="Offline">
<label for="session-policy-offline" class="radio-text">
Offline agreement
</label>
<div class="clearall"></div>
</li>
<!--<li>
<input type="radio" name="session-policy-type" id="session-policy-jamtracks" policy-id="Jamtracks">
<label for="session-policy-jamtracks" class="radio-text">
Session participants agree to JamTracks legal provisions
</label>
<div class="clearall"></div>
</li>-->
</ul>
</div>
<div id="session-policy-info" class="mb5">
<div class="info-box" policy-type="Standard">
This is a good option to choose when following normal legal conventions works - i.e. session participants agree
that whoever holds the copyright on the music being performed maintains all ownership rights and interests in
the music. Use the following link for full legal details of this choice:
<a href="http://127.0.0.1:41029/session-legal-policies/standard" target="_blank">http://127.0.0.1:41029/session-legal-policies/standard</a>.
</div>
<div class="info-box hidden" policy-type="Creative Commons">
This is a good option to choose when the session participants are creating new music that is not
already copyrighted, and when the musicians can agree that everyone will share ownership of any
music created in the session. Use the following link for full legal details of this choice:
<a href="http://127.0.0.1:41029/session-legal-policies/creativecommons" target="_blank">http://127.0.0.1:41029/session-legal-policies/creativecommons</a>
</div>
<div class="info-box hidden" policy-type="Offline">
This is a good option to choose when the session participants are already made an offline agreement
in the real world about who owns what, and when agreeing to the standard legal provisions doest not
adequately or accurately cover your legal bases. Use the following link for full legal details of this choice:
<a href="http://127.0.0.1:41029/session-legal-policies/offline" target="_blank">http://127.0.0.1:41029/session-legal-policies/offline</a>
</div>
<div class="info-box hidden" policy-type="Jamtracks">
This option must be selected when the musicians in a session will be playing one or more JamTracks.
Use the following link for full legal details of this choice:
<a href="http://127.0.0.1:41029/session-legal-policies/jamtracks" target="_blank">http://127.0.0.1:41029/session-legal-policies/jamtracks</a>
</div>
</div>
<br>
<div id="divSessionPolicy">
<div class="terms-checkbox icheckbuttons">
<input type="checkbox" id="session-policy-confirm">
</div>
<div id="divSessionPolicyHelper" class="terms ml25">
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">Creative Commons CC BY-NC-SA license</a> in accordance with the <a rel="external" href="http://www.jamkazam.com/corp/terms" target="_blank">JamKazam Terms of Service</a>.
</div>
</div>
</div>
<div class="right w40">
<h3 class="session-musician-access-header">How will you handle musician access?</h3>
<select id="session-musician-access">
<option value="only-rsvp">Only RSVP musicians may join</option>
<option value="musicians-approval">Musicians may join by approval</option>
<option value="musicians" selected="selected">Musicians may join at will</option>
</select>
<div id="session-musician-access-info" class="mt5">
<div class="hidden info-box" musician-access-type="only-rsvp">
This is a good option when you have gone to the trouble to pre-plan your session, and have secured
RSVPs from a set of musicians who are likely to join you, and you don't need any other musicians,
and don't want to be disturbed by others asking to join while you are playing in the session.
</div>
<div class="info-box" musician-access-type="musicians-approval">
This is a good option when you have invited some musicians who are likely to join you, but you still
want to let other musicians request to join your session while it's in progress. Musicians can't
just wander in, but they can ask to join while you are in session, and you can approve or not.
</div>
<div class="hidden info-box" musician-access-type="musicians">
This is a good option when you haven't invited anyone to join your session ahead of time, and you
just want to set up an open jam style session, where anyone can wander in and out as they like to
join you.
</div>
</div>
<br>
<h3 class="session-friends-can-join-header">How will you handle friend access?</h3>
<select id="session-friends-can-join">
<option value="true" selected="selected">Friends Can Always Join</option>
<option value="false">Friends Follow Musician Access Rules</option>
</select>
<div id="session-friends-can-join-info" class="mt5">
<div class="info-box" friends-can-join-type="true">
Friends can join your session without any invitation.
</div>
<div class="info-box hidden" friends-can-join-type="false">
Friends have to follow 'Musician Access' rules.
</div>
</div>
<br>
<h3 class="session-fans-access-header">How will you handle fan access?</h3>
<select id="session-fans-access">
<!--<option value="listen-chat-band">Fans may listen, chat with the band</option>-->
<option value="listen-chat-each" selected="selected">Fans may listen, chat with each other</option>
<option value="no-listen-chat">Fans may not listen to session</option>
</select>
<div id="session-fans-access-info" class="mt5">
<div class="info-box hidden" fans-access-type="listen-chat-band">
Fans can listen to you while you're playing in session, and can text chat with each other and the band while listening.
</div>
<div class="info-box" fans-access-type="listen-chat-each">
Fans can listen to you while you're playing in session, and can text chat with each other while listening.
</div>
<div class="info-box hidden" fans-access-type="no-listen-chat">
Fans cannot listen to you while you're playing in session, so your session is closed and private.
</div>
</div>
</div>
<div class="clearall"></div>
</div>
<div id="session-step-6" class="create-session-wizard" layout-wizard-step="5">
<div class="left w55">
<h3>When are you starting your session?</h3>
<div id="session-start-type-disp" class="mt5"></div>
<h3 class="mb5 mt20">What are you playing?</h3>
<em id="session-name-disp"></em>
<div id="session-description-disp" class="mt5"></div>
<div id="session-notations-disp" class="mt5"></div>
<h3 class="mt20">Which band is playing?</h3>
<div id="session-band-disp" class="mt5"></div>
<h3 class="mt20">What language will be spoken?</h3>
<div id="session-language-disp" class="mt5"></div>
</div>
<div class="right w40">
<h3>Who is invited?</h3>
<div id="session-invited-disp" class="mt5"></div>
<h3 class="mt20">What instruments/parts do you need?</h3>
<div class="left ib w20 mt5">Me:</div>
<div class="left ib w75 mt5" id="session-instruments-me-disp"></div>
<div class="clearall left ib w20">Others:</div>
<div class="left ib w75 mt5" id="session-instruments-rsvp-disp"></div><br clear="all">
<h3 class="mt20">What access policies are in effect?</h3>
<div id="session-musician-access-disp" class="mt5"></div>
<div id="session-fans-access-disp"></div>
<h3 class="mt20">What legal policy is in effect?</h3>
<div id="session-policy-disp" class="mt5"></div>
</div>
<div class="clearall"></div>
</div>
</div>
</div>
<div class="clearall"></div>
<div class="session-buttons">
<div id="create-session-buttons" class="right"></div>
<div class="clearall"></div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Current step display template -->
<script type="text/template" id="template-session-steps">
<div class="sessionsteps-inner">
<a href='#' class="session-stepnumber left" data-step-number="1">1</a>
<div class="session-step-title">When Is Your Session?</div>
<a href='#' class="session-stepnumber left" data-step-number="2">2</a>
<div class="session-step-title">What Are You Playing?</div>
<a href='#' class="session-stepnumber left" data-step-number="3">3</a>
<div class="session-step-title">Who Is Playing With You?</div>
<a href='#' class="session-stepnumber left" data-step-number="4">4</a>
<div class="session-step-title">What Are Your Policies?</div>
<a href='#' class="session-stepnumber left" data-step-number="5">5</a>
<div class="session-step-title">Review & Confirm</div>
<div class="clearall"></div>
</div>
</script>
<script type="text/template" id="template-session-buttons">
<div class="sessionbuttons-holder">
<div class="right-buttons">
<a class="button-grey btn-back" href="#">BACK</a>
<a class="button-orange btn-next" href="#">NEXT</a>
</div>
</div>
</script>
<!-- Scheduled session template -->
<script type="text/template" id="template-scheduled-session">
<li>
<input type="radio" name="scheduled-session-info" data-session-id="{{data.id}}" value="false" />
<label for="{{data.id}}" class="radio-text w85">
{{data.scheduled_start}} : {{data.name}}
</label>
<div class="clearall"></div>
</li>
</script>
<!-- Instrument select template -->
<script type="text/template" id="template-instrument-option">
<div class="left ib w45 mb5 clearall plus-checkbox">
<input type="checkbox" id="{id}" session-instrument-id="{value}">
<label for="{id}" class="radio-text">
{label}
</label>
</div>
<div class="right ib w45 mb5">
<select class="f12" session-instrument-id="{value}">
<option value="1">Beginner</option>
<option value="2">Intermediate</option>
<option value="3">Expert</option>
</select>
</div>
</script>
<!-- Instrument select template for RSVP -->
<script type="text/template" id="template-instrument-rsvp-option">
<div class="instrument-rsvp-row">
<div class="plus-checkbox clearall rsvp-instrument-info-holder">
<input type="checkbox" id="{id}" session-instrument-id="{value}">
<label for="{id}" class="radio-text">
{label}
</label>
</div>
<div class="rsvp-info-holder">
<div class="rsvp-count">
<select class="f12 rsvp-count" session-instrument-id="{value}">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="rsvp-level">
<select class="f12 rsvp-level" session-instrument-id="{value}">
<option value="0">Any Skill Level</option>
<option value="1">Beginner</option>
<option value="2">Beginner to Intermediate</option>
<option value="3">Intermediate</option>
<option value="4">Intermediate to Advanced</option>
<option value="5">Advanced</option>
</select>
</div>
</div>
</div>
</script>
<!-- Find Session Screen -->
<div layout="screen" layout-id="findSession" id="findSession" class="screen secondary">
<div class="content">
<div class="content-head">
<div class="content-icon">
<img src="/assets/content/icon_search-e6c3267ed0864a134d25109bd4a397cf7152e2e8b7ae83d87ffe96c032a3d4c9.png" width="19" height="19">
</div>
<h1>find a session</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<div data-react-class="FindSessionScreen" data-react-props="{}" data-react-cache-id="FindSessionScreen-0"><div class="FindSessionScreen"><form id="find-session-form"><div class="session-filter"><div style="min-width: 770px;"><div class="tabs"><a class="find-tab my">For Me</a><a class="find-tab open">Open Jams</a><a class="find-tab upcoming">Upcoming</a></div></div></div></form><div class="content-body-scroller sessions-for-open"><div class="content-wrapper"><div id="sessions-active" class="session-container"><div class="header-zone"><h2>sessions for me</h2><div class="refresh-btn"><a href="/client#/findSession" class="button-grey btn-refresh" style="text-decoration: none;">REFRESH<span class="extra"></span></a></div><div class="search-box"><input class="session-keyword-srch" type="text" name="search" placeholder="Search by Keyword"></div></div><br><div class="findsession-container"><table id="sessions-active" class="findsession-table" cellspacing="0" cellpadding="0" border="0"><thead><tr><th align="left" width="40%">SESSION</th><th align="left" width="45%">MUSICIANS</th><th align="left" width="10%" style="text-align: center;">ACTIONS</th></tr></thead><tbody><tr><td colspan="3" class="none-found">None Found</td></tr></tbody></table></div><div class="find-session-help"><h3>How This Page Works</h3><p>This page will show sessions tailored for you:</p><ul><li>sessions created by a friend (<a href="#">invite others to JamKazam</a>)</li><li>sessions for which you have an invitation</li><li>sessions for which you have a RSVP</li></ul><br><h3>Sit Back and Relax</h3><p>This page will automatically update when a friend creates a session, or you are invited to one.</p><p>So if your friend is creating a session soon, just sit tight and watch for sessions to show up!</p></div></div></div></div><div class="content-body-scroller sessions-for-open"><div class="content-wrapper"><div id="sessions-active" class="session-container"><div class="header-zone"><h2>sessions for me</h2><div class="refresh-btn"><a href="/client#/findSession" class="button-grey btn-refresh" style="text-decoration: none;">REFRESH<span class="extra"></span></a></div><div class="search-box"><input class="session-keyword-srch" type="text" name="search" placeholder="Search by Keyword"></div></div><br><div class="findsession-container"><table id="sessions-active" class="findsession-table" cellspacing="0" cellpadding="0" border="0"><thead><tr><th align="left" width="40%">SESSION</th><th align="left" width="45%">MUSICIANS</th><th align="left" width="10%" style="text-align: center;">ACTIONS</th></tr></thead><tbody><tr><td colspan="3" class="none-found">None Found</td></tr></tbody></table></div><div class="find-session-help"><h3>How This Page Works</h3><p>This page will show only public jam sessions.</p><p>Most recent sessions are shown at the top.</p><p>This list of public sessions does not auto-update. You will have to push the REFRESH button to see new sessions.</p></div></div></div></div><div class="content-body-scroller sessions-for-open"><div class="content-wrapper"><div id="sessions-active" class="session-container"><div class="header-zone"><h2>sessions for me</h2><div class="refresh-btn"><a href="/client#/findSession" class="button-grey btn-refresh" style="text-decoration: none;">REFRESH<span class="extra"></span></a></div><div class="search-box"><input class="session-keyword-srch" type="text" name="search" placeholder="Search by Keyword"></div></div><br><div class="findsession-container"><table id="sessions-active" class="findsession-table" cellspacing="0" cellpadding="0" border="0"><thead><tr><th align="left" width="40%">SESSION</th><th align="left" width="45%">MUSICIANS</th><th align="left" width="10%" style="text-align: center;">ACTIONS</th></tr></thead><tbody><tr><td colspan="3" class="none-found">None Found</td></tr></tbody></table></div><div class="find-session-help"><h3>How This Page Works</h3><p>This page will show these scheduled sessions:</p><ul><li>public jam sessions</li><li>sessions created by a friend (<a href="#">invite others to JamKazam</a>)</li><li>sessions for which you have an invitation</li><li>sessions for which you have a RSVP</li></ul><br><h3>Reserve a spot</h3><p>If you find a session you are interested in attending later, then click the RSVP icon to reserve your spot.</p><p>An email will be sent to the creator of the session, and they can then approve your request.</p><h3>Schedule your Own</h3><p>Don't see a session you like? You can schedule your own session for others to RSVP to at the <a href="/client#/createSession">create session</a> screen. You will receive emails when others RSVP.</p></div></div></div></div></div></div>
</div>
</div>
</div>
<!-- active session template -->
<script type="text/template" id="template-active-session-row">
<tr data-session-id="{id}" class="found-session">
<td width="30%">
<table class="musician-groups" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="bold"><a href="/sessions/{id}" rel="external">{name}</a></td>
<td align="right" width="75">({genres})</td>
</tr>
<tr>
<td colspan="2">{description}</td>
</tr>
<tr>
<td>Notation Files:</td>
<td>{notation_files}</td>
</tr>
<tr class="action-links">
<td>
<a class="listen-link" style="display:{listen_link_display_style};">
<img src="/assets/content/listen-icon-88ddba029644abe2519eb4932a66cc26fff8cd88391c838c98942e098d2b2057.jpg" width="40" height="40" />
</a>
<br/>
<span class="listen-link-details"><span class="listen-link-text">{listen_link_text}</span><a href="#" class="listen-detail-hover">?</a></span>
</td>
<td>
<a class="join-link" style="display:{join_link_display_style};">
<img src="/assets/content/join-icon-113fd9a53122a4abbc6343d8b6e074ab5151b066b48e0200b17b39fc0975c48b.jpg" width="37" height="40" />
</a>
<span class="join-link-text">Join</span>
</td>
</tr>
</table>
</td>
<td width="35%">
<table class="musicians" cellpadding="0" cellspacing="0">
<tr>
<td>In Session:</td>
<td>
<table class="musicians" cellpadding="0" cellspacing="0" width="100%">
{in_session_musicians}
</table>
</td>
</tr>
<tr>
<td>RSVPs:</td>
<td>
<table class="musicians" cellpadding="0" cellspacing="0" width="100%">
{rsvp_musicians_first_3}
</table>
<div style="display:none;">
<table class="musicians" cellpadding="0" cellspacing="0" width="100%">
{rsvp_musicians_remaining}
</table>
</div>
</td>
</tr>
<tr>
<td>Still Needed:</td>
<td>
<table class="musicians" cellpadding="0" cellspacing="0">
{open_slots_first_3}
</table>
<div style="display:none">
<table class="musicians" cellpadding="0" cellspacing="0">
{open_slots_remaining}
</table>
</div>
</td>
</tr>
</table>
</td>
<td width="10%" class="latency">
<div class="center">
<table class="musicians" cellpadding="0" cellspacing="0">
{latency_in_session}
</table>
</div>
<div class="center">
<table class="musicians" cellpadding="0" cellspacing="0">
{latency_first_3}
</table>
</div>
<div id="latency-extra-{id}" class="center" style="display:none;">
<table class="musicians" cellpadding="0" cellspacing="0">
{latency_remaining}
</table>
</div>
</td>
<td width="20%">
<table class="musicians" cellpadding="0" cellspacing="0">
<tr><td><span class="bold">Chat Language:</span><br/>{language}</td></tr>
<tr><td><span class="bold">Musician Access:</span><br/>{musician_access}</td></tr>
<tr><td><span class="bold">Fan Access:</span><br/>{fan_access}</td></tr>
<tr><td><span class="bold">Legal Policy:</span><br/>{legal_policy}</td></tr>
</table>
</td>
</tr>
</script>
<!-- inactive session template -->
<script type="text/template" id="template-inactive-session-row">
<tr data-session-id="{id}" class="found-session">
<td width="30%">
<table class="musician-groups" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="bold"><a href="/sessions/{id}/details" rel="external">{name}</a></td></td>
<td align="right" width="75">({genres})</td>
</tr>
<tr>
<td colspan="2">{description}</td>
</tr>
<tr>
<td>Notation Files:</td>
<td>{notation_files}</td>
</tr>
<tr>
<td colspan="2">{scheduled_start}</td>
</tr>
<tr>
<td>
</td>
<td class="nowrap">
<span class="rsvp-msg" style="display:none;">You cannot RSVP to this session.</span>
<a class="rsvp-link">
<img src="/assets/content/rsvp-icon-9ad58bc52aa2742dd60dd69d712ca465432bb57f20a264407d26dad9acfe8d8d.jpg" width="40" height="40" />
</a>
<br/>
<span class="rsvp-link-text">RSVP</span>
</td>
</tr>
</table>
</td>
<td width="35%">
<table class="musician-groups" cellpadding="0" cellspacing="0">
<tr>
<td>RSVPs:</td>
<td>
<table class="musicians" cellpadding="0" cellspacing="0" width="100%">
{rsvp_musicians_first_3}
</table>
<div style="display:none">
<table class="musicians" cellpadding="0" cellspacing="0" width="100%">
{rsvp_musicians_remaining}
</table>
</div>
</td>
</tr>
<tr>
<td>Still Needed:</td>
<td>
<table class="musicians" cellpadding="0" cellspacing="0">
{open_slots_first_3}
</table>
<div style="display:none;">
<table class="musicians" cellpadding="0" cellspacing="0">
{open_slots_remaining}
</table>
</div>
</td>
</tr>
</table>
</td>
<td width="10%" class="latency pt10">
<div class="center">
<table class="musicians" cellpadding="0" cellspacing="0">
{latency_first_3}
</table>
</div>
<div id="latency-extra-{id}" class="center" style="display:none;">
<table class="musicians" cellpadding="0" cellspacing="0">
{latency_remaining}
</table>
</div>
</td>
<td width="20%">
<table class="musicians" cellpadding="0" cellspacing="0">
<tr><td><span class="bold">Chat Language:</span><br/>{language}</td></tr>
<tr><td><span class="bold">Musician Access:</span><br/>{musician_access}</td></tr>
<tr><td><span class="bold">Fan Access:</span><br/>{fan_access}</td></tr>
<tr><td><span class="bold">Legal Policy:</span><br/>{legal_policy}</td></tr>
</table>
</td>
</tr>
</script>
<script type="text/template" id="template-notation-files">
<a class="{link_class}" data-notation-id="{notation_id}" href="{file_url}" rel="external">{file_name}</a><br />
</script>
<script type="text/template" id="template-musician-info">
<tr>
<td width="24">
<a user-id="{userId}" hoveraction="musician" href="{profile_url}" class="avatar-tiny">
<img src="{avatar_url}" />
</a>
</td>
<td>
<a user-id="{userId}" hoveraction="musician" href="{profile_url}">{musician_name}</a>
</td>
<td>
<div class="instruments" class="nowrap">{instruments}</div>
</td>
<td>{more_link}&nbsp;</td>
</tr>
</script>
<script type="text/template" id="template-open-slots">
<tr>
<td width="24">
<img src="{instrument_url}" />
</td>
<td>
<div class="instruments" class="nowrap">{instrument} ({proficiency})</div>
</td>
<td>{more_link}&nbsp;</td>
</tr>
</script>
<script type="text/template" id="template-latency">
<tr class="mb15">
<td class="{{data.latency_style}} latency-value" data-user-id="{{data.id}}" data-audio-latency="{{data.audio_latency || ''}}" data-full-score="{{data.full_score || ''}}" data-internet-score="{{data.internet_score || ''}}">
{{data.latency_text}}
</td>
</tr>
<tr><td><div style='height:5px;'>&nbsp;</div></td></tr>
</script>
<div class="screen top-parent secondary" id="session-screen" layout="screen" layout-arg="id" layout-id="session"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/shared/icon_session-09f5811cb411fd11c2d89a78b852185141054ac7f15e294b434590c3695bb7ce.png"></div><h1>session</h1></div><div class="content-body"><div data-react-class="SessionScreen" data-react-props="{}" data-react-cache-id="SessionScreen-0"></div></div></div><!-- Configure Track Dialog -->
<div class="dialog" layout="dialog" layout-id="configure-audio" style="max-width:750px;">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png">
<h1>configure tracks</h1>
</div>
<div class="dialog-inner">
<div class="dialog-tabs">
<a id="tab-configure-audio" class="selected">Music Audio</a>
<a id="tab-configure-voice">Voice Chat</a>
</div>
<div><span id="instructions"></span></div>
<div class="clearall"></div>
<!-- Music Audio Panel -->
<div class="tab" tab-id="music-audio">
<!-- 1st Row -->
<div class="left w100 mt20">
<div class="w100">
<div class="left w30">
<div class="left">Audio Device:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="audio-drivers" class="audio-devices w100"></select>
</div>
</div>
<div class="right mr45" style="padding-top:20px;">
<a id="btn-driver-settings" class="button-grey ml45">DRIVER SETTINGS...</a>
</div>
</div>
</div>
<div class="clearall"></div>
<!-- 2nd row -->
<div class="left w100 mt10">
<div class="left w30">
<div class="left">Unused Inputs:</div>
<div class="clearall"></div>
<div class="left w100" style="height:196px;">
<select id="audio-inputs-unused" class="w100" multiple="multiple" size="10" style="height:100%;"></select>
</div>
</div>
<div class="left">
<div id="track1-input-buttons" class="left w5 ml10 mr10 mt30">
<div>
<img id="img-track1-input-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24">
</div>
<div class="mt10">
<img id="img-track1-input-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24">
</div>
</div>
<div class="clearall"></div>
<div id="track2-input-buttons" class="left w5 ml10 mr10 mt45">
<div>
<img id="img-track2-input-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24">
</div>
<div class="mt10">
<img id="img-track2-input-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24">
</div>
</div>
</div>
<div class="left w60">
<div class="left w100">
<div class="left w45">
<div class="left">Track 1 Input:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="track1-input" class="w100" multiple="multiple" style="height:92px"></select>
</div>
</div>
<div class="left w45 ml20">
<div class="left">Track 1 Instrument:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="track1-instrument" class="w100" multiple="multiple" style="height:92px"></select>
</div>
</div>
<div class="clearall"></div>
<div class="left mt5 w100">
<div class="left w45">
<div class="left">Track 2 Input:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="track2-input" class="w100" multiple="multiple" style="height:92px;"></select>
</div>
</div>
<div class="left w45 ml20">
<div class="left">Track 2 Instrument:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="track2-instrument" class="w100" multiple="multiple" style="height:92px;"></select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearall"></div>
<!-- 3rd row -->
<div class="left w100 mt10">
<div class="left w30">
<div class="left">Unused Outputs:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="audio-output-unused" class="w100" multiple="multiple" size="4"></select>
</div>
</div>
<div class="left ml10 mr10 mt25">
<div>
<img id="img-audio-output-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24">
</div>
<div class="mt10">
<img id="img-audio-output-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24">
</div>
</div>
<div class="left w27">
<div class="left">Session Audio Output:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="audio-output-selection" class="w100" multiple="multiple" size="4"></select>
</div>
</div>
</div>
<div class="clearall"></div>
</div> <!-- End Music Audio Tab -->
<!-- Voice Chat Panel -->
<div class="tab" tab-id="voice-chat" style="display:none;">
<div class="left w50 mt10">
<div class="left">Voice Chat Device:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="voice-chat-type" class="w100">
<option value="0">Don't set up an input for voice chat</option>
<option value="1">Use an input from the list below for chat</option>
</select>
</div>
</div>
<div class="clearall"></div>
<div class="left w50 mt10">
<div class="left">Unused Inputs:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="voice-inputs-unused" class="w100" multiple="multiple" size="8"></select>
</div>
</div>
<div class="left mt55">
<div class="left ml10 mr10">
<div>
<img id="img-voice-input-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24">
</div>
<div class="mt10">
<img id="img-voice-input-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24">
</div>
</div>
</div>
<div class="left mt10 w38">
<div class="left">Voice Chat Input:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="voice-inputs-selection" class="w100" multiple="multiple" size="8"></select>
</div>
</div>
</div>
<div class="clearall"></div>
<div class="mt10" style="padding-left:2px;">
<div class="left">
<a layout-link="add-new-audio-gear" id="btn-add-new-audio-gear" class="button-grey" style="margin-left:0px;">ADD NEW AUDIO GEAR</a>
</div>
<div class="right mr35">
<a id="btn-cancel-settings" class="button-grey">CANCEL</a>&nbsp;
<a id="btn-save-settings" class="button-orange">UPDATE SETTINGS</a>
</div>
</div>
<div class="clearall"></div>
</div>
</div><!-- Add Track Dialog -->
<div class="dialog" layout="dialog" layout-id="add-track" style="max-width:750px;">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png">
<h1>add a track</h1>
</div>
<div class="dialog-inner">
<div>
Use arrow buttons to assign audio inputs to this new track, and choose what instrument you are playing on this track. Please note that you may only use one audio device for all audio inputs and outputs. If you don't see an audio device you think should be listed <a href="#">view this help topic to understand why</a>.
</div>
<div class="clearall"></div>
<div class="left w100 mt10">
<div class="left w30">
<div class="left">Unused Inputs:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="add-track2-unused" class="w100" multiple="multiple" size="6"></select>
</div>
</div>
<div class="left mt35">
<div class="left w5 ml10 mr10">
<div>
<img id="img-add-track2-input-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24">
</div>
<div class="mt10">
<img id="img-add-track2-input-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24">
</div>
</div>
</div>
<div class="left w60">
<div class="left w45">
<div class="left w100">
<div class="left">Track 2 Input:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="add-track2-input" class="w100" multiple="multiple" size="6"></select>
</div>
</div>
</div>
<div class="left w45 ml20">
<div class="left">Track 2 Instrument:</div>
<div class="clearall"></div>
<div class="left w100">
<select id="add-track2-instrument" class="w100" multiple="multiple" size="6"></select>
</div>
</div>
</div>
</div>
<div class="clearall"></div>
<div class="mt10" style="padding-left:2px;">
<div class="left">
<a layout-link="add-new-audio-gear" id="btn-add-new-audio-gear" class="button-grey" style="margin-left:0px;">ADD NEW AUDIO GEAR</a>
</div>
<div class="right mr40">
<a layout-action="close" class="button-grey">CANCEL</a>&nbsp;
<a id="btn-add-track" class="button-orange">ADD TRACK</a>
</div>
</div>
<div class="clearall"></div>
</div>
</div><!-- Add New Gear Dialog -->
<div class="dialog" layout="dialog" layout-id="add-new-audio-gear" style="max-width:500px;">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png">
<h1>add new audio gear</h1>
</div>
<div class="dialog-inner">
To add a new audio device, you must exit your current session and test the device using the JamKazam automated test feature.
<br clear="left"><br>
<div class="right">
<a id="btn-cancel-new-audio" layout-action="close" class="button-grey">CANCEL</a>&nbsp;
<a id="btn-leave-session-test" class="button-orange">LEAVE SESSION &amp; START TEST</a>
</div>
<br clear="all">
</div>
</div><!-- Error Dialog -->
<div class="dialog" layout="dialog" layout-id="error-dialog" style="max-width:550px;">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png">
<h1 id="error-summary"></h1>
</div>
<div class="dialog-inner">
<span id="error-msg"></span>
<br clear="left"><br>
<div class="right">
<a id="btn-error-ok" layout-action="close" class="button-orange">OK</a>
</div>
<br clear="all">
</div>
</div><!-- Session Settings Dialog -->
<div class="dialog" id="session-settings" layout="dialog" layout-id="session-settings">
<div class="content-head">
<img width="18" height="18" class="content-icon" src="/assets/content/icon_settings_lg-4ff6123ff968d6939f4909f4ce4390347d0187923f20acb1946b666ba5b69d98.png">
<h1>session properties</h1>
</div>
<div class="dialog-inner">
<form id="session-settings-dialog">
<input id="session-settings-id" name="id" type="hidden">
<div class="left input-holder">
<div class="left ib">
Genre:
</div>
<div class="right w75 ib mb10" id="session-settings-genre">
<div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="genre-list" name="genres" id="EasyDropDown33907D">
<option value="">Any Genre</option>
</select></span><span class="selected">Any Genre</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Any Genre</li></ul></div></div>
</div>
<div class="clearall left w25 ib mb10">
Name:
</div>
<div class="right w75 ib mb10">
<input id="session-settings-name" name="name" type="text">
</div>
<div class="clearall left w25 ib mb10">
Description:
</div>
<div class="right w75 ib mb10">
<textarea class="settings-session-description" id="session-settings-description" name="description" rows="5"></textarea>
</div>
<div class="clearall left w25 ib mb10">
Language:
</div>
<div class="right w75 ib mb10">
<select id="session-settings-language" name="language">
<option value="eng">
English
</option>
<option value="afr">
Afrikaans
</option>
<option value="sqi">
Albanian
</option>
<option value="ara">
Arabic
</option>
<option value="hye">
Armenian
</option>
<option value="eus">
Basque
</option>
<option value="ben">
Bengali
</option>
<option value="bul">
Bulgarian
</option>
<option value="cat">
Catalan
</option>
<option value="khm">
Central Khmer
</option>
<option value="zho">
Chinese
</option>
<option value="hrv">
Croatian
</option>
<option value="ces">
Czech
</option>
<option value="dan">
Danish
</option>
<option value="nld">
Dutch
</option>
<option value="est">
Estonian
</option>
<option value="fij">
Fijian
</option>
<option value="fin">
Finnish
</option>
<option value="fra">
French
</option>
<option value="kat">
Georgian
</option>
<option value="deu">
German
</option>
<option value="guj">
Gujarati
</option>
<option value="heb">
Hebrew
</option>
<option value="hin">
Hindi
</option>
<option value="hun">
Hungarian
</option>
<option value="isl">
Icelandic
</option>
<option value="ind">
Indonesian
</option>
<option value="gle">
Irish
</option>
<option value="ita">
Italian
</option>
<option value="jpn">
Japanese
</option>
<option value="kor">
Korean
</option>
<option value="lat">
Latin
</option>
<option value="lav">
Latvian
</option>
<option value="lit">
Lithuanian
</option>
<option value="mkd">
Macedonian
</option>
<option value="msa">
Malay
</option>
<option value="mal">
Malayalam
</option>
<option value="mlt">
Maltese
</option>
<option value="mri">
Maori
</option>
<option value="mar">
Marathi
</option>
<option value="ell">
Greek
</option>
<option value="mon">
Mongolian
</option>
<option value="nep">
Nepali
</option>
<option value="nor">
Norwegian
</option>
<option value="pan">
Panjabi
</option>
<option value="fas">
Persian
</option>
<option value="pol">
Polish
</option>
<option value="por">
Portuguese
</option>
<option value="que">
Quechua
</option>
<option value="ron">
Romanian
</option>
<option value="rus">
Russian
</option>
<option value="smo">
Samoan
</option>
<option value="srp">
Serbian
</option>
<option value="slk">
Slovak
</option>
<option value="slv">
Slovenian
</option>
<option value="spa">
Spanish
</option>
<option value="swa">
Swahili
</option>
<option value="swe">
Swedish
</option>
<option value="tam">
Tamil
</option>
<option value="tat">
Tatar
</option>
<option value="tel">
Telugu
</option>
<option value="tha">
Thai
</option>
<option value="bod">
Tibetan
</option>
<option value="ton">
Tonga (Tonga Islands)
</option>
<option value="tur">
Turkish
</option>
<option value="ukr">
Ukrainian
</option>
<option value="urd">
Urdu
</option>
<option value="uzb">
Uzbek
</option>
<option value="vie">
Vietnamese
</option>
<option value="cym">
Welsh
</option>
<option value="xho">
Xhosa
</option>
</select>
</div>
<div class="clearall left w20 ib mb10">
Mix Controller:
</div>
<div class="right w75 ib mb10">
<select id="session-settings-master-mix-controller" name="master_mix_controller"></select>
</div>
<div class="clearall left w20 ib mb10">
Musician Access:
</div>
<div class="right w75 ib mb10">
<select id="session-settings-musician-access" name="musician_access">
<option value="only-rsvp">Only RSVP musicians may join</option>
<option value="musicians">Musicians may join at will</option>
<option value="musicians-approval">Musicians may join by approval</option>
</select>
</div>
<div class="clearall left w20 ib mb10">
Friends Can Join:
</div>
<div class="right w75 ib mb10">
<select id="session-settings-friends-can-join" name="friends-can-join">
<option value="true">Friends Can Always Join</option>
<option value="false">Friends Follow Musician Access Rules</option>
</select>
</div>
<div class="clearall left w25 ib mb10">
Fan Access:
</div>
<div class="right w75 ib mb10">
<select id="session-settings-fan-access" name="fan_access">
<!-- /%option{:value => "listen-chat-band"} Fans may listen, chat with the band -->
<option value="listen-chat">Fans may listen, chat with each other</option>
<option value="no-listen-chat">Fans may not listen to session</option>
</select>
</div>
<div class="clearall left w25 ib mb10">
Notation Files:
</div>
<div class="right w75 ib mb10 notation-files">
<div class="notation-selector">
<a class="button-orange btn-select-files">ADD FILES...</a>
<input accept=".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt" class="hidden" id="session-select-files" type="file" value="Select Files...">
<div class="spinner-small hidden"></div>
</div>
<div class="inputbox"></div>
</div>
<div class="clearall right mt20">
<a class="button-grey" layout-action="close">CANCEL</a>
<a class="button-orange" id="session-settings-dialog-submit">UPDATE SETTINGS</a>
</div>
<div class="clearall"></div>
<br clear="all">
</div>
</form>
</div>
</div>
<script id="template-session-track" type="text/template"><div class="session-track track" client-id="{clientId}" track-id="{trackId}"><div class="track-vu-left mixer-id">{vuMixerId}_vul</div><div class="track-vu-right mixer-id">{vuMixerId}_vur</div><div class="track-label" title="{name}"><span class="name-text">{name}</span></div><div class="track-close op30" id="div-track-close" track-id="{trackId}"><img width="12" height="12" src="/assets/content/icon_closetrack-7db7a398b855e15bdf44f247a5a0adf9ce0770523e51a09892461d9838a4387a.png" /></div><div class="{avatarClass}"><img src="{avatar}" /></div><div class="track-instrument {preMasteredClass}"><img height="45" src="{instrumentIcon}" width="45" /></div><div class="track-gain" mixer-id="{mixerId}"></div><div class="track-icon-mute {muteClass}" control="mute" mixer-id="{muteMixerId}"></div><div class="track-icon-loop hidden" control="loop"><input id="loop-button" type="checkbox" value="loop">Loop</input></div><div class="track-connection grey" mixer-id="{mixerId}_connection"><CONNECTION></CONNECTION></div><div class="disabled-track-overlay"></div><div class="metronome-selects hidden"><select class="metronome-select metro-sound" title="Metronome Sound"><option class="label" value="Beep"> Knock</option><option class="label" value="Click">Tap</option><option class="label" value="Snare">Snare</option><option class="label" value="Kick"> Kick</option></select><br /><select class="metronome-select metro-tempo" title="Metronome Tempo"><option class="label" value="40">40</option><option class="label" value="42">42</option><option class="label" value="44">44</option><option class="label" value="46">46</option><option class="label" value="48">48</option><option class="label" value="50">50</option><option class="label" value="52">52</option><option class="label" value="54">54</option><option class="label" value="56">56</option><option class="label" value="58">58</option><option class="label" value="60">60</option><option class="label" value="63">63</option><option class="label" value="66">66</option><option class="label" value="69">69</option><option class="label" value="72">72</option><option class="label" value="76">76</option><option class="label" value="80">80</option><option class="label" value="84">84</option><option class="label" value="88">88</option><option class="label" value="92">92</option><option class="label" value="96">96</option><option class="label" value="100">100</option><option class="label" value="104">104</option><option class="label" value="108">108</option><option class="label" value="112">112</option><option class="label" value="116">116</option><option class="label" value="120">120</option><option class="label" value="126">126</option><option class="label" value="132">132</option><option class="label" value="138">138</option><option class="label" value="144">144</option><option class="label" value="152">152</option><option class="label" value="160">160</option><option class="label" value="168">168</option><option class="label" value="176">176</option><option class="label" value="184">184</option><option class="label" value="192">192</option><option class="label" value="200">200</option><option class="label" value="208">208</option></select></div></div></script><script id="template-option" type="text/template"><option selected="{selected}" title="{label}" value="{value}">{label}</option></script><script id="template-genre-option" type="text/template"><option value="{value}">{label}</option></script><script id="template-instrument-option-simple" type="text/template"><option value="{value}">{label}</option></script><script id="template-pending-metronome" type="text/template"><div class="pending-metronome"><div class="spinner-large"></div><p>Your metronome is synchronizing.</p></div></script>
<!-- Profile -->
<div layout="screen" layout-id="profile" layout-arg="id" class="screen secondary" id="user-profile">
<div class="content-head">
<div class="content-icon">
<img src="/assets/content/icon_profile-d075cf9845a53c61353707eeaf36ce41c7ccf35899b4296521d989dc1d61baa2.png" width="19" height="19">
</div>
<h1><span id="type-label">musician</span> profile</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<form id="profile-form" class="inner-content">
<div class="profile-header profile-head">
<div class="user-header">
<h2 id="username"></h2>
</div>
<!-- action buttons -->
<div class="right">
<a id="btn-add-friend" class="button-orange">ADD FRIEND</a>
<a id="btn-follow-user" class="button-orange">FOLLOW</a>
<a id="btn-message-user" class="button-orange">MESSAGE</a>
</div>
<br clear="all"><br>
<!-- avatar -->
<div class="profile-photo">
<div class="avatar-profile">
<img id="avatar" width="200" height="200">
</div>
</div>
<!-- profile navigation -->
<div class="profile-nav">
<a id="about-link" class="active">about</a>
<a id="history-link">history</a>
<a id="bands-link">bands</a>
<a id="social-link">social</a>
<a id="favorites-link" class="last">favorites</a>
</div>
<div class="clearall"></div>
</div>
<div class="profile-body">
<div id="about-content" class="profile-body-content">
<!-- stats & location -->
<div class="profile-wrapper">
<div class="profile-about-left">
<div class="profile-actions">
<a class="button-orange edit-profile-btn" href="/client#/account/profile">EDIT PROFILE</a>
<a class="button-orange edit-teacher-profile-btn" href="/client#/profile/teachers/setup/introduction">EDIT TEACHER PROFILE</a>
<a class="button-orange view-teacher-profile-btn" href="/client#/profile/profile/teacher/ID">VIEW TEACHER PROFILE</a>
</div>
<h3>Location:</h3><br>
<span id="location"></span><br>
<h3>Stats:</h3><br>
<span id="friend-stats"></span><br>
<span id="follower-stats"></span><br>
<span id="session-stats"></span><br>
<span id="recording-stats"></span><br>
<span id="following-stats"></span><br>
<span id="favorite-stats"></span><br>
</div>
<div class="profile-about-right">
<div class="section teacher-search-enabled">
<div class="section-header">Availability Settings</div>
<div>
<span class="list-search-label">Let new students find me by search:</span>
<label class="switch">
<input type="checkbox">
<span class="slider">
<span class="on-label">YES</span>
<span class="off-label">NO</span>
</span>
</label>
</div>
<br clear="all">
</div>
<div class="section bio">
<div class="section-header">Bio <a href="/client#/account/profile" class="add-bio">(edit)</a></div>
<div id="biography" class="item"></div>
</div>
<div class="section">
<div class="section-header">Musical Experience <a href="/client#/account/profile/experience" class="add-experiences">(edit)</a></div>
<div class="instruments-holder">
<br clear="all">
</div>
<div class="statuses">
<div class="item">
<div class="profile-details">Status:</div>
<div id="musician-status"></div>
</div>
<div class="item">
<div class="profile-details">Genres:</div>
<div id="genres"></div>
</div>
<div class="item">
<div class="profile-details">Concert Gigs:</div>
<div id="concert-count"></div>
</div>
<div class="item">
<div class="profile-details">Studio Gigs:</div>
<div id="studio-count"></div>
</div>
</div>
</div>
<div class="section performance-samples">
<div class="section-header">Performance Samples <a href="/client#/account/profile/samples" class="add-recordings">(edit)</a></div>
<div class="no-samples performance-sample-option hidden">None specified</div><div class="jamkazam-samples logo performance-sample-option hidden"><img class="logo" src="/assets/header/logo.png"></div><div class="soundcloud-samples logo performance-sample-option hidden"><img class="logo" src="/assets/content/soundcloud-logo.png"></div><div class="youtube-samples logo performance-sample-option hidden"><img class="logo" src="/assets/content/youtube-logo.png"></div>
</div>
<div class="section">
<div class="section-header">Online Presence <a href="/client#/account/profile/samples" class="add-presences">(edit)</a></div>
<div class="no-online-presence online-presence-option hidden">None specified</div><div class="user-website logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/website-logo.png"></a></div><div class="soundcloud-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/soundcloud-logo.png"></a></div><div class="reverbnation-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/reverbnation-logo.png"></a></div><div class="bandcamp-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/bandcamp-logo.png"></a></div><div class="fandalism-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/fandalism-logo.png"></a></div><div class="youtube-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/youtube-logo.png"></a></div><div class="facebook-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/facebook-logo.png"></a></div><div class="twitter-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/twitter-logo.png"></a></div>
</div>
<div class="section">
<div class="section-header">Current Interests <a href="/client#/account/profile/interests" class="add-interests">(edit)</a></div>
<div id="no-interests" class="item">None specified</div>
<div id="paid-gigs" class="item">
<div>I'm interested in playing paid gigs</div>
<div id="paid-gig-details">
<ul>
</ul>
</div>
</div>
<div id="free-gigs" class="item">
<div>I'm interested in playing free gigs</div>
<div id="free-gig-details">
<ul>
</ul>
</div>
</div>
<div id="cowriting" class="item">
<div>I'm interested in co-writing</div>
<div id="cowriting-details">
<ul>
</ul>
</div>
</div>
<div id="traditional-band" class="item">
<div>I'm interested in forming traditional band(s)</div>
<div id="traditional-band-details">
<ul>
</ul>
</div>
</div>
<div id="virtual-band" class="item">
<div>I'm interested in forming virtual band(s)</div>
<div id="virtual-band-details">
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="history-content" class="profile-wrapper">
<input name="utf8" type="hidden" value="✓" autocomplete="off">
<!-- @begin web_filter -->
<div id="user-feed-controls" class="feed-filter filter-head"><div class="filter-element wrapper"><div class="filter-element desc">Sort Feed by:</div>
<div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select name="feed_order_by" id="feed_order_by" class="feed-order-by"><option value="date">Most Recent</option>
<option value="plays">Most Played</option>
<option value="likes">Most Liked</option></select></span><span class="selected">Most Recent</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Most Recent</li><li>Most Played</li><li>Most Liked</li></ul></div></div>
</div><div class="filter-element wrapper"><!-- -if (:band==filter_label || :jamtrack==filter_label) -->
<!-- =content_tag(:div, 'Genre:', :class => 'filter-element desc') -->
<!-- =select_tag(&quot;feed_genre&quot;, / options_for_select([[&#39;Any&#39;, &#39;&#39;]].concat(JamRuby::Genre.all.collect { |ii| [ii.description, ii.id] })), {:class =&gt; &#39;easydropdown&#39;}) -->
</div><div class="filter-element wrapper"><!-- =content_tag(:div, 'Include Dates:', :class => 'filter-element desc') -->
<div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select name="feed_date" id="feed_date" class=""><option value="today">Today</option>
<option value="week">This Week</option>
<option value="month">This Month</option>
<option value="all">All Time</option></select></span><span class="selected">Today</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Today</li><li>This Week</li><li>This Month</li><li>All Time</li></ul></div></div>
</div><div class="filter-element wrapper"></div><div class="filter-element wrapper"><div class="filter-element desc">Show:</div>
<div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select name="feed_show" id="feed_show" class=""><option value="all">Sessions &amp; Recordings</option>
<option value="music_session">Sessions</option>
<option value="recording">Recordings</option></select></span><span class="selected">Sessions &amp; Recordings</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Sessions &amp; Recordings</li><li>Sessions</li><li>Recordings</li></ul></div></div>
</div><div class="btn-refresh-holder">
<a class="button-grey btn-refresh-entries" href="/client#/feed">REFRESH</a>
</div>
</div>
<div class="filter-body">
<div class="content-body-scroller" id="user-profile-feed-scroller">
<div class="profile-wrapper">
<div class="feed-content" id="user-profile-feed-entry-list"></div>
<div id="user-profile-end-of-feeds-list" class="end-of-list">No more feed entries</div>
<div id="user-profile-loading-feeds" class="infinite-scroll-loader" style="padding:5px">Loading ...</div>
</div>
</div>
</div>
</div>
<div id="bands-content" class="profile-wrapper profile-body-content">
<br clear="all">
</div>
<div id="social-content" class="profile-body-content outer">
<div class="profile-social-head">
<div class="profile-social-left">
<h2>Friends</h2>
</div>
<div class="profile-social-mid">
<h2>Following</h2>
</div>
<div class="profile-social-right">
<h2>Followers</h2>
</div>
<div class="clearall"></div>
</div>
<div class="profile-social-body">
<div class="profile-social-body-wrapper">
<div class="content-body-scroller">
<!-- @FIXME: seems like too many divs -->
<div class="profile-social-content">
<div class="profile-social-left">
<div id="social-friends">
</div>
</div>
<div class="profile-social-mid">
<div id="social-followings">
</div>
</div>
<div class="profile-social-right">
<div id="social-followers">
</div>
</div>
<div class="clearall"></div>
</div>
</div>
</div>
</div>
</div>
<div id="favorites-content" class="profile-body-content">
<div class="profile-wrapper">
<div class="content-body-scroller">
</div>
</div>
</div>
</div></form>
</div>
</div>
<script type="text/template" id="template-no-bands">
<div class="when-empty">
Not In Any Bands:<br/>
<a id="band-setup-link" href="/client#/band/setup/new">Set Up Your Band</a>
</div>
</script>
<script type="text/template" id="template-more-bands">
<div class="when-empty">
<a id="band-setup-link" href="/client#/band/setup/new">Set Up Another Band</a>
</div>
</script>
<script type="text/template" id="template-profile-instruments">
<div class="profile-instrument">
<img src="{instrument_logo_url}" width="70" height="70" /><br />
<span>{instrument_description}</span><br />
<span class="{proficiency_level_css}">{proficiency_level}</span>
</div>
</script>
<!-- Band Row Template -->
<script type="text/template" id="template-profile-bands"><!-- -->
<div band-id="{bandId}" class="profile-band-list-result profile-bands f11">
<div class="left" style="width:63px;">
<div class="avatar-small"><img src="{avatar_url}"/></div>
</div>
<div class="right" style="width:250px;margin-top:10px;">
<table class="profile-musicians" cellpadding="0" cellspacing="5">{musicians}</table>
</div>
<div style="margin-left: 63px; margin-right: 260px;margin-top:12px;">
<div class="first-row" data-hint="top-row">
<div class="lcol left">
<!-- name & location -->
<div class="result-name">{name}</div>
<div class="result-location">{location}</div>
<br />
<div id="result_genres" class="nowrap mt10">{genres}</div>
</div>
<div class="whitespace">
<div class="biography">{biography}</div>
</div>
<div class="clearleft"></div>
</div>
<div class="button-row">
<div class="lcol stats left">
{follower_count} <img src="../assets/content/icon_followers.png" title="followers" width="22" height="12" align="absmiddle" />
{recording_count} <img src="../assets/content/icon_recordings.png" title="recordings" width="12" height="13" align="absmiddle" />
{session_count} <img src="../assets/content/icon_session_tiny.png" title="sessions" width="12" height="12" align="absmiddle" />
</div>
<div class="result-list-button-wrapper">
<a class="button-orange smallbutton" href="{profile_url}">PROFILE</a>
<span class="profile-band-link-member-false"><a id="btn-follow-band" class="button-orange smallbutton">FOLLOW</a></span>
<span class="profile-band-link-member-true"><a href="{band_edit_url}" class="button-orange smallbutton">EDIT BAND</a></span>
<span class="profile-band-link-member-true"><a href="{band_member_url}" class="button-orange smallbutton">INVITE</a></span>
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="template-profile-social">
<div class="profile-block">
<div {hoverAttributeId}="{userId}" hoveraction="{hoverAction}" class="avatar-small">
<img src="{avatar_url}" />
</div>
<div {hoverAttributeId}="{userId}" hoveraction="{hoverAction}" class="profile-block-name">{userName}</div>
<div class="profile-block-city">{location}</div>
</div>
</script>
<!-- Band Profile -->
<div layout="screen" layout-id="bandProfile" layout-arg="id" class="screen secondary" id="band-profile">
<div class="content-head">
<div class="content-icon">
<img src="/assets/content/icon_bands-b1b10c7374dc9885c781516827ff21c6473fb5db450cb71f100f4c611943cf28.png" width="19" height="19">
</div>
<h1>band profile</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<form id="band-profile-form" class="inner-content">
<div class="profile-header profile-head">
<h2 id="band-profile-name"></h2>
<div class="left band-actions">
<a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a>
<a id="btn-edit-band-members" class="button-orange">INVITE</a>
<a id="btn-edit-band-delete" class="button-orange">DELETE</a>
</div>
<div class="band-profile-status">
</div>
<div class="right">
<a id="btn-follow-band" class="button-orange">FOLLOW</a>
<!-- <a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a> -->
</div>
<br clear="all"><br>
<!-- avatar -->
<div class="band-profile-photo">
<div class="avatar-profile">
<img id="band-profile-avatar" width="200" height="200">
</div>
</div>
<!-- profile navigation -->
<div class="band-profile-nav">
<a id="band-profile-about-link" class="band active">about</a>
<a id="band-profile-history-link" class="band">history</a>
<a id="band-profile-members-link" class="band">members</a>
<a id="band-profile-social-link" class="band last">social</a>
</div>
<div class="clearall"></div>
</div>
<div class="profile-body">
<div id="band-profile-about" class="profile-body-content">
<div class="band-profile-wrapper">
<!-- stats & location -->
<div class="profile-about-left">
<h3>Location:</h3><br>
<span id="band-profile-location"></span><br><br><br>
<h3>Stats:</h3><br>
<span id="band-profile-follower-stats"></span><br>
<span id="band-profile-session-stats"></span><br>
<span id="band-profile-recording-stats"></span><br>
</div>
<div class="profile-about-right">
<div class="band-entry">
<div class="item-caption">Bio</div>
<div class="item-content" id="band-profile-biography"></div>
<div class="item-content">
<a id="btn-edit-band-bio" class=".edit-bio">Edit Bio</a>
</div>
</div>
</div>
<div class="profile-about-right">
<div class="band-entry">
<div class="item-caption">Musical Experience</div>
<div class="item-content">
<table class="summary-table">
<tbody><tr>
<td>Genres:</td>
<td class="experience-genres">Genres</td>
</tr>
<tr>
<td>Concert Gigs:</td>
<td class="experience-gigs"></td>
</tr>
<tr>
<td>Status:</td>
<td class="experience-status"></td>
</tr>
<tr>
<td>Type:</td>
<td class="experience-type"></td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div class="profile-about-right">
<div class="band-entry">
<div class="item-caption">Performance Samples</div>
<div class="item-content">
<div class="no-samples performance-sample-option hidden">None specified</div><div class="jamkazam-samples logo performance-sample-option hidden"><img class="logo" src="/assets/header/logo.png"></div><div class="soundcloud-samples logo performance-sample-option hidden"><img class="logo" src="/assets/content/soundcloud-logo.png"></div><div class="youtube-samples logo performance-sample-option hidden"><img class="logo" src="/assets/content/youtube-logo.png"></div>
</div>
</div>
</div>
<div class="profile-about-right">
<div class="band-entry">
<div class="item-caption">Online Presence</div>
<div class="item-content">
<div class="no-online-presence online-presence-option hidden">None specified</div><div class="user-website logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/website-logo.png"></a></div><div class="soundcloud-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/soundcloud-logo.png"></a></div><div class="reverbnation-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/reverbnation-logo.png"></a></div><div class="bandcamp-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/bandcamp-logo.png"></a></div><div class="fandalism-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/fandalism-logo.png"></a></div><div class="youtube-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/youtube-logo.png"></a></div><div class="facebook-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/facebook-logo.png"></a></div><div class="twitter-presence logo online-presence-option hidden"><a rel="external"><img class="logo" src="/assets/content/twitter-logo.png"></a></div>
</div>
</div>
</div>
<div class="profile-about-right">
<div class="band-entry">
<div class="item-caption">Current Interests</div>
<ul>
<li class="interests-new-members hidden">
<span>Our band is looking for new members who play our genre(s) of music and can play the following:</span>
<span class="new-member-details"></span>
</li>
<li class="interests-paid-gigs hidden">
<span>Our band is available for hire to perform at concerts and events for</span>
<span class="paid-gig-rate">
</span>
<span class="paid-gig-minimum">
</span>
</li>
<li class="interests-free-gigs hidden">
<span>Our band is available to perform at concerts and events at no charge as we are currently building our live performance experience.</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="band-profile-history" class="profile-body-content band-profile-wrapper">
<div class="band-profile-history-feed">
<input name="utf8" type="hidden" value="✓" autocomplete="off">
<!-- @begin web_filter -->
<div id="band-feed-controls" class="feed-filter filter-head"><div class="filter-element wrapper"><div class="filter-element desc">Sort Feed by:</div>
<select name="feed_order_by" id="feed_order_by" class="feed-order-by easydropdown"><option value="date">Most Recent</option>
<option value="plays">Most Played</option>
<option value="likes">Most Liked</option></select>
</div><div class="filter-element wrapper"><!-- -if (:band==filter_label || :jamtrack==filter_label) -->
<!-- =content_tag(:div, 'Genre:', :class => 'filter-element desc') -->
<!-- =select_tag(&quot;feed_genre&quot;, / options_for_select([[&#39;Any&#39;, &#39;&#39;]].concat(JamRuby::Genre.all.collect { |ii| [ii.description, ii.id] })), {:class =&gt; &#39;easydropdown&#39;}) -->
</div><div class="filter-element wrapper"><!-- =content_tag(:div, 'Include Dates:', :class => 'filter-element desc') -->
<select name="feed_date" id="feed_date" class="easydropdown"><option value="today">Today</option>
<option value="week">This Week</option>
<option value="month">This Month</option>
<option value="all">All Time</option></select>
</div><div class="filter-element wrapper"></div><div class="filter-element wrapper"><div class="filter-element desc">Show:</div>
<select name="feed_show" id="feed_show" class="easydropdown"><option value="all">Sessions &amp; Recordings</option>
<option value="music_session">Sessions</option>
<option value="recording">Recordings</option></select>
</div><div class="btn-refresh-holder">
<a class="button-grey btn-refresh-entries" href="/client#/feed">REFRESH</a>
</div>
</div>
<div class="filter-body">
<div class="content-body-scroller" id="band-profile-feed-scroller">
<div class="profile-wrapper">
<div class="feed-content" id="band-profile-feed-entry-list"></div>
<div id="band-profile-end-of-feeds-list" class="end-of-list">No more feed entries</div>
<div id="band-profile-loading-feeds" class="infinite-scroll-loader" style="padding:5px">Loading ...</div>
</div>
</div>
</div>
</div>
</div>
<div id="band-profile-members" class="band-profile-wrapper profile-body-content f11">
<br clear="all">
</div>
<!-- @FIXME cf clients/_profile.html.erb to mimic layout for scrolling header -->
<div id="band-profile-social" class="band-profile-wrapper profile-body-content">
<div class="">
<h2>Followers</h2>
<div id="band-profile-social-followers">
</div>
</div>
<br clear="all">
</div>
</div></form>
</div>
</div>
<script type="text/template" id="template-band-profile-members">
<div user-id="{userId}" class="band-profile-members" band-admin="{band_admin}" pending-member="{is_pending}" invitation-id="{invitation_id}">
<div class="left" style="width:63px;">
<div class="avatar-small">
<img src="{avatar_url}" />
</div>
</div>
<div class="" style="margin-left: 63px;margin-top:12px;">
<div class="first-row" data-hint="top-row">
<div class="lcol left">
<div class="result-name">{name}</div>
<div class="result-location">{location}</div>
<br />
<div class="nowrap mt10">{instruments}</div>
</div>
<div class="whitespace">
<div class="biography">{biography}</div>
</div>
<div class="clearleft"></div>
</div>
<div class="button-row">
<div class="lcol stats left">
{friend_count} <img src="../assets/content/icon_friend.png" title="friends" width="14" height="14" align="absmiddle" />
{follower_count} <img src="../assets/content/icon_followers.png" title="followers" width="22" height="12" align="absmiddle" />
{recording_count} <img src="../assets/content/icon_recordings.png" title="recordings" width="12" height="13" align="absmiddle" />
{session_count} <img src="../assets/content/icon_session_tiny.png" title="sessions" width="12" height="12" align="absmiddle" />
</div>
<div class="result-list-button-wrapper">
<a class="button-orange smallbutton" href="{profile_url}">PROFILE</a>
<a class="btn-follow-member button-orange smallbutton">FOLLOW</a>
<a class="btn-remove-member button-orange smallbutton">REMOVE MEMBER</a>
<a style="display:none;" class="btn-reinvite-member button-orange smallbutton">RESEND INVITATION</a>
<a style="display:none;" class="btn-friend-member button-orange smallbutton">CONNECT</a>
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="template-band-profile-social">
<div class="band-profile-outer-block">
<div class="band-profile-block">
<div user-id="{userId}" hoveraction="{hoverAction}" class="avatar-small">
<img src="{avatar_url}" />
</div>
<div user-id="{userId}" hoveraction="{hoverAction}" class="band-profile-block-name">{userName}</div>
<div class="band-profile-block-city">{location}</div>
</div>
</div>
</script>
<div class="screen secondary" id="band-setup" layout="screen" layout-arg="id" layout-id="band/setup"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_bands-b1b10c7374dc9885c781516827ff21c6473fb5db450cb71f100f4c611943cf28.png" width="19" height="19"></div><h1 id="band-setup-title">my band</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><form id="band-setup-form"><div class="band-step content-wrapper" id="band-setup-step-0"><h2>set up band: basics</h2><table class="band-form-table"><tbody><tr><td colspan="2"></td></tr><tr id="name_row"><td colspan="2"><div class="band-photo hidden"><span class="field"><a class="band-avatar-profile" href="#"><img id="band-avatar" align="absmiddle" height="88" width="88" src="/assets/shared/avatar_generic_band-a889efb22e9cdabeb9a9def1c22713316a736c7c23bd6e81af9e18e5179286b4.png"></a></span><span class="field"><a class="small ml20" href="#" id="band-change-photo">Upload band photo.</a></span></div><div class="band-name"><div class="field band-field"><label for="band-name">Band Name:</label><input id="band-name" maxlength="1024" type="text" value=""></div></div></td></tr><tr><td class="band-country"><div class="field band-field"><label for="band-country">Country:</label><select id="band-country"></select></div></td><td class="band-biography" rowspan="3"><div class="field band-field"><label for="band-biography">Description / Bio:</label><textarea id="band-biography" rows="8"></textarea></div></td></tr><tr><td class="band-region"><div class="field band-field"><label for="band-region">State/Region:</label><select id="band-region"></select></div></td></tr><tr><td class="band-city"><div class="field band-field"><label for="band-city">City:</label><select id="band-city"></select></div></td></tr></tbody></table></div><div class="band-step content-wrapper" id="band-setup-step-1"><h2>set up band: musical experience</h2><table class="band-form-table"><tbody><tr><td id="tdBandGenres" rowspan="3"><div class="field"><label for="band-genres">What genres do you play?</label><div class="band-setup-genres"><table id="band-genres"></table></div></div></td><td><div class="field"><label for="band-type">Type</label><div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="" id="band-type" name="band_type"><option value="">Not Specified</option><option value="virtual">Virtual</option><option value="physical">Physical</option></select></span><span class="selected">Not Specified</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Not Specified</li><li>Virtual</li><li>Physical</li></ul></div></div></div></td></tr><tr><td><div class="field"><label for="band-status">Status</label><div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="" id="band-status" name="band_status"><option value="">Not Specified</option><option value="amateur">Amateur</option><option value="professional">Professional</option></select></span><span class="selected">Not Specified</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Not Specified</li><li>Amateur</li><li>Professional</li></ul></div></div></div></td></tr><tr><td><div class="field"><label for="concert-count">Concert Gigs Played</label><div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="" id="concert-count" name="concert_count"><option value="">Not Specified</option><option value="0">Zero</option><option value="1">Under 10</option><option value="2">10 to 50</option><option value="3">50 to 100</option><option value="4">Over 100</option></select></span><span class="selected">Not Specified</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Not Specified</li><li>Zero</li><li>Under 10</li><li>10 to 50</li><li>50 to 100</li><li>Over 100</li></ul></div></div></div></td></tr></tbody></table></div><div class="band-step content-wrapper" id="band-setup-step-2"><h2>set up band: current interests</h2><table class="band-form-table"><tbody><tr><td><label for="new-member">We want to add a new member &nbsp;<a class="help" help-topic="band-profile-add-new-member">[?]</a></label></td><td class="new-member-dependent"><label for="desired-experience">Desired Experience &nbsp;<a id="choose-desired-experience">select</a></label></td><td class="new-member-dependent"><label for="play-commitment">Play Commitment</label></td><td class="new-member-dependent"><label for="touring-option">Touring Option</label></td></tr><tr><td><div class="radio-field"><input class="iradio-inline dependent-master" id="new-member-yes" name="add_new_members" type="radio" value="yes"><label class="radio-label" for="new-member-yes">Yes</label></div><div class="radio-field"><input class="iradio-inline dependent-master" id="new-member-no" name="add_new_members" type="radio" value="no"><label class="radio-label" for="new-member-no">No</label></div></td><td class="new-member-dependent"><div id="desired-experience-label">None specified</div></td><td class="new-member-dependent"><div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="" id="play-commitment" name="play_commitment"><option value="1">Infrequent</option><option value="2">Once a Week</option><option value="3">2-3 Times Per Week</option><option value="4">4+ Times Per Week</option></select></span><span class="selected">Infrequent</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Infrequent</li><li>Once a Week</li><li>2-3 Times Per Week</li><li>4+ Times Per Week</li></ul></div></div></td><td class="new-member-dependent"><div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="" id="touring-option" name="touring_option"><option value="yes">Yes</option><option value="no">No</option></select></span><span class="selected">Yes</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Yes</li><li>No</li></ul></div></div></td></tr><tr><td><label for="paid-gigs">We want to play paid gigs &nbsp;<a class="help" help-topic="band-profile-play-paid-gigs">[?]</a></label></td><td class="paid-gigs-dependent"><label for="hourly-rate">Hourly Rate:</label></td><td class="paid-gigs-dependent"><label for="gig-minimum">Gig Minimum:</label></td></tr><tr><td><div class="radio-field"><input class="iradio-inline dependent-master" id="paid-gigs-yes" name="paid_gigs" type="radio" value="yes"><label class="radio-label" for="paid-gigs-yes">Yes</label></div><div class="radio-field"><input class="iradio-inline dependent-master" id="paid-gigs-no" name="paid_gigs" type="radio" value="no"><label class="radio-label" for="paid-gigs-no">No</label></div></td><td class="paid-gigs-dependent"><input id="hourly-rate" name="hourly_rate"></td><td class="paid-gigs-dependent"><input id="gig-minimum" name="gig_minimum"></td></tr><tr><td><label for="free-gigs">We want to play free gigs &nbsp;<a class="help" help-topic="band-profile-play-free-gigs">[?]</a></label></td></tr><tr><td><div class="radio-field"><input class="iradio-inline" id="free-gigs-yes" name="free_gigs" type="radio" value="yes"><label class="radio-label" for="free-gigs-yes">Yes</label></div><div class="radio-field"><input class="iradio-inline" id="free-gigs-no" name="free_gigs" type="radio" value="no"><label class="radio-label" for="free-gigs-no">No</label></div></td></tr></tbody></table></div><div class="band-step content-wrapper" id="band-setup-step-3"><h2>set up band: online presence &amp; performance samples</h2><div class="profile-online-sample-controls"><div class="profile-table"><div class="profile-row"><div class="quarter-cell"><label>Website (URL):</label><div class="url_validator presence site_validator"><input class="website" maxlength="4000" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell"><label>SoundCloud (username):</label><div class="soundcloud_validator presence site_validator"><input class="soundcloud-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell"><label>ReverbNation (username):</label><div class="reverbnation_validator presence site_validator"><input class="reverbnation-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell"><label>Bandcamp (username):</label><div class="bandcamp_validator presence site_validator"><input class="bandcamp-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div></div><div class="profile-row"><div class="quarter-cell cell"><label>Fandalism (username):</label><div class="fandalism_validator presence site_validator"><input class="fandalism-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell cell"><label>YouTube&nbsp;<a href="https://support.google.com/youtube/answer/2657968?ref_topic=3024172&amp;hl=en" rel="external">(channel name)</a></label><div class="youtube_validator presence site_validator"><input class="youtube-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell cell"><label>Facebook&nbsp;<a href="https://www.facebook.com/help/174987089221178" rel="external">(page name)</a></label><div class="facebook_validator presence site_validator"><input class="facebook-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell cell"><label>Twitter (username):</label><div class="twitter_validator presence site_validator"><input class="twitter-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div></div><div class="profile-row recordings"><div class="thirds-cell cell"><label>JamKazam Recordings:</label><div class="sample site_validator"><a class="btn-add-jk-recording button-grey">BROWSE</a></div><div class="sample-list" source-type="jamkazam"><div class="empty">No recordings</div></div></div><div class="thirds-cell cell"><label>SoundCloud Recordings (URL):</label><div class="rec_soundcloud_validator sample site_validator"><input class="soundcloud-recording" maxlength="4000" type="text"><a class="btn-add-soundcloud-recording button-grey add-recording-source">ADD</a><span class="spinner-small"></span></div><div class="sample-list" source-type="soundcloud"><div class="empty">No recordings</div></div></div><div class="thirds-cell cell"><label>YouTube Videos (URL):</label><div class="rec_youtube_validator sample site_validator"><input class="youtube-video" maxlength="4000" type="text"><a class="btn-add-youtube-video button-grey add-recording-source">ADD</a><span class="spinner-small"></span></div><div class="sample-list" source-type="youtube"><div class="empty">No recordings</div></div></div></div></div></div></div><div class="band-step content-wrapper" id="band-setup-step-4"><h2>set up band: invite members</h2><br><div id="band-setup-invite-musicians"></div><br><br> If your bandmates are not on JamKazam yet, use any of the options below to invite them to join the service.<br><br><div class="left mr20"><div class="left"><a class="btn-email-invitation"><img align="absmiddle" src="/assets/content/icon_gmail-e38b3123e4c986b56707c11ad0e11e1ad14ed8ed9fc8bcc6c395ff21ca660244.png" width="24" height="24"></a></div><div class="right mt5 ml5">E-mail</div></div><div class="left mr20"><div class="left"><a class="btn-facebook-invitation"><img align="absmiddle" src="/assets/content/icon_facebook-8bfa4cfb93779f15b518fe382dd5c7cb3752cb3ac818d3cf8e777f0ab64150a0.png" width="24" height="24"></a></div><div class="right mt5 ml5">Facebook</div></div><div class="left left"><div class="left"><a class="btn-gmail-invitation"><img align="absmiddle" src="/assets/content/icon_google-de53b44c89f8779e3edf59c054014a809c56a07686712bcd6af3e4e1dcc157d7.png" width="24" height="24"></a></div><div class="right mt5 ml5">Google+</div></div></div><br clear="all"><div class="actions"><a class="nav-button button-grey" id="btn-band-setup-cancel">CANCEL &nbsp;&nbsp;</a><a class="nav-button button-grey hidden" id="btn-band-setup-back">BACK</a><a class="nav-button button-orange" id="btn-band-setup-next">SAVE &amp; NEXT</a></div><div class="clearall"></div><br clear="all"></form></div></div></div><script id="template-band-setup-genres" type="text/template"><tr class="band-setup-genre"><tr><td><input id="{id}" value="{id}" {checked} type="checkbox" />{description}</td></tr></tr></script><script id="template-band-invitation" type="text/template"><div class="invitation" user-id="{{userId}}">{{userName}}<a><img height="13" src="shared/icon_delete_sm.png" width="13" /></a></div></script>
<!-- Band Photo Setup -->
<div layout="screen" layout-id="band/setup/photo" layout-arg="id" class="screen secondary">
<!-- header -->
<div class="content-head">
<!-- icon -->
<div class="content-icon">
<img width="19" height="19" src="/assets/content/icon_bands-b1b10c7374dc9885c781516827ff21c6473fb5db450cb71f100f4c611943cf28.png">
</div>
<!-- section head text -->
<h1>band setup</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- end header -->
<div class="content-body">
<!-- profile scrolling area -->
<div id="band-setup-photo-content-scroller" class="content-scroller">
</div>
</div>
<!-- end content scrolling area -->
</div>
<script type="text/template" id="template-band-setup-photo">
<!-- content wrapper -->
<div class="content-wrapper band-setup-photo">
<br />
<div class="avatar-space"></div>
<form id="band-setup-photo-form">
&nbsp;&nbsp; <a href="#" id="band-setup-photo-upload" class="button-orange">UPLOAD</a>
</form>
<br clear="all" />
<div class="right"><a id="band-setup-photo-cancel" href="#" class="button-grey">CANCEL</a>&nbsp;&nbsp;<a id="band-setup-photo-delete" href="#" class="button-orange">DELETE PHOTO</a>&nbsp;&nbsp;<a id="band-setup-photo-submit" href="#" class="button-orange">UPDATE PHOTO</a></div>
</div>
<!-- end content wrapper -->
<!-- taken from filepicker.io -->
<script type="text/javascript">
(function(a){if(window.filepicker){return}var b=a.createElement("script");b.type="text/javascript";b.async=!0;b.src=("https:"===a.location.protocol?"https:":"http:")+"//api.filepicker.io/v1/filepicker.js?signature={fp_signature}&policy={fp_policy}";var c=a.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);var d={};d._queue=[];var e="pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");var f=function(a,b){return function(){b.push([a,arguments])}};for(var g=0;g<e.length;g++){d[e[g]]=f(e[g],d._queue)}window.filepicker=d})(document);
</script>
<div class="screen secondary" id="jamblaster-screen" layout="screen" layout-id="jamblaster"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_jamtracks-e4d4eaeb260483ce0dcba4d86474d4c6ae685104f78a10f3b2387c89b5b9ac22.png" width="24" height="24"></div><h1>jamblaster</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="JamBlasterScreen" data-react-props="{}" data-react-cache-id="JamBlasterScreen-0"></div></div></div>
<div class="teacher-setup screen secondary" id="teacher-setup-introduction" layout="screen" layout-id="teachers/setup/introduction"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_bands-b1b10c7374dc9885c781516827ff21c6473fb5db450cb71f100f4c611943cf28.png" width="19" height="19"></div><h1 id="teacher-setup-title">my account</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="teacher-setup-form"><div class="teacher-setup-step-0 teacher-step content-wrapper"><h2 class="edit-teacher-header">edit teacher profile: introduction</h2><div data-react-class="TeacherSetupIntroduction" data-react-props="{}" data-react-cache-id="TeacherSetupIntroduction-0"><div class="TeacherSetupIntroduction TeacherSetupComponent"><div class="teacher-big-column left"><div class="teacher-field" name="biography"><label for="teacher-biography">Teacher Bio:</label><textarea class="teacher-biography" name="biography" rows="12" required=""></textarea></div></div><div class="teacher-small-column left"><div class="teacher-field" name="introductory_video"><label for="teacher-introductory-video">Teacher Introductory Video:</label><input class="teacher-introductory-video" name="introductory_video" type="url" maxlength="1024" required="" value=""><em class="enter-url">(enter YouTube URL)</em></div><div class="teacher-field" name="years_teaching"><label for="years-teaching-experience">Years Teaching Experience:</label><input class="years-teaching-experience" name="years_teaching" type="number" min="0" max="99" value=""></div><div class="teacher-field" name="years_playing"><label for="teacher-playing-experience">Years Playing Experience:</label><input class="years-playing-experience" name="years_playing" type="number" min="0" max="99" value=""></div></div><div class="TeacherSetupNav right"><a class="nav-button button-grey">CANCEL</a><a class="nav-button button-orange">SAVE &amp; NEXT</a></div></div></div></div></div></div></div></div>
<div class="teacher-setup screen secondary" id="teacher-setup-basics" layout="screen" layout-id="teachers/setup/basics"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_bands-b1b10c7374dc9885c781516827ff21c6473fb5db450cb71f100f4c611943cf28.png" width="19" height="19"></div><h1 id="teacher-setup-title">my account</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="teacher-setup-form"><div class="teacher-setup-step-1 teacher-step content-wrapper"><h2>edit teacher profile: basics</h2><div data-react-class="TeacherSetupBasics" data-react-props="{}" data-react-cache-id="TeacherSetupBasics-0"></div></div></div></div></div></div>
<div class="teacher-setup screen secondary" id="teacher-setup-experience" layout="screen" layout-id="teachers/setup/experience"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_bands-b1b10c7374dc9885c781516827ff21c6473fb5db450cb71f100f4c611943cf28.png" width="19" height="19"></div><h1 id="teacher-setup-title">my account</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="teacher-setup-form"><div class="teacher-setup-step-2 teacher-step content-wrapper"><h2>edit teacher profile: experience</h2><div data-react-class="TeacherSetupExperience" data-react-props="{}" data-react-cache-id="TeacherSetupExperience-0"></div></div></div></div></div></div>
<div class="teacher-setup screen secondary" id="teacher-setup-pricing" layout="screen" layout-id="teachers/setup/pricing"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_bands-b1b10c7374dc9885c781516827ff21c6473fb5db450cb71f100f4c611943cf28.png" width="19" height="19"></div><h1 id="teacher-setup-title">my account</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="teacher-setup-form"><div class="teacher-setup-step-3 teacher-step content-wrapper"><h2>edit teacher profile: pricing</h2><div data-react-class="TeacherSetupPricing" data-react-props="{}" data-react-cache-id="TeacherSetupPricing-0"></div></div></div></div></div></div>
<div class="screen secondary no-login-required" id="teacher-profile" layout="screen" layout-arg="id" layout-id="profile/teacher"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_profile-d075cf9845a53c61353707eeaf36ce41c7ccf35899b4296521d989dc1d61baa2.png" width="19" height="19"></div><h1 id="teacher-setup-title">teacher profile</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="TeacherProfile" data-react-props="{}" data-react-cache-id="TeacherProfile-0"></div></div></div>
<div class="screen secondary no-login-required" id="teacherSearchOptions" layout="screen" layout-id="jamclass/searchOptions"><div class="content"><div class="content-head"><div class="content-icon"><img height="20" width="27" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="TeacherSearchOptionsScreen" data-react-props="{}" data-react-cache-id="TeacherSearchOptionsScreen-0"></div></div></div></div>
<div class="screen secondary no-login-required" id="teacherSearch" layout="screen" layout-id="teachers/search"><div class="content"><div class="content-head"><div class="content-icon"><img height="20" width="20" src="/assets/content/icon_musicians-20dd752a9d4061ad2d068f8fd0ff4b9cd811aae37e209a84eb414e839a54e6df.png"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="TeacherSearchScreen" data-react-props="{}" data-react-cache-id="TeacherSearchScreen-0"></div></div></div></div>
<div class="screen secondary" id="lesson-book" layout="screen" layout-arg="id" layout-id="jamclass/book-lesson"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png" width="27" height="20"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="BookLesson" data-react-props="{}" data-react-cache-id="BookLesson-0"></div></div></div>
<div class="screen secondary" id="lesson-payment" layout="screen" layout-arg="id" layout-id="jamclass/lesson-payment"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png" width="27" height="20"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="LessonPayment" data-react-props="{}" data-react-cache-id="LessonPayment-0"></div></div></div>
<div class="screen secondary" id="lesson-payment" layout="screen" layout-id="jamclass/lesson-session"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png" width="27" height="20"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="LessonSession" data-react-props="{}" data-react-cache-id="LessonSession-0"></div></div></div>
<div class="screen secondary" id="lesson-booking" layout="screen" layout-arg="id" layout-id="jamclass/lesson-booking"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_musicians-20dd752a9d4061ad2d068f8fd0ff4b9cd811aae37e209a84eb414e839a54e6df.png" width="20" height="20"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="LessonBooking" data-react-props="{}" data-react-cache-id="LessonBooking-0"></div></div></div>
<div class="screen secondary" id="test-drive-selection" layout="screen" layout-arg="id" layout-id="jamclass/test-drive-selection"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_musicians-20dd752a9d4061ad2d068f8fd0ff4b9cd811aae37e209a84eb414e839a54e6df.png" width="20" height="20"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="TestDriveSelection" data-react-props="{}" data-react-cache-id="TestDriveSelection-0"><div class="content-body-scroller"><div class="site-nav"><a href="/client#/home">JamKazam Home</a></div><div class="selection-area"><div class="test-drive-selection-wrapper select-4"><div class="test-drive-selection"><div class="td-header">MOST POPULAR</div><div class="td-content"><div class="avatars"><div class="avatar-header"><div class="avatar"><img src="/assets/shared/avatar_generic.png"></div></div><div class="avatar-header"><div class="avatar"><img src="/assets/shared/avatar_generic.png"></div></div><div class="avatar-header"><div class="avatar"><img src="/assets/shared/avatar_generic.png"></div></div><div class="avatar-header"><div class="avatar"><img src="/assets/shared/avatar_generic.png"></div></div></div><div class="td-msg">GET 4 LESSONS WITH 4 DIFFERENT TEACHERS FOR JUST $12.50 EACH</div><div class="td-desc">You wouldn't marry the first person you date - right? Choosing the right teacher is the most important thing you can do to ensure success and become a better musician. Try 4 different teachers. Then pick the one who is best for YOU!</div></div></div><a class="button-orange select-4 select-package">SELECT</a><div class="price-notice">Just $49.99!</div></div><div class="test-drive-selection-wrapper select-2"><div class="test-drive-selection"><div class="td-header">GREAT VALUE</div><div class="td-content"><div class="avatars"><div class="avatar-header"><div class="avatar"><img src="/assets/shared/avatar_generic.png"></div></div><div class="avatar-header"><div class="avatar"><img src="/assets/shared/avatar_generic.png"></div></div></div><div class="td-msg">GET 2 LESSONS<br>FOR THE PRICE OF 1</div><div class="td-desc">Want to try more than one teacher, but 4 is too many for you? Try two lessons with two different teachers for the price of one lesson. A great value, and a good way to find an excellent teacher!</div></div></div><a class="button-orange select-2 select-package">SELECT</a><div class="price-notice">Just $29.99!</div></div><div class="test-drive-selection-wrapper select-1"><div class="test-drive-selection"><div class="td-header">I'M SURE</div><div class="td-content"><div class="avatars"><div class="avatar-header"><div class="avatar"><img src="/assets/shared/avatar_generic.png"></div></div></div><div class="td-msg">GET 1 HALF-PRICE LESSON<br>TO GET STARTED</div><div class="td-desc">Are you confident you've found the best teacher for you? Then book your first lesson at a terrific value, and get your first lesson scheduled to start learning more today!</div></div></div><a class="button-orange select-1 select-package">SELECT</a><div class="price-notice">Just $14.99!</div></div><br class="clearall"></div></div></div></div></div>
<div class="screen secondary" id="jam-class-student-screen" layout="screen" layout-id="jamclass"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_jamtracks-e4d4eaeb260483ce0dcba4d86474d4c6ae685104f78a10f3b2387c89b5b9ac22.png" width="24" height="24"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="JamClassScreen" data-react-props="{}" data-react-cache-id="JamClassScreen-0"></div></div></div>
<script id="template-feed-music-session" type="text/template">
<div class="feed-entry music-session-history-entry" data-music-session="{{data.feed_item.id}}">
<!-- avatar -->
<div class="avatar-small ib">
<a hoveraction="{{data.feed_item.helpers.artist_hoveraction}}" profileaction="{{data.feed_item.helpers.artist_hoveraction}}" {{data.feed_item.helpers.artist_datakey}}="{{data.feed_item.helpers.artist_id}}">
<img src="{{data.feed_item.helpers.avatar}}">
</a>
</div>
<!-- type and artist -->
<div class="left ml20 w15">
<div class="title">
<a hoveraction="session" href="/sessions/{{data.feed_item.id}}" rel="external" session-id="{{data.feed_item.id}}">SESSION</a>
</div>
<div class="artist">
<a class="artist" hoveraction="{{data.feed_item.helpers.artist_hoveraction}}" profileaction="{{data.feed_item.helpers.artist_hoveraction}}" {{data.feed_item.helpers.artist_datakey}}="{{data.feed_item.helpers.artist_id}}">
{{data.feed_item.helpers.artist_name}}
</a>
</div>
<time class="small created_at timeago" datetime="{{data.feed_item.helpers.utc_created_at}}">{{data.feed_item.started_at}}</time>
</div>
<!-- name and description -->
<div class="left ml20 w30">
<div class="name dotdotdot">
<span class="name-text">{{data.feed_item.helpers.name}}</span>
</div>
<div class="description dotdotdot">
{{data.feed_item.helpers.description}}
</div>
</div>
<!-- timeline and controls -->
<div class="right w40">
<!-- recording play controls -->
<div class="session-controls {{data.status_class}} {{data.mount_class}}" data-music-session="{{data.feed_item.id}}" fan-access="{{data.feed_item.fan_access}}">
<!-- session status -->
<a class="left play-button" href="#">
<img width="20" height="20" class="play-icon" src="/assets/content/icon_playbutton-65307cfdf56216f155371beecf7ad513f61451cc034199a054ae539223ec9244.png" />
{% if(data.feed_item[&#39;has_mount?&#39;]) { %}
{% if(data.feed_item.fan_access) { %}
<audio preload="none">
<source src="{{data.feed_item.active_music_session.mount.url}}" type="{{data.feed_item.active_music_session.mount.mime_type}}">
</audio>
{% } %}
{% } %}
</a>
<span class="session-status">
{{data.feed_item.helpers.status}}
</span>
<!-- current playback time -->
<time class="session-duration tick-duration recording-current duration" data-created-at="{{data.feed_item.helpers.duration_secs}}" duration="{{data.feed_item.helpers.duration}}">
{{data.feed_item.helpers.duration}}
</time>
</div>
<!-- end recording play controls -->
<!-- genre and social -->
<div class="left small">{{data.feed_item.helpers.genre}}</div>
<div class="right small feed-details">
<a class="btn-share" title="Share">
<img height="12" width="7" src="/assets/content/icon_share-af8328dce1d2348c32a92fe82bf9d6cc354ed6b0e9cfbed1883296a9e954bb7a.png" />
</a>
&nbsp;
<span class="play-count">
<span class="plays">
{{data.feed_item.play_count}}
</span>
<img height="12" width="7" title="Play" src="/assets/content/icon_arrow-936ef5b0425319767ca63f9f8d6f47a62809b6ca132aa48b41aa16f7a4eb56d9.png" />
</span>
<span class="comment-count">
<span class="comments">
{{data.feed_item.comment_count}}
</span>
<a class="btn-comment" title="Comment">
<img height="12" width="13" src="/assets/content/icon_comment-3fccc5133d6123d724298ee86d6c66e138577e6dea6a447d12f3c903228a8204.png" />
</a>
</span>
<span class="like-count">
<span class="likes">
{{data.feed_item.like_count}}
</span>
<a class="btn-like" title="Like">
<img height="12" width="12" src="/assets/content/icon_like-6c3a2c33a33a322288f02bae8a3494ae93b390165489400ab26492b0cd7e597d.png" />
</a>
</span>
<a class="details" href="#">Details</a>
<a class="details-arrow arrow-down-orange" href="#"></a>
</div>
<br>
<div class="musician-detail hidden">
<!-- sub-table of musicians -->
<table cellpadding="0" cellspacing="5" class="musicians">
<tbody>
{% _.each(data.feed_item.participants, function(user) { %}
<tr>
<td width="24">
<a class="avatar-tiny" hoveraction="musician" profileaction="musician" user-id="{{user.id}}">
<img src="{{user.helpers.avatar}}">
</a>
</td>
<td>
<a class="musician-name" hoveraction="musician" profileaction="musician" user-id="{{user.id}}">
{{user.first_name}} {{user.last_name}}
</a>
</td>
<td>
<div class="nowrap">
{% if(user.instruments) { %}
{% _.each(_.uniq(user.instruments), function(instrument_id) { %}
<img class="instrument-icon" height="24" instrument-id="{{instrument_id}}" title="{{instrument_id}}" width="24">
{% }) %}
{% } else { %}
<img class="instrument-icon" height="24" instrument-id="default" width="24">
{% } %}
</div>
</td>
</tr>
{% }) %}
</tbody>
</table>
</div>
</div>
<br clear="all">
<br>
</div>
</script>
<script id="template-feed-recording" type="text/template">
<div class="feed-entry recording-entry" data-claimed-recording-id="{{data.candidate_claimed_recording.id}}" data-recording-id="{{data.feed_item.id}}">
<!-- optional checkbox for cehcking -->
<div class="select-box">
<input data-recording-id="{{data.candidate_claimed_recording.id}}" data-recording-title="{{data.feed_item.helpers.name}}" type="checkbox">
</div>
<!-- avatar -->
<div class="avatar-small ib">
<a hoveraction="{{data.feed_item.helpers.artist_hoveraction}}" profileaction="{{data.feed_item.helpers.artist_hoveraction}}" {{data.feed_item.helpers.artist_datakey}}="{{data.feed_item.helpers.artist_id}}">
<img src="{{data.feed_item.helpers.avatar}}">
</a>
</div>
<!-- type and artist -->
<div class="left ml20 w15 title-artist">
<div class="title">
<a class="title-text" hoveraction="recording" href="/recordings/{{data.candidate_claimed_recording.id}}" recording-id="{{data.candidate_claimed_recording.id}}" rel="external">RECORDING</a>
<a class="edit-recording-dialog" href="#">(edit)</a>
</div>
<div class="artist">
<a class="artist" hoveraction="{{data.feed_item.helpers.artist_hoveraction}}" profileaction="{{data.feed_item.helpers.artist_hoveraction}}" {{data.feed_item.helpers.artist_datakey}}="{{data.feed_item.helpers.artist_id}}">
{{data.feed_item.helpers.artist_name}}
</a>
</div>
<time class="small created_at timeago" datetime="{{data.feed_item.helpers.utc_created_at}}">
{{data.feed_item.created_at}}
</time>
</div>
<!-- name and description -->
<div class="left ml20 w30">
<div class="name dotdotdot">
<span class="name-text">{{data.feed_item.helpers.name}}</span>
<span class="is_private">(private)</span>
</div>
<div class="description dotdotdot">
{{data.feed_item.helpers.description}}
</div>
</div>
<!-- timeline and controls -->
<div class="right w40">
<!-- recording play controls -->
<div class="recording-controls mix {{data.feed_item.mix_info.mixStateClass}} {{data.mix_class}}">
<!-- play button -->
<a class="left play-button" href="#">
<img width="20" height="20" class="play-icon" src="/assets/content/icon_playbutton-65307cfdf56216f155371beecf7ad513f61451cc034199a054ae539223ec9244.png" />
{% if(data.feed_item[&#39;has_mix?&#39;]) { %}
<audio preload="none">
<source src="{{data.candidate_claimed_recording.mix.mp3_url}}" type="audio/mpeg">
<source src="{{data.candidate_claimed_recording.mix.ogg_url}}" type="audio/ogg">
</audio>
{% } %}
</a>
<div class="recording-status">
<span class="status-text">
{{data.feed_item.mix_info.mixStateMsg}}
<div class="help-launcher">?</div>
</span>
<div class="recording-duration">
<time class="tick-duration duration" duration="{{data.feed_item.duration}}">
{{data.feed_item.duration}}
</time>
</div>
</div>
<!-- playback position -->
<div class="recording-position">
<!-- start time -->
<div class="recording-time">0:00</div>
<!-- playback background &amp; slider -->
<div class="recording-playback">
<div class="recording-slider">
<img width="5" height="16" src="/assets/content/slider_playcontrols-3f1e871ce58be5a507eac6dfa9048016adef4c6061cb342f7d72df328e7ef4af.png" />
</div>
</div>
<!-- end time -->
<div class="recording-time recording-duration">
<time class="tick-duration duration" duration="{{data.feed_item.duration}}">
{{data.feed_item.duration}}
</time>
</div>
</div>
<!-- end playback position -->
<!-- current playback time -->
<div class="recording-current">
0:00
</div>
</div>
<!-- end recording play controls -->
<!-- genre and social -->
<div class="left small genre">{{data.feed_item.helpers.genre}}</div>
<div class="right small feed-details">
<a class="btn-share" title="Share">
<img height="12" width="7" src="/assets/content/icon_share-af8328dce1d2348c32a92fe82bf9d6cc354ed6b0e9cfbed1883296a9e954bb7a.png" />
</a>
&nbsp;
<span class="play-count">
<span class="plays">
{{data.feed_item.play_count}}
</span>
<img height="12" width="7" title="Play" src="/assets/content/icon_arrow-936ef5b0425319767ca63f9f8d6f47a62809b6ca132aa48b41aa16f7a4eb56d9.png" />
</span>
<span class="comment-count">
<span class="comments">
{{data.feed_item.comment_count}}
</span>
<a class="btn-comment" title="Comment">
<img height="12" width="13" src="/assets/content/icon_comment-3fccc5133d6123d724298ee86d6c66e138577e6dea6a447d12f3c903228a8204.png" />
</a>
</span>
<span class="like-count">
<span class="likes">
{{data.feed_item.like_count}}
</span>
<a class="btn-like" title="Like">
<img height="12" width="12" src="/assets/content/icon_like-6c3a2c33a33a322288f02bae8a3494ae93b390165489400ab26492b0cd7e597d.png" />
</a>
</span>
<a class="details" href="#">Details</a>
<a class="details-arrow arrow-down-orange" href="#"></a>
</div>
<br>
<div class="musician-detail hidden">
<!-- sub-table of musicians -->
<table cellpadding="0" cellspacing="5" class="musicians">
<tbody>
{% _.each(data.feed_item.grouped_tracks, function(track) { %}
<tr>
<td width="24">
<a class="avatar-tiny" hoveraction="musician" profileaction="musician" user-id="{{track.musician.id}}">
<img src="{{track.musician.helpers.avatar}}">
</a>
</td>
<td>
<a class="musician-name" hoveraction="musician" profileaction="musician" user-id="{{track.musician.id}}">
{{track.musician.first_name}} {{track.musician.last_name}}
</a>
</td>
<td>
<div class="nowrap">
{% if(track.instrument_ids) { %}
{% _.each(_.uniq(track.instrument_ids), function(instrument_id) { %}
<img class="instrument-icon" height="24" instrument-id="{{instrument_id}}" title="{{instrument_id}}" width="24">
{% }) %}
{% } else { %}
<img class="instrument-icon" height="24" instrument-id="default" width="24">
{% } %}
</div>
</td>
</tr>
{% }) %}
</tbody>
</table>
</div>
<div class="video-wrapper hidden">
<div class="video-container"></div>
</div>
</div>
<br clear="all">
<br>
</div>
</script>
<div class="screen secondary no-login-required" id="jamtrackSearch" layout="screen" layout-id="jamtrack/search"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_jamtracks-e4d4eaeb260483ce0dcba4d86474d4c6ae685104f78a10f3b2387c89b5b9ac22.png"></div><h1>search jamtracks</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="JamTrackSearchScreen" data-react-props="{}" data-react-cache-id="JamTrackSearchScreen-0"></div></div></div></div>
<div class="screen secondary no-login-required" id="jamtrackFilter" layout="screen" layout-id="jamtrack/filter"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_jamtracks-e4d4eaeb260483ce0dcba4d86474d4c6ae685104f78a10f3b2387c89b5b9ac22.png"></div><h1>search jamtracks</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><form id="jamtrack-filter-form" class="inner-content" action="" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off"><!-- @begin web_filter -->
<div id="session-controls" class="jamtrack-filter filter-head"><div class="filter-element wrapper"></div><div class="filter-element wrapper"><!-- -if (:band==filter_label || :jamtrack==filter_label) -->
<!-- =content_tag(:div, 'Genre:', :class => 'filter-element desc') -->
<!-- =select_tag(&quot;jamtrack_genre&quot;, / options_for_select([[&#39;Any&#39;, &#39;&#39;]].concat(JamRuby::Genre.all.collect { |ii| [ii.description, ii.id] })), {:class =&gt; &#39;easydropdown&#39;}) -->
<div class="filter-element desc">Filter JamTracks By:</div>
<div class="dropdown-wrapper easydropdown-wrapper scrollable"><div class="dropdown easydropdown scrollable"><span class="old"><select name="jamtrack_genre" id="jamtrack_genre" class=""><option value="">Any Genre</option>
<option value="acapella">A Cappella</option>
<option value="african">African</option>
<option value="alternative rock">Alternative Rock</option>
<option value="ambient">Ambient</option>
<option value="americana">Americana</option>
<option value="asian">Asian</option>
<option value="avante-garde">Avante-Garde</option>
<option value="bluegrass">Bluegrass</option>
<option value="blues">Blues</option>
<option value="breakbeat">Breakbeat</option>
<option value="celtic">Celtic</option>
<option value="classical">Classical</option>
<option value="country">Country</option>
<option value="creole">Creole</option>
<option value="dance">Dance</option>
<option value="disco">Disco</option>
<option value="downtempo">Downtempo</option>
<option value="drum &amp; bass">Drum &amp; Bass</option>
<option value="electronic">Electronic</option>
<option value="folk">Folk</option>
<option value="funk">Funk</option>
<option value="hard rock">Hard Rock</option>
<option value="hip hop">Hip Hop</option>
<option value="holiday">Holiday</option>
<option value="house">House</option>
<option value="industrial">Industrial</option>
<option value="jazz">Jazz</option>
<option value="kids">Kids</option>
<option value="latin">Latin</option>
<option value="metal">Metal</option>
<option value="musical">Musical</option>
<option value="oldies">Oldies</option>
<option value="other">Other</option>
<option value="pop">Pop</option>
<option value="psychedelic">Psychedelic</option>
<option value="punk">Punk</option>
<option value="rap">Rap</option>
<option value="r&amp;b">R&amp;B</option>
<option value="reggae">Reggae</option>
<option value="religious">Religious</option>
<option value="rock">Rock</option>
<option value="ska">Ska</option>
<option value="soft rock">Soft Rock</option>
<option value="soul">Soul</option>
<option value="techno">Techno</option>
<option value="traditional">Traditional</option>
<option value="trance">Trance</option>
<option value="tv &amp; movie soundtrack">TV &amp; Movie Soundtrack</option>
<option value="world">World</option></select></span><span class="selected">Any Genre</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Any Genre</li><li>A Cappella</li><li>African</li><li>Alternative Rock</li><li>Ambient</li><li>Americana</li><li>Asian</li><li>Avante-Garde</li><li>Bluegrass</li><li>Blues</li><li>Breakbeat</li><li>Celtic</li><li>Classical</li><li>Country</li><li>Creole</li><li>Dance</li><li>Disco</li><li>Downtempo</li><li>Drum &amp; Bass</li><li>Electronic</li><li>Folk</li><li>Funk</li><li>Hard Rock</li><li>Hip Hop</li><li>Holiday</li><li>House</li><li>Industrial</li><li>Jazz</li><li>Kids</li><li>Latin</li><li>Metal</li><li>Musical</li><li>Oldies</li><li>Other</li><li>Pop</li><li>Psychedelic</li><li>Punk</li><li>Rap</li><li>R&amp;B</li><li>Reggae</li><li>Religious</li><li>Rock</li><li>Ska</li><li>Soft Rock</li><li>Soul</li><li>Techno</li><li>Traditional</li><li>Trance</li><li>TV &amp; Movie Soundtrack</li><li>World</li></ul></div></div>
</div><div class="filter-element wrapper"><!-- =content_tag(:div, 'Instrument:', :class => 'filter-element desc instrument-selector') -->
<div class="dropdown-wrapper easydropdown-wrapper scrollable"><div class="dropdown easydropdown scrollable"><span class="old"><select name="jamtrack_instrument" id="jamtrack_instrument" class=""><option value="">Any Instrument</option>
<option value="accordion">Accordion</option>
<option value="acoustic guitar">Acoustic Guitar</option>
<option value="bagpipes">Bagpipes</option>
<option value="banjo">Banjo</option>
<option value="bass guitar">Bass Guitar</option>
<option value="bassoon">Bassoon</option>
<option value="cello">Cello</option>
<option value="charango">Charango</option>
<option value="clarinet">Clarinet</option>
<option value="computer">Computer</option>
<option value="dobro">Dobro</option>
<option value="double bass">Double Bass</option>
<option value="drums">Drums</option>
<option value="electric guitar">Electric Guitar</option>
<option value="euphonium">Euphonium</option>
<option value="flugelhorn">Flugelhorn</option>
<option value="flute">Flute</option>
<option value="french horn">French Horn</option>
<option value="glockenspiel">Glockenspiel</option>
<option value="harmonica">Harmonica</option>
<option value="harp">Harp</option>
<option value="keyboard">Keyboard</option>
<option value="mandolin">Mandolin</option>
<option value="oboe">Oboe</option>
<option value="orchestra">Orchestra</option>
<option value="other">Other</option>
<option value="percussion">Percussion</option>
<option value="piano">Piano</option>
<option value="piccolo">Piccolo</option>
<option value="saxophone">Saxophone</option>
<option value="sitar">Sitar</option>
<option value="steel guitar">Steel Guitar</option>
<option value="theremin">Theremin</option>
<option value="timpani">Timpani</option>
<option value="trombone">Trombone</option>
<option value="trumpet">Trumpet</option>
<option value="tuba">Tuba</option>
<option value="ukulele">Ukulele</option>
<option value="viola">Viola</option>
<option value="violin">Violin</option>
<option value="vocoder">Vocoder</option>
<option value="voice">Voice</option></select></span><span class="selected">Any Instrument</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Any Instrument</li><li>Accordion</li><li>Acoustic Guitar</li><li>Bagpipes</li><li>Banjo</li><li>Bass Guitar</li><li>Bassoon</li><li>Cello</li><li>Charango</li><li>Clarinet</li><li>Computer</li><li>Dobro</li><li>Double Bass</li><li>Drums</li><li>Electric Guitar</li><li>Euphonium</li><li>Flugelhorn</li><li>Flute</li><li>French Horn</li><li>Glockenspiel</li><li>Harmonica</li><li>Harp</li><li>Keyboard</li><li>Mandolin</li><li>Oboe</li><li>Orchestra</li><li>Other</li><li>Percussion</li><li>Piano</li><li>Piccolo</li><li>Saxophone</li><li>Sitar</li><li>Steel Guitar</li><li>Theremin</li><li>Timpani</li><li>Trombone</li><li>Trumpet</li><li>Tuba</li><li>Ukulele</li><li>Viola</li><li>Violin</li><li>Vocoder</li><li>Voice</li></ul></div></div>
</div><div class="filter-element wrapper"><div class="download-all">
Download JamTracks catalog
<br>
<div data-react-class="JamTrackCSVLink" data-react-props="{}" data-react-cache-id="JamTrackCSVLink-0"><a href="https://s3.amazonaws.com/jamkazam-public/public/lists/all-jamkazam-jamtracks.csv">as a CSV file</a></div>
or
<div data-react-class="JamTrackPdfLink" data-react-props="{}" data-react-cache-id="JamTrackPdfLink-0"><a href="https://s3.amazonaws.com/jamkazam-public/public/lists/all-jamkazam-jamtracks.pdf">as a PDF file</a></div>
</div>
</div><div class="filter-element wrapper"><!-- =content_tag(:div, 'Availability:', :class => 'filter-element desc') -->
<!-- =select_tag(&quot;jamtrack_availability&quot;, options_for_select([[&#39;Any Availability&#39;, &#39;&#39;]].concat(JamRuby::JamTrack::SALES_REGION), &#39;&#39;), {:class =&gt; &quot;easydropdown&quot;}) -->
</div></div><div class="filter-body"><div data-react-class="JamTrackFilterScreen" data-react-props="{}" data-react-cache-id="JamTrackFilterScreen-0"><div class="JamTrackFilterScreen"><div class="content-body-scroller"><div><h2 class="jamtrack-results-header">search results: 0 jamtracks <a class="back-to-jamtracks-home" href="/client#/jamtrack">back to jamtracks home</a></h2><table class="generaltable jamtrack-table"><thead><tr><th class="jamtrack-detail">JAMTRACK</th><th class="jamtrack-tracks">TRACKS INCLUDED / PREVIEW</th><th class="jamtrack-shop">SHOP</th></tr></thead><tbody class="jamtrack-content"></tbody></table><div class="end-of-jamtrack-list end-of-list">No more JamTracks</div></div></div></div></div></div></form></div></div></div>
<div class="screen secondary no-login-required" id="jamtrackLanding" layout="screen" layout-id="jamtrack"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_jamtracks-e4d4eaeb260483ce0dcba4d86474d4c6ae685104f78a10f3b2387c89b5b9ac22.png"></div><h1>jamtracks </h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="JamTrackLandingScreen" data-react-props="{}" data-react-cache-id="JamTrackLandingScreen-0"></div></div></div></div>
<div class="screen secondary" layout="screen" layout-id="paypal/confirm"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_jamtracks-e4d4eaeb260483ce0dcba4d86474d4c6ae685104f78a10f3b2387c89b5b9ac22.png"></div><h1>confirm payment</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="PayPalConfirmationScreen" data-react-props="{}" data-react-cache-id="PayPalConfirmationScreen-0"><div class="PayPalConfirmationScreen"><div class="content-body-scroller"><div><h2 class="confirm-header">Confirm PayPal Payment</h2><p>You have not yet made a payment via PayPal. Please review your purchase and confirm or cancel.</p><div class="controls"><a href="#" class="button-orange place-order-btn">CONFIRM PURCHASE WITH PAYPAL</a><a href="#" class="button-grey cancel">CANCEL</a><div class="clearall"></div></div><div class="shopping-cart-contents"><div class="order-items-page"><div class="cart-items"><div class="cart-item-caption"><span>YOUR ORDER INCLUDES:</span></div><div class="cart-item-price"><span>PRICE</span></div><div class="cart-item-quantity"><span>QUANTITY</span></div><div class="clearall"></div><div class="loading-indicator">Loading...</div><div class="clearall"></div></div></div></div><div class="controls bottom"><a href="#" class="button-orange place-order-btn">CONFIRM PURCHASE WITH PAYPAL</a><a href="#" class="button-grey cancel">CANCEL</a><div class="clearall"></div></div></div></div></div></div></div></div></div>
<div class="screen secondary no-login-required" id="shoppingCartScreen" layout="screen" layout-id="shoppingCart">
<div class="content">
<div class="content-head">
<div class="content-icon"><img height="19" width="19" src="/assets/content/icon_shopping_cart-53d4b7e63e9db21e7813b467136ad99f6df1140a8f7ac60b9c05295c33f37f86.png"></div>
<h1>shopping cart</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<div class="content-body-scroller">
<div class="shopping-cart-content"></div>
</div>
</div>
</div>
</div>
<script id="template-shopping-cart-header" type="text/template">
<div class="checkout-image"><img height="32" src="/assets/content/checkmark-5b49dddd8ff5330ffdc94dfaa90b8a41a49b68d93ff59373cc249b6506a0d94b.png" /></div>
<div class="checkout-desc">
<div>
1 item added to shopping cart
</div>
<div>
{{data.product_info.sale_display}}
</div>
{% if (data.any_in_us) { %}
<div class="note">
Note: You must be in the United States to purchase this {{data.type}} due to licensing constraints.
</div>
{% } %}
</div>
<div class="clearall"></div>
</script>
<script id="template-shopping-cart-body" type="text/template">
<table class="cart-items">
<thead>
<tr>
<th class="cart-item-caption">
YOUR SHOPPING CART NOW CONTAINS
</th>
<th class="cart-item-price">
PRICE
</th>
<th class="cart-item-quantity">
QUANTITY
</th>
</tr>
</thead>
<tbody>
{% if (data.carts.length == 0) { %}
<tr>
<td class="no-cart-items" colspan="4">Nothing in cart</td>
</tr>
{% } %}
{% _.each(data.carts, function(cart, index) { %}
<tr cart-id="{{cart.id}}" class="cart-item">
<td class="cart-item-caption">
{{cart.product_info.sale_display}}
</td>
<td class="cart-item-price">
<span class="cart-price">$ {{Number(cart.product_info.real_price).toFixed(2)}}</span>
{% if(index == data.carts.length - 1) { %}
<div class="shopping-sub-total">
<span class="sub-total-text">Subtotal:</span>
<span class="sub-total-value">$ {{data.sub_total.toFixed(2)}}</span>
</div>
</td>
{% } %}
<td class="cart-item-quantity">
<span class="cart-value">{{cart.quantity}}</span>
<a cart-id="{{cart.id}}" class="remove-cart" href="#">delete</a>
</td>
</tr>
{% }); %}
</tbody>
</table>
<div class="clearall"></div>
<div class="right actions">
<a class="button-grey" href="#">HELP</a>
<a class="button-orange continue-shopping" href="/client#/jamtrack/search">CONTINUE SHOPPING</a>
<a class="button-orange proceed-checkout" href="#">PROCEED TO CHECKOUT</a>
</div>
<div class="clearall"></div>
</script>
<div class="screen secondary no-login-required" id="checkoutSignInScreen" layout="screen" layout-id="checkoutSignin"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_shopping_cart-53d4b7e63e9db21e7813b467136ad99f6df1140a8f7ac60b9c05295c33f37f86.png"></div><h1>check out</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="checkout-signin"><div class="checkout-navigation-bar"></div><div class="content-holder"><div class="already-signed-in"><h3>YOU ARE ALREADY LOGGED IN</h3><p class="carry-on-prompt">You can move on to the next step of checkout.</p><div class="actions"><a class="btnNext button-orange">NEXT</a></div></div><div class="left-side"><h3>ALREADY A MEMBER OF THE JAMKAZAM COMMUNITY?</h3><div class="left-side-content"><div class="signin-form"><div class="signin-prompt">Sign in using your email address:</div><div class="clearall"></div><form class="signin-form"><div class="input-elements"><div class="out"><label class="inline">Email:</label><div class="email field"><input autofocus="true" name="email" type="text"></div></div><div class="out"><label class="inline">Password:</label><div class="password field"><input autofocus="true" name="password" type="password"></div></div><div class="login-error-msg">Invalid login</div></div><br clear="all"><div class="actions"><small><a class="forgot-password" href="/request_reset_password">Forgot Password?</a></small><a class="button-orange signin-submit" href="#">SIGN IN</a></div></form></div><p class="facebook-prompt">Or sign in using Facebook:</p><a class="signin-facebook" href="/auth/facebook"><img width="249" height="46" src="/assets/content/button_facebook_signin-7f094bf735f0c3e194a0d71d6be04b414056e0eed0cd618b37faf2e40b0b87fb.png"></a></div></div><div class="right-side"><h3>NOT A MEMBER?</h3><p class="signup-later-prompt">Click the NEXT button below to enter the address and payment information for your purchase.</p><div class="actions"><a class="btnNext button-orange">NEXT</a></div></div></div></div></div></div></div></div><script id="template-checkout-navigation" type="text/template"><div class="checkout-navigation"><div class="purchases-disabled {{data.purchases_disable_class}}">Purchases are currently disabled. Please check back soon!</div><div class="nav-signin">{% if (data.current == 1) { %}<div class="nav-text selected"><div class="badge-number">1</div>Sign In</div>{% } else { %}<div class="nav-text"><div class="badge-number disabled">1</div>Sign In</div>{% } %}<div class="clearall"></div></div><div class="nav-payment-info">{% if (data.current == 2) { %}<div class="nav-text selected"><div class="badge-number">2</div>Address & Payment</div>{% } else { %}<div class="nav-text"><div class="badge-number disabled">2</div>Address & Payment</div>{% } %}<div class="clearall"></div></div><div class="nav-place-order">{% if (data.current == 3) { %}<div class="nav-text selected"><div class="badge-number">3</div>Place Order</div>{% } else { %}<div class="nav-text"><div class="badge-number disabled">3</div>Place Order</div>{% } %}</div><div class="clearall"></div></div></script>
<div class="screen secondary no-login-required" id="checkoutPaymentScreen" layout="screen" layout-id="checkoutPayment"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_shopping_cart-53d4b7e63e9db21e7813b467136ad99f6df1140a8f7ac60b9c05295c33f37f86.png"></div><h1>check out</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="content-wrapper"><div class="checkout-navigation-bar"></div><div class="payment-wrapper"><p class="payment-prompt free-jamtrack hidden">Please enter your billing address and payment information below.&nbsp;You will not be billed for any charges of any kind without your explicit authorization.&nbsp;There are no "hidden" charges or fees, thank you!</p><p class="payment-prompt no-free-jamtrack hidden">Please enter your billing address and payment information below.&nbsp;</p><p class="payment-prompt already-entered hidden">You recently entered payment info successfully. If you want to change your payment info, click the CHANGE PAYMENT INFO button. Otherwise, click the NEXT button to checkout.<span class="change-payment-info-holder"><a class="button-orange change-payment-info" href="#">CHANGE PAYMENT INFO</a></span></p><form class="hidden payment-info" id="checkout-payment-info"><div class="row first"><div class="left-side"><div class="billing-address"><h2 class="billing-caption">BILLING ADDRESS</h2><div class="field" id="divBillingFirstName"><div class="billing-label"><label for="billing-first-name">First Name: *</label></div><div class="billing-value"><input id="billing-first-name" type="text"></div><div class="clearall"></div></div><div class="field" id="divBillingLastName"><div class="billing-label"><label for="billing-last-name">Last Name: *</label></div><div class="billing-value"><input id="billing-last-name" type="text"></div><div class="clearall"></div></div><div class="field" id="divBillingAddress1"><div class="billing-label"><label for="billing-address1">Address 1: *</label></div><div class="billing-value"><input id="billing-address1" type="text"></div><div class="clearall"></div></div><div class="field" id="divBillingAddress2"><div class="billing-label"><label for="billing-address2">Address 2:</label></div><div class="billing-value"><input id="billing-address2" type="text"></div><div class="clearall"></div></div><div class="field" id="divBillingCity"><div class="billing-label"><label for="billing-city">City: *</label></div><div class="billing-value"><input id="billing-city" type="text"></div><div class="clearall"></div></div><div class="field" id="divBillingState"><div class="billing-label"><label for="billing-state">State/Region: *</label></div><div class="billing-value"><input id="billing-state" type="text"></div><div class="clearall"></div></div><div class="field" id="divBillingZip"><div class="billing-label"><label for="billing-zip">Zip: *</label></div><div class="billing-value"><input id="billing-zip" type="text"></div><div class="clearall"></div></div><div class="field" id="divBillingCountry"><div class="billing-label"><label for="billing-country">Country: *</label></div><div class="billing-value"><select id="billing-country"><option value="US">US</option></select></div><div class="clearall"></div></div></div></div><div class="right-side"><div class="payment-method"><h2 class="payment-method-caption">PAYMENT METHOD</h2><div class="new-card-info"><div class="field hidden" id="divCardName"><div class="card-label"><label for="card-name">Name of Card: *</label></div><div class="card-value"><input id="card-name" type="text"></div><div class="clearall"></div></div><div class="field" id="divCardNumber"><div class="card-label"><label for="card-number">Card Number: *</label></div><div class="card-value"><input id="card-number" type="text"></div><div class="clearall"></div></div><div class="field" id="divCardExpiry"><div class="card-label">Expiration Date: *</div><div class="card-value"><select id="card_expire-date_2i" name="card[expire-date(2i)]">
<option value="1" selected="selected">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<input type="hidden" id="card_expire-date_3i" name="card[expire-date(3i)]" value="1" autocomplete="off">
<select id="card_expire-date_1i" name="card[expire-date(1i)]">
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
<option value="2038">2038</option>
<option value="2039">2039</option>
<option value="2040">2040</option>
<option value="2041">2041</option>
<option value="2042">2042</option>
<option value="2043">2043</option>
<option value="2044">2044</option>
</select>
</div><div class="clearall"></div></div><div class="field" id="divCardVerify"><div class="card-label"><label for="card-verify">CVV Code: *<div class="hint cvv">(back of card)</div></label></div><div class="card-value"><input id="card-verify" type="text"></div><div class="clearall"></div></div></div><div class="reuse-existing-card"><div class="card-label"></div><div class="card-value"><div class="reuse-existing-card-checkbox ichecbuttons"><input checked="checked" id="reuse-existing-card" name="reuse-existing-card" type="checkbox"></div><div class="reuse-existing-card-helper"><label for="reuse-existing-card">Use card ending in&nbsp;<span class="existing-card-ends-with"></span></label></div><div class="clearall"></div></div></div><div class="card-label"></div><div class="card-value"><div class="save-card-checkbox ichecbuttons"><input checked="checked" id="save-card" name="save-card" type="checkbox"></div><div class="divSaveCardHelper"><label for="save-card">Save card for future use</label></div><div class="clearall"></div></div><div class="or-text">or instead use:</div><div class="paypal-region"><a data-paypal-button="true" href="/paypal/checkout/start"><img alt="PayPal Checkout" src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/gold-pill-paypalcheckout-34px.png"></a><a></a></div><div class="clearall"></div></div></div><div class="clearall"></div></div><div class="row second"><left-side class="hidden"><div class="shipping-address"><h2 class="shipping-address-label">SHIPPING ADDRESS</h2><div class="shipping-as-billing ichecbuttons"><input checked="checked" id="shipping-as-billing" name="shipping-as-billing" type="checkbox"></div><div class="divBillingHelper"><label for="shipping-as-billing">Same as billing address</label></div><div class="clearall"></div><div class="shipping-address-detail hidden"><div class="field" id="divShippingFirstName"><div class="shipping-label"><label for="shipping-first-name">First Name:</label></div><div class="shipping-value"><input id="shipping-first-name" type="text"></div><div class="clearall"></div></div><div class="field" id="divShippingLastName"><div class="shipping-label"><label for="shipping-last-name">Last Name:</label></div><div class="shipping-value"><input id="shipping-last-name" type="text"></div><div class="clearall"></div></div><div class="field" id="divShippingAddress1"><div class="shipping-label"><label for="shipping-address1">Address 1:</label></div><div class="shipping-value"><input id="shipping-address1" type="text"></div><div class="clearall"></div></div><div class="field" id="divShippingAddress2"><div class="shipping-label"><label for="shipping-address2">Address 2:</label></div><div class="shipping-value"><input id="shipping-address2" type="text"></div><div class="clearall"></div></div><div class="field" id="divShippingCity"><div class="shipping-label"><label for="shipping-city">City:</label></div><div class="shipping-value"><input id="shipping-city" type="text"></div><div class="clearall"></div></div><div class="field" id="divShippingState"><div class="shipping-label"><label for="shipping-state">State/Region:</label></div><div class="shipping-value"><input id="shipping-state" type="text"></div><div class="clearall"></div></div><div class="field" id="divShippingZip"><div class="shipping-label"><label for="shipping-zip">Zip:</label></div><div class="shipping-value"><input id="shipping-zip" type="text"></div><div class="clearall"></div></div><div class="field" id="divShippingCountry"><div class="shipping-label"><label for="shipping-country">Country:</label></div><div class="shipping-value"><input id="shipping-country" type="text"></div><div class="clearall"></div></div></div></div></left-side><div class="right-side"><div class="jamkazam-account-signup"><h2 class="jamkazam-account-caption">JAMKAZAM ACCOUNT</h2><div class="field" id="divJamKazamEmail"><div class="account-label"><label for="email">Email Address: *</label></div><div class="account-value"><input id="checkout-signup-email" name="email" type="text"></div><div class="clearall"></div></div><div class="field" id="divJamKazamPassword"><div class="account-label"><label for="password">Password: *</label></div><div class="account-value"><input id="checkout-signup-password" name="password" type="password"></div><div class="clearall"></div></div><div class="field" id="divJamKazamTos"><div class="terms-of-service ichecbuttons"><input name="terms-of-service" type="checkbox"><div class="terms-of-service-label-holder"><label for="terms-of-service">I have read and agree to the JamKazam&nbsp;<a href="/corp/terms" rel="external">terms of service</a></label></div><div class="clearall"></div></div></div></div></div><div class="clearall"></div></div><div class="row third hidden" id="payment_error"></div></form><div class="clearall"><div class="action-bar"><div class="right"><a class="button-grey" href="#" id="payment-info-help">HELP</a><a class="button-orange" href="#" id="payment-info-next">NEXT</a></div><div class="clearall"></div></div></div></div></div></div></div></div></div>
<div class="screen secondary" id="checkoutOrderScreen" layout="screen" layout-id="checkoutOrder"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_shopping_cart-53d4b7e63e9db21e7813b467136ad99f6df1140a8f7ac60b9c05295c33f37f86.png"></div><h1>check out</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="content-wrapper"><div class="checkout-navigation-bar"></div><div class="order-panel"><div class="payment-wrapper"><p class="order-prompt hidden">Please review your order, and if everything looks correct, click the PLACE YOUR ORDER button. Thank you!</p><p class="empty-cart-prompt hidden">You have nothing in your cart. You can go browse for JamTracks&nbsp;<a href="/client#/jamtrack/search">here</a>.</p><p class="no-account-info-prompt hidden">You have no billing info. Please go back to the&nbsp;<a href="/client#/checkoutPayment">Payment</a>&nbsp;page to enter your billing info.</p><div class="order-content"></div><div class="error hidden" id="order_error"></div><div class="clearall"><div class="action-bar"><div class="right"><a class="button-grey" href="#" id="checkout-info-help">HELP</a><a class="button-grey back" href="#">BACK</a><a class="button-orange place-order" href="#">PLACE YOUR ORDER</a></div><div class="clearall"></div></div></div></div></div></div></div></div></div></div><script id="template-order-content" type="text/template"><div class="order-left-page"><div class="payment-info-page"><h2>ADDRESS & PAYMENT</h2><div class="address-info"><div class="billing-address"><div class="billing-caption">BILLING ADDRESS:<a class="change-payment-info" href="#">change</a></div><div class="clearall"></div><div class="billing-info-item">{{data.billing_info.address1}}</div><div class="billing-info-item">{{data.billing_info.address2}}</div><div class="billing-info-item">{{data.billing_info.city}}, {{data.billing_info.state}} {{data.billing_info.zip}}<span class="country">{{data.billing_info.country}}</span></div></div><div class="shipping-address"><div class="billing-caption">SHIPPING ADDRESS:<a class="change-payment-info" href="#">change</a></div><div class="clearall"></div>{% if (data.shipping_as_billing) { %}<div class="billing-info-item">Same as billing address</div>{% } else { %}<div class="billing-info-item">{{data.shipping_info.address1}}</div><div class="billing-info-item">{{data.shipping_info.address2}}</div><div class="billing-info-item">{{data.shipping_info.city}}, {{data.shipping_info.state}} {{data.shipping_info.zip}}<span class="country">{{data.shipping_info.country}}</span></div>{% } %}<br /></div></div><div class="payment-method-info"><div class="billing-caption">PAYMENT METHOD:<a class="change-payment-info" href="#">change</a></div><div class="clearall"></div>Credit card ending {{data.billing_info.last_four}}</div><div class="clearall"></div></div><div class="order-items-page"><h2>ORDER DETAILS</h2><div class="cart-items"><div class="cart-item-caption"><span>YOUR ORDER INCLUDES:</span></div><div class="cart-item-price"><span>PRICE</span></div><div class="cart-item-quantity"><span>QUANTITY</span></div><div class="clearall"></div>{% if (data.carts.length == 0) { %}<div class="no-cart-items">You have no orders now.</div>{% } %}{% _.each(data.carts, function(cart) { %}<div cart-id="{{cart.id}}" class="cart-item"><div class="cart-item-caption">{{cart.product_info.sale_display}}{% if (cart.product_info.free) { %}<span class="first-one-free">(first one free)</span>{% } %}</div><div class="cart-item-price">$ {{Number(cart.product_info.real_price).toFixed(2)}}</div><div class="cart-item-quantity">{{cart.quantity}}</div><div class="clearall"></div></div>{% }); %}</div></div><div class="clearall"></div></div><div class="order-right-page"><h2>PLACE ORDER</h2><div class="recurly-data hidden"><div class="plan jamtrack" data-plan-code="{{gon.recurly_tax_estimate_jam_track_plan}}"><input data-recurly="plan" type="text" value="{{gon.recurly_tax_estimate_jam_track_plan}}" /><input data-recurly="currency" type="text" value="USD" /><input data-recurly="postal_code" type="text" value="{{data.billing_info.zip}}" /><input data-recurly="country" type="text" value="{{data.billing_info.country}}" /></div></div><div class="order-summary"><div class="place-order-center"><a class="button-orange place-order" href="#">PLACE YOUR ORDER</a></div><div class="clearall"></div><div class="billing-caption">ORDER SUMMARY:</div><div class="order-items-header order-total">Order items:</div><div class="order-items-value order-total">{{data.sub_total}}</div><div class="clearall"></div><div class="order-items-header shipping-handling">Shipping & handling:</div><div class="order-items-value shipping-handling">{{data.shipping_handling}}</div><div class="clearall"></div><div class="line"></div><div class="order-items-header sub-total">Total before tax:</div><div class="order-items-value sub-total">{{data.sub_total}}</div><div class="clearall"></div><div class="order-items-header taxes">Estimated taxes:</div><div class="order-items-value taxes">{{data.taxes}}</div><div class="clearall"></div><div class="line"></div><div class="order-items-header grand-total">Order total:</div><div class="order-items-value grand-total">{{data.grand_total}}</div><div class="clearall"></div><div class="order-help"><span>By placing your order, you agree to JamKazam's</span> <a href="/corp/terms" rel="external">terms of service</a><span>, including the</span> <a href="/corp/terms#purchasing-jamtracks" rel="external">JamTracks purchase terms</a><span>.</span></div></div></div><div class="clearall"></div></script><script id="template-purchased-jam-track" type="text/template"><li data-jam-track-id="{{data.jam_track_id}}"></li></script>
<div class="screen secondary" id="checkoutCompleteScreen" layout="screen" layout-id="checkoutComplete"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_shopping_cart-53d4b7e63e9db21e7813b467136ad99f6df1140a8f7ac60b9c05295c33f37f86.png"></div><h1>check out</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="content-wrapper"><div class="checkout-navigation-bar"></div><div class="checkout-complete-wrapper"><div class="no-purchases-prompt hidden">You have not made any purchases recently. Why not go go&nbsp;<a href="/client#/jamtrack/search">browse our collection of JamTracks</a>?</div><div class="thanks-panel"><h2>Thank you for your order!</h2><br><div class="thanks-detail">We'll send you an email confirming your order shortly.</div><br><div class="thanks-detail gift-card hidden"><p>Thank you for purchasing a JamTrack Gift Card! It will be mailed to you.</p></div><div class="thanks-detail jam-tracks-in-browser hidden"><p>To play your purchased JamTrack, launch the JamKazam application and open the JamTrack while in a session.</p><a class="download-jamkazam-wrapper hidden" href="/downloads" rel="external"><div class="download-jamkazam">Click Here to Get the Free JamKazam Application</div></a></div><div class="thanks-detail purchased-jam-track hidden"><h2 class="purchased-jam-track-header" status="in-progress"><span class="in-progress-msg">Downloading Your Purchased JamTracks</span><span class="done-msg">All purchased JamTracks have been downloaded successfully! You can now play them in a session.</span></h2><span>Each JamTrack will be downloaded sequentially.</span><br><span class="notice">Note that you do not have to wait for this to complete in order to use your JamTrack later.</span><br class="clear"><ul class="purchased-list"></ul></div></div><div class="clearall"><div class="action-bar"><div class="right"><a class="button-grey" href="#" id="checkout-info-help">HELP</a><a class="button-orange checkout-done" href="/client#/home">DONE</a></div><div class="clearall"></div></div></div></div></div></div></div></div></div><script id="template-purchased-jam-track" type="text/template"><li data-jam-track-id="{{data.jam_track_id}}"></li></script>
<div class="screen secondary no-login-required" id="redeemSignupScreen" layout="screen" layout-id="redeemSignup"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_shopping_cart-53d4b7e63e9db21e7813b467136ad99f6df1140a8f7ac60b9c05295c33f37f86.png"></div><h1>check out</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="redeem-signup"><div class="content-holder"><div class="already-signed-in"><h3>YOU ARE ALREADY LOGGED IN</h3><p class="carry-on-prompt">You can go back to browsing.</p><div class="actions"><a class="btnNext button-orange" href="/client#/jamtrack/search">BROWSE JAMTRACKS</a></div></div><div class="not-signed-in prompt">To get your free&nbsp;<span class="jamtrack-name"></span>&nbsp;JamTrack, join thousands of musicians in the JamKazam community by registering for your free account.</div><div class="left-side"><div class="left-side-content"><a class="signup-facebook" href="/auth/facebook"><img width="249" height="46" src="/assets/content/button_facebook_signup-57c91a83257dc1b8420c4e7d2d8589720dc0829a37fd91de25996217c07c2638.png"></a><br clear="all"><div class="field terms_of_service"><input type="checkbox"><label>I have read and agree to the JamKazam<br><a rel="external" href="/corp/terms">terms of service</a>.</label></div><br clear="all"></div></div><div class="right-side"><h3>OR SIGN UP USING YOUR EMAIL</h3><div class="signup-form"><form class="signup-form"><div class="input-elements"><div class="field"><label class="inline">First Name:</label><input autofocus="true" name="first_name" type="text"></div><div class="field"><label class="inline">Last Name:</label><input name="last_name" type="text"></div><div class="field"><label class="inline">Email:</label><input name="email" type="text"></div><div class="field"><label class="inline">Password:</label><input autofocus="true" name="password" type="password"></div><div class="field terms_of_service"><input type="checkbox"><label>I have read and agree to the JamKazam &nbsp;<a rel="external" href="/corp/terms">terms of service</a>.</label></div><div class="field recaptcha" style="display:none"><div class="g-recaptcha" data-sitekey="6Let8dgSAAAAAFheKGWrs6iaq_hIlPOZ2f3Bb56B" id="recaptcha_select" name="recaptcha_response_field"></div></div><div class="actions"><input class="button-orange signup-submit" type="submit" value="SIGNUP"><a class="signin" href="#">Already have a JamKazam account? Sign in</a></div></div><br clear="all"></form></div></div></div></div></div></div></div></div>
<div class="screen secondary" id="redeemCompleteScreen" layout="screen" layout-id="redeemComplete"><div class="content"><div class="content-head"><div class="content-icon"><img height="19" width="19" src="/assets/content/icon_shopping_cart-53d4b7e63e9db21e7813b467136ad99f6df1140a8f7ac60b9c05295c33f37f86.png"></div><h1>check out</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="content-wrapper"><div class="checkout-navigation-bar"></div><div class="checkout-complete-wrapper"><div class="no-purchases-prompt hidden">You have not made any purchases recently. Why not go go&nbsp;<a href="/client#/jamtrack/search">browse our collection of JamTracks</a>?</div><div class="thanks-panel"><div class="jam-tracks-in-browser hidden"><p>Thank you for joining our community, and congratulations on getting your first JamTrack!</p><p class="why-download">JamTracks are full multi-track recordings with lots of special features, so they are not&nbsp;just standard audio files. To play with your JamTrack, you'll need to download and install&nbsp;our free Mac or Windows app. This is the last step in the process, and you'll be ready to play.&nbsp;This free app also lets you play online in real time with other musicians over the Internet at no cost!</p><a class="download-jamkazam-wrapper jt-popup" href="#" rel="external"><div class="download-jamkazam">Click Here to Start Using Your JamTrack</div></a><a class="download-jamkazam-wrapper" href="/downloads" rel="external"><div class="just-some-div">Do More With Your JamTrack - Click Here to Download Our Application</div></a><a class="back-to-browsing" href="/client#/jamtrack">or click here to browse more jamtracks</a></div><div class="jam-tracks-in-client hidden"><h2>Congratulations on getting your JamTrack!</h2><div class="thanks-detail purchased-jam-track"><h2 class="purchased-jam-track-header" status="in-progress"><span class="in-progress-msg">Downloading Your JamTrack</span><span class="done-msg">All purchased JamTracks have been downloaded successfully! You can now play them in a session.</span></h2><span class="notice">Note that you do not have to wait for this to complete in order to use your JamTrack later.</span><br class="clear"><ul class="purchased-list"></ul></div></div></div><div class="clearall hidden"><div class="action-bar"><div class="right"><a class="button-orange checkout-done" href="/client#/home">DONE</a></div><div class="clearall"></div></div></div></div></div></div></div></div></div>
<div class="screen secondary" id="feedScreen" layout="screen" layout-id="feed">
<div class="content">
<div class="content-head">
<div class="content-icon"><img height="19" width="19" src="/assets/content/icon_feed-df7e6d452772cc95ddb76b27a52cf84d650f5de9f4365bd5c3d91ddbd0951723.png"></div>
<h1>feed</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<form id="find-session-form" class="inner-content" action="" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off"><!-- @begin web_filter -->
<div id="session-controls" class="feed-filter filter-head"><div class="filter-element wrapper"><div class="filter-element desc">Sort Feed by:</div>
<select name="feed_order_by" id="feed_order_by" class="feed-order-by easydropdown"><option value="date">Most Recent</option>
<option value="plays">Most Played</option>
<option value="likes">Most Liked</option></select>
</div><div class="filter-element wrapper"><!-- -if (:band==filter_label || :jamtrack==filter_label) -->
<!-- =content_tag(:div, 'Genre:', :class => 'filter-element desc') -->
<!-- =select_tag(&quot;feed_genre&quot;, / options_for_select([[&#39;Any&#39;, &#39;&#39;]].concat(JamRuby::Genre.all.collect { |ii| [ii.description, ii.id] })), {:class =&gt; &#39;easydropdown&#39;}) -->
</div><div class="filter-element wrapper"><!-- =content_tag(:div, 'Include Dates:', :class => 'filter-element desc') -->
<select name="feed_date" id="feed_date" class="easydropdown"><option value="today">Today</option>
<option value="week">This Week</option>
<option value="month">This Month</option>
<option value="all">All Time</option></select>
</div><div class="filter-element wrapper"></div><div class="filter-element wrapper"><div class="filter-element desc">Show:</div>
<select name="feed_show" id="feed_show" class="easydropdown"><option value="all">Sessions &amp; Recordings</option>
<option value="music_session">Sessions</option>
<option value="recording">Recordings</option></select>
</div><div class="btn-refresh-holder">
<a class="button-grey btn-refresh-entries" href="/client#/feed">REFRESH</a>
</div>
</div>
<div class="filter-body">
<div class="content-body-scroller" id="feedScreen-feed-scroller">
<div class="profile-wrapper">
<div class="feed-content" id="feedScreen-feed-entry-list"></div>
<div class="end-of-list" id="feedScreen-end-of-feeds-list">No more feed entries</div>
<div class="infinite-scroll-loader" id="feedScreen-loading-feeds" style="padding:5px">Loading ...</div>
</div>
</div>
</div>
</form></div>
</div>
</div>
<div class="screen secondary" id="bands-screen" layout="screen" layout-id="bands"><div class="content"><div class="content-head"><div class="content-icon"><img alt="Icon_bands" height="19" src="/assets/content/icon_bands.png" width="19"></div><h1>bands</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="content-wrapper" id="band-search-filter-builder"></div><div class="content-wrapper" id="band-search-filter-results"><div id="band-search-filter-results-header"><div id="band-search-filter-results-blank"><a class="button-orange" href="#" id="btn-band-search-builder-to_join">SEARCH FOR BAND TO JOIN</a>&nbsp;-&nbsp;or&nbsp;-&nbsp;<a class="button-orange" href="#" id="btn-band-search-builder-to_hire">SEARCH FOR BAND TO HIRE</a></div><div id="band-search-filter-results-filtered"><a class="button-orange" href="#" id="btn-band-search-builder">SEARCH</a><a class="button-grey" href="#" id="btn-band-search-reset">RESET</a><div id="band-search-filter-description"></div></div><div class="clearall"></div><div class="spinner-large" id="band-search-filter-spinner"></div></div><div id="band-search-filter-results-wrapper"><div id="band-search-filter-results-list-blank"></div><div class="content-wrapper" id="band-search-filter-results-list"></div><div class="paginate-wait"><fetching>more results...</fetching><div class="spinner-small"></div></div></div></div></div><script id="template-band-search-filter-to_join" type="text/template"><div id="bands-filter-to_join"><div class="band-search-filter-builder-top builder-section"><div class="col-left"><h2>search bands</h2></div></div><div class="clearall"></div><div class="band-search-filter-builder-middle1 builder-section"><div class="col-left"><div class="field"><label for="search-filter-genres"> Genres:</label><div class="search-filter-setup-genres band-setup-genres"><table cellpadding="10" cellspacing="6" id="search-filter-genres" width="100%"></table></div></div></div><div class="col-right"><div class="field"><label for="search-filter-instruments">Looking for New Members with These Skills:</label><div class="search-filter-setup-instruments band-setup-genres builder-instruments"><table cellpadding="10" cellspacing="6" id="search-filter-instruments" width="100%"></table></div></div></div></div><div class="clearall"></div><div class="band-search-filter-builder-middle2 builder-section"><div class="col-left"><div class="field builder-selector"><label>Type:</label><select class="easydropdown" name="band_type"><option selected="selected" value="{band_type}">{band_type}</option></select></div><div class="field builder-selector"><label>Play Commitment:</label><select class="easydropdown" name="play_commitment"><option selected="selected" value="{play_commitment}">{play_commitment}</option></select></div></div><div class="col-right"><div class="field builder-selector"><div class="lhs"><label>Status:</label><select class="easydropdown" name="band_status"><option selected="selected" value="{band_status}">{band_status}</option></select></div></div><div class="field builder-selector"><div class="rhs"><label>Concert Gigs Played:</label><select class="easydropdown" name="concert_gigs"><option selected="selected" value="{concert_gigs}">{concert_gigs}</option></select></div></div><div class="clearall"></div><div class="field builder-selector"><div class="lhs"><label>Touring Option:</label><select class="easydropdown" name="touring_option"><option selected="selected" value="{touring_option}">{touring_option}</option></select></div></div></div><div class="clearall"></div></div><div class="clearall"></div><div class="band-search-filter-builder-bottom builder-section builder-action-buttons"><div class="col-right"><a class="builder-button button-grey" href="#" id="btn-band-search-cancel">CANCEL</a><a class="builder-button button-orange" href="#" id="btn-perform-band-search">SEARCH</a></div></div></div></script><script id="template-band-search-filter-to_hire" type="text/template"><div id="bands-filter-to_hire"><div class="band-search-filter-builder-top-to_hire builder-section"><div class="col-left"><h2>search bands to hire</h2></div><div class="col-right builder-sort-order"><div class="sort-order-selector"><select class="easydropdown" name="sort_order"><option selected="selected" value="{sort_order}">{sort_order}</option></select></div><div class="text-label">Sort Results By:</div></div></div><div class="clearall"></div><div class="band-search-filter-builder-middle1 builder-section"><div class="col-left"><div class="field"><label for="search-filter-genres"> Genres:</label><div class="search-filter-setup-genres band-setup-genres"><table cellpadding="10" cellspacing="6" id="search-filter-genres" width="100%"></table></div></div></div><div class="col-right"><div class="field builder-selector"><label>Status:</label><select class="easydropdown" name="band_status"><option selected="selected" value="{band_status}">{band_status}</option></select></div><div class="field builder-selector"><label>Concert Gigs Played:</label><select class="easydropdown" name="concert_gigs"><option selected="selected" value="{concert_gigs}">{concert_gigs}</option></select></div><div class="field builder-selector"><label>Performance Sample Available:</label><select class="easydropdown" name="performance_samples"><option selected="selected" value="{performance_samples}">{performance_samples}</option></select></div></div></div><div class="clearall"></div><div class="band-search-filter-builder-middle2 builder-section"><div class="field builder-selector"><input type="checkbox" id="has_max_cost" {has_max_cost} >&nbsp;Find bands to play a paid gig at a cost not to exceed&nbsp;&nbsp;$<input id="max_cost_amount" name="max_cost" type="text" value="{max_cost}" /></div><div class="field builder-selector"><input type="checkbox" id="free_gigs" name="free_gigs" {has_free_gigs} >&nbsp;Find bands that will play free gigs</div></div><div class="clearall"></div><div class="clearall"></div><div class="band-search-filter-builder-bottom builder-section builder-action-buttons"><div class="col-right"><a class="builder-button button-grey" href="#" id="btn-band-search-cancel">CANCEL</a><a class="builder-button button-orange" href="#" id="btn-perform-band-search">SEARCH</a></div></div></div></script><script id="template-search-filter-setup-instrument" type="text/template"><tr data-instrument-id="{id}"><td><input type="checkbox" {checked} />{description}</td><td align="right" width="50%"><select class="proficiency_selector" name="proficiency"><option value="1"> Beginner</option><option value="2"> Intermediate</option><option value="3"> Expert</option></select></td></tr></script><script id="template-search-filter-setup-genres" type="text/template"><tr><td><input value="{id}" {checked} type="checkbox" />{description}</td></tr></script><script id="template-find-band-row" type="text/template"><div class="profile-band-list-result band-list-result"><div class="f11"><div class="left" style="width:63px;margin-top:-12px;"><div class="avatar-small"><img src="{avatar_url}" /></div></div><div class="right mband-players" style="width:265px; margin-top:-4px;"><table cellpadding="0" cellspacing="5" class="musicians">{band_player_template}</table></div><div style="margin-left: 63px; margin-right: 275px;margin-top: 12px;"><div class="first-row" data-hint="top-row"><div class="lcol left"><div class="result-name">{band_name}</div><div class="result-location">{band_location}</div><br /><div class="nowrap mt10" id="result_genres">{genres}</div></div><div class="whitespace"><div class="biography">{biography}</div></div><div class="clearleft"></div></div><div class="button-row"><div class="lcol stats left"><span class="follower-count">{follow_count}<img align="absmiddle" height="12" src="../assets/content/icon_followers.png" style="margin-right:4px;" width="22" /></span><span class="recording-count">{recording_count}<img align="absmiddle" height="13" src="../assets/content/icon_recordings.png" style="margin-right:4px;" width="12" /></span><span class="session-count">{session_count}<img align="absmiddle" height="12" src="../assets/content/icon_session_tiny.png" width="12" /></span></div><div class="clearall"></div><div class="result-list-button-wrapper" data-band-id="{band_id}">{band_action_template}</div><div class="clearall"></div></div></div></div></div></script><script id="template-band-action-btns" type="text/template"><a class="button-orange smallbutton" href="{profile_url}">PROFILE</a><a class="smallbutton search-m-follow {button_follow}" href="#">FOLLOW</a></script><script id="template-band-edit-btns" type="text/template"><a class="button-orange smallbutton" href="{profile_url}">PROFILE</a><a class="button-orange smallbutton" href="{band_edit_url}">EDIT BAND</a><a class="button-orange smallbutton" href="{band_member_url}">INVITE</a></script><script id="template-band-player-info" type="text/template"><tr><td><a class="avatar-tiny" hoveraction="musician" href="{profile_url}" user-id="{user_id}"><img src="{avatar_url}" /></a></td><td style="padding: 0 4px;width:88px;"><a hoveraction="musician" href="{profile_url}" user-id="{user_id}"><strong>{player_name}</strong></a></td><td class="instruments">{player_instruments}</td></tr></script></div></div></div><script id="template-band-search-filter-to_join" type="text/template"><div id="bands-filter-to_join"><div class="builder-section" id="band-search-filter-builder-top"><div class="col-left"><h2>search bands</h2></div><div class="col-right builder-sort-order"><div class="text-label">Sort Results By:</div><select class="easydropdown" name="sort_order"><option selected="selected" value="{sort_order}">{sort_order}</option></select></div></div><div class="clearall"></div><div class="builder-section" id="band-search-filter-builder-middle1"><div class="col-left"><div class="field"><label for="search-filter-genres"> Genres:</label><div class="search-filter-setup-genres band-setup-genres"><table cellpadding="10" cellspacing="6" id="search-filter-genres" width="100%"></table></div></div></div><div class="col-right"><div class="field"><label for="search-filter-instruments">Instruments &amp; Skill Level:</label><div class="search-filter-setup-instruments band-setup-genres builder-instruments"><table cellpadding="10" cellspacing="6" id="search-filter-instruments" width="100%"></table></div></div></div></div><div class="clearall"></div><div class="builder-section" id="band-search-filter-builder-middle2"><div class="col-left"><div class="field builder-selector"><label>Type:</label><select class="easydropdown" name="band_type"><option selected="selected" value="{band_type}">{band_type}</option></select></div><div class="field builder-selector"><label>Play Commitment:</label><select class="easydropdown" name="play_commit"><option selected="selected" value="{play_commit}">{play_commit}</option></select></div></div><div class="col-right"><div class="field builder-selector"><label>Status:</label><select class="easydropdown" name="skill_level"><option selected="selected" value="{skill_level}">{skill_level}</option></select></div><div class="field builder-selector"><label>Concert Gigs Played:</label><select class="easydropdown" name="concert_gigs"><option selected="selected" value="{concert_gigs}">{concert_gigs}</option></select></div><div class="field builder-selector"><label>Touring Option:</label><select class="easydropdown" name="tour_option"><option selected="selected" value="{tour_option}">{tour_option}</option></select></div><div class="clearall"></div></div></div><div class="clearall"></div><div class="builder-section builder-action-buttons" id="band-search-filter-builder-bottom"><div class="col-right"><a class="builder-button button-orange" href="#" id="btn-perform-band-search">SEARCH</a><a class="builder-button button-grey" href="#" id="btn-band-search-cancel">CANCEL</a></div></div></div></script><!--Session Row Template--><script id="template-search-band-row" type="text/template"><div class="profile-band-list-result band-list-result"><div class="f11"><div class="left" style="width:63px;margin-top:-12px;"><!--avatar--><div class="avatar-small"><img src="{avatar_url}" /></div></div><div class="right mband-players" style="width:265px; margin-top:-4px;"><table cellpadding="0" cellspacing="5" class="musicians">{band_player_template}</table></div><div style="margin-left: 63px; margin-right: 275px;margin-top: 12px;"><div class="first-row" data-hint="top-row"><div class="lcol left"><!--name and location--><div class="result-name">{band_name}</div><div class="result-location">{band_location}</div><br /><div class="nowrap mt10" id="result_genres">{genres}</div></div><div class="whitespace"><div class="biography">{biography}</div></div><div class="clearleft"></div></div><div class="button-row"><div class="lcol stats left"><span class="follower-count">{follow_count} <img align="absmiddle" height="12" src="../assets/content/icon_followers.png" style="margin-right:4px;" width="22" /></span><span class="recording-count">{recording_count}<img align="absmiddle" height="13" src="../assets/content/icon_recordings.png" style="margin-right:4px;" width="12" /></span><span class="session-count">{session_count}</span><img align="absmiddle" height="12" src="../assets/content/icon_session_tiny.png" width="12" /></div><div class="clearall"></div><div class="result-list-button-wrapper" data-band-id="{band_id}">{band_action_template}</div><div class="clearall"></div></div></div></div></div></script><script id="template-search-band-action-btns" type="text/template"><a class="button-orange">smallbutton href="{profile_url}"
PROFILE</a><a class="{button_follow} smallbutton search-m-follow" href="#"><FOLLOW></FOLLOW></a></script><script id="template-search-band-edit-btns" type="text/template"><a class="button-orange smallbutton" href="{profile_url}"><PROFILE></PROFILE></a><a class="button-orange smallbutton" href="{band_edit_url}"><EDIT>BAND</EDIT></a><a class="button-orange smallbutton" href="{band_member_url}"><INVITE></INVITE></a></script><script id="template-search-band-player-info" type="text/template"><tr><td><a class="avatar-tiny" hoveraction="musician" href="{profile_url}" user-id="{user_id}"><img src="{avatar_url}" /></a></td><td style="padding: 0 4px;width:88px"><a hoveraction="musician" href="{profile_url}" user-id="{user_id}"><strong>{player_name}</strong></a></td><td class="instruments">{player_instruments}</td></tr></script>
<div class="screen secondary" id="musicians-screen" layout="screen" layout-id="musicians"><div class="content"><div class="content-head"><div class="content-icon"><img alt="Icon_musicians" height="19" src="/assets/content/icon_musicians.png" width="19"></div><h1>musicians</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div class="content-body-scroller"><div class="content-wrapper" id="musician-search-filter-builder"></div><div class="content-wrapper" id="musician-search-filter-results"><div id="musician-search-filter-results-header"><a class="button-orange" href="#" id="btn-musician-search-builder">SEARCH</a><a class="button-grey" href="#" id="btn-musician-search-reset">RESET</a><div id="musician-search-filter-description"></div><div class="clearall"></div><div class="spinner-large" id="musician-search-filter-spinner"></div></div><div id="musician-search-filter-results-wrapper"><div id="musician-search-filter-results-list-blank"></div><div class="content-wrapper" id="musician-search-filter-results-list"></div><div class="paginate-wait"><fetching>more results...</fetching><div class="spinner-small"></div></div></div></div></div><script id="template-musician-search-filter" type="text/template"><div class="builder-section" id="musician-search-filter-builder-top"><div class="col-left"><h2>search musicians</h2></div><div class="col-right builder-sort-order"><div class="text-label">Sort Results By:</div><select class="easydropdown" name="sort_order"><option selected="selected" value="{sort_order}">{sort_order}</option></select></div></div><div class="clearall"></div><div class="builder-section" id="musician-search-filter-builder-middle"><div class="col-left"><div class="field"><label for="search-filter-genres"> Genres:</label><div class="search-filter-setup-genres musician-setup-genres"><table cellpadding="10" cellspacing="6" id="search-filter-genres" width="100%"></table></div></div><div class="field builder-selector"><label>Interests:</label><select class="easydropdown" name="interests"><option selected="selected" value="{interests}">{interests}</option></select></div><div class="field builder-selector"><label>Studio Sessions Played:</label><select class="easydropdown" name="studio_sessions"><option selected="selected" value="{studio_sessions}">{studio_sessions}</option></select></div></div><div class="col-right"><div class="field"><label for="search-filter-instruments">Instruments &amp; Skill Level:</label><div class="search-filter-setup-instruments musician-setup-genres builder-instruments"><table cellpadding="10" cellspacing="6" id="search-filter-instruments" width="100%"></table></div></div><div class="col-left"><div class="field builder-selector"><label>Status:</label><select class="easydropdown" name="skill_level"><option selected="selected" value="{skill_level}">{skill_label}</option></select></div><div class="field builder-selector"><label>Concert Gigs Played:</label><select class="easydropdown" name="concert_gigs"><option selected="selected" value="{concert_gigs}">{concert_gigs}</option></select></div></div><div class="col-right"><div class="field builder-selector"><label for="search-filter-ages"> Ages:</label><div class="search-filter-setup-ages builder-ages"><table cellpadding="10" cellspacing="6" id="search-filter-ages" width="100%"></table></div></div></div><div class="clearall"></div></div></div><div class="clearall"></div><div class="builder-section builder-action-buttons" id="musician-search-filter-builder-bottom"><div class="col-right"><a class="builder-button button-orange" href="#" id="btn-perform-musician-search">SEARCH</a><a class="builder-button button-grey" href="#" id="btn-musician-search-cancel">CANCEL</a></div></div></script><script id="template-search-filter-setup-instrument" type="text/template"><tr data-instrument-id="{id}"><td><input type="checkbox" {checked} />{description}</td><td align="right" width="50%"><select class="proficiency_selector" name="proficiency"><option value="1"> Beginner</option><option value="2"> Intermediate</option><option value="3"> Expert</option></select></td></tr></script><script id="template-search-filter-setup-genres" type="text/template"><tr><td><input value="{id}" {checked} type="checkbox" />{description}</td></tr></script><script id="template-search-filter-setup-ages" type="text/template"><tr><td><input value="{id}" {checked} type="checkbox" />{description}</td></tr></script><!--Session Row Template--><script id="template-search-musician-row" type="text/template"><div class="profile-band-list-result musician-list-result" data-musician-id="{musician_id}"><div class="f11" data-hint="container"><div class="left musician-avatar"><!--avatar--><div class="avatar-small"><img src="{avatar_url}" /></div></div><div class="left musician-info"><div class="first-row" data-hint="top-row"><div class="musician-profile"><div class="result-name">{musician_name}</div><div class="result-location">{musician_location}</div><div class="instruments nowrap mt10" id="result_instruments">{instruments}</div></div><div class="musician-stats"><span class="friend-count">{friend_count}<img align="absmiddle" alt="friends" height="12" src="../assets/content/icon_friend.png" style="margin-right:4px;" width="14" /></span><span class="follower-count">{follow_count}<img align="absmiddle" alt="followers" height="12" src="../assets/content/icon_followers.png" style="margin-right:4px;" width="22" /></span><span class="recording-count">{recording_count}<img align="absmiddle" alt="recordings" height="13" src="../assets/content/icon_recordings.png" style="margin-right:4px;" width="12" /></span><span class="session-count">{session_count}<img align="absmiddle" alt="sessions" height="12" src="../assets/content/icon_session_tiny.png" style="margin-right:4px;" width="12" /></span></div></div><br clear="both" /></div><div class="left musician-latency"><div class="latency-help">Your latency<br />to {musician_first_name} is:</div><div class="latency-holder">{latency_badge}</div><br clear="both" /></div><div class="button-row" data-hint="button-row"><div class="biography">{biography}</div><div class="result-list-button-wrapper" data-musician-id="{musician_id}">{musician_action_template}</div><br clear="both" /></div></div></div></script><script id="template-search-musician-action-btns" type="text/template"><a class="button-orange smallbutton" href="{profile_url}"> PROFILE</a><a class="smallbutton search-m-friend {friend_class}" href="#">{friend_caption}</a><a class="smallbutton search-m-follow {follow_class}" href="#">{follow_caption} </a><a class="smallbutton search-m-message {message_class}" href="#">{message_caption}</a><div class="clearall"></div></script></div></div></div><!--Session Row Template--><script id="template-find-musician-row" type="text/template"><div class="profile-band-list-result musician-list-result" data-musician-id="{musician_id}"><div class="f11" data-hint="container"><div class="left musician-avatar"><!--avatar--><div class="avatar-small"><img src="{avatar_url}" /></div></div><div class="left musician-info"><div class="first-row" data-hint="top-row"><div class="musician-profile"><div class="result-name"> musician_name </div><div class="result-location"> musician_location </div><div class="instruments nowrap mt10" id="result_instruments"> instruments </div></div><div class="musician-stats"><span class="friend-count">{friend_count}<img align="absmiddle" alt="friends" height="12" src="../assets/content/icon_friend.png" style="margin-right:4px;" width="14" /></span><span class="follower-count">{follow_count}<img align="absmiddle" alt="followers" height="12" src="../assets/content/icon_followers.png" style="margin-right:4px;" width="22" /></span><span class="recording-count">{recording_count}<img align="absmiddle" alt="recordings" height="13" src="../assets/content/icon_recordings.png" style="margin-right:4px;" width="12" /></span><span class="session-count">{session_count}<img align="absmiddle" alt="sessions" height="12" src="../assets/content/icon_session_tiny.png" style="margin-right:4px;" width="12" /></span></div></div><br clear="both" /></div><div class="left musician-latency"><div class="latency-help">Your latency<br /> to {musician_first_name} is:</div><div class="latency-holder">{latency_badge}</div><br clear="both" /></div><div class="button-row" data-hint="button-row"><div class="biography"> biography </div><div class="result-list-button-wrapper" data-musician-id="{musician_id}">{musician_action_template}</div><br clear="both" /></div></div></div></script><script id="template-musician-action-btns" type="text/template"><a class="button-orange smallbutton" href="{profile_url}"> PROFILE</a><a class="smallbutton search-m-friend {friend_class}" href="#">{friend_caption}</a><a class="smallbutton search-m-follow {follow_class}" href="#">{follow_caption} </a><a class="smallbutton search-m-message {message_class}" href="#">{message_caption"</a><div class="clearall"></div></script>
<!-- Test Page for Javascript Bridge -->
<div layout="screen" layout-id="testBridge" class="screen secondary">
<div class="content-head">
<h1>Javascript Bridge Test</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div id="testBridge-clientid">I don't think I'm connected!</div>
<hr>
<div id="testBridge-createSession" style="border: 1px solid #fff; margin: 1em; float:left;">
<h2>Create hard-coded session</h2>
<label>Prefix (1, 2, 3, etc.)
<input type="text" style="width:30px">
<input type="button" value="Create!">
</label>
<div><label>Session Id: <span id="testBridge-createdSessionId" style="display:inline-block; margin:4px;"></span></label></div>
</div>
<div id="testBridge-joinSession" style="border: 1px solid #fff; margin: 1em; float:left;">
<h2>Join sesssion</h2>
<label>Session ID
<input type="text" style="width:300px">
<input type="button" value="Join!">
</label>
</div>
<div id="testBridge-TestLatency" style="clear:both;">
<h2>TestLatency</h2>
<label>Client ID (to ping)
<input type="text" style="width:300px">
<input type="button" value="Test!">
<div><label>Response: <span id="testBridge-TestLatencyResponse" style="display:inline-block; margin:4px;"></span></label></div>
</label>
</div>
<hr>
<div id="testBridge-GetSetFTUE" style="float:left;">
<div style="float:left">
<h2>GetFTUE</h2>
<input type="button" value="Get">
<textarea data-what="GetFTUE"></textarea>
</div>
<div style="float:left;">
<h2>SetFTUE</h2>
<form>
<label>true <input name="ftue" type="radio" value="true"></label>
<label>false <input name="ftue" type="radio" value=""></label>
<input type="button" value="Set">
</form>
</div>
</div>
<div id="testBridge-GetDevices">
<h2>GetASIODevices</h2>
<input type="button" value="Invoke">
<textarea></textarea>
</div>
</div>
<script type="text/template" id="template-testBridge-clientid">
<label>Client ID: <input type="text" style="width:300px;" value="{clientid}"/></label>
</script>
<div class="content">
<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account" class="screen secondary">
<!-- header -->
<div class="content-head">
<div class="content-icon">
<img height="18" width="18" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- end header -->
<div class="content-body">
<!-- profile scrolling area -->
<div id="account-content-scroller" class="content-body-scroller account-content-scroller">
</div>
<!-- end content scrolling area -->
</div>
</div>
<script type="text/template" id="template-account-main">
<!-- content wrapper -->
<div class="content-wrapper account">
<br />
<div class="account-left">
<h2>subscription: </h2>
</div>
<div class="account-mid subscription">
Manage your JamKazam subscription.
</div>
<div class="right">
<a id="account-manage-subscription" href="#" class="button-orange">UPDATE</a>
</div>
<br clear="all" />
<hr/>
<div class="account-left">
<h2>payments:</h2>
</div>
<div class="account-mid payments">
<div class="whitespace">
{% if (data.sales_count == 0) { %}
Enter payment method and view payment history.
{% } else { %}
You have made {{data.sales_count}} purchase{{data.sales_count == 1 ? '' : 's'}}.
{% } %}
</div>
</div>
<div class="right">
<a id="account-payment-history-link" href="#" class="button-orange">VIEW</a>
</div>
<br clear="all" />
<hr/>
{% if (data.isNativeClient) { %}
<div class="account-left">
<h2>audio gear:</h2>
</div>
<div class="account-mid audio">
<strong>Profiles:</strong> <span class="audio-profiles-short">{{data.validProfiles}}</span>
</div>
<div class="right">
<a id="account-edit-audio-link" href="#" class="button-orange">UPDATE</a>
</div>
<br clear="all" />
<hr />
{% } %}
<div class="account-left">
<h2>video gear:</h2>
</div>
<div class="account-mid video">
<strong>webcam:</strong> {{data.webcamName}}<br />
</div>
<div class="right">
<a id="account-edit-video-link" href="#" class="button-orange">UPDATE</a>
</div>
<br clear="all" />
<hr />
<div class="account-left">
<h2>identity:</h2>
</div>
<div class="account-mid identity">
<strong>Email:</strong> {{data.email}}<br />
<strong>Password:</strong> &bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;
</div>
<div class="right">
<a id="account-edit-identity-link" href="#" class="button-orange">UPDATE</a>
</div>
<br clear="all" />
<hr />
<div class="account-left">
<div class="right small mr20" style="margin-top:4px;">
<a href="#" class="avatar_large"><img src="{{data.photoUrl}}" id="profile-avatar" /></a>
</div>
<h2>profile:</h2>
</div>
<div class="account-mid profile">
<div class="whitespace">
<strong>Name:</strong> {{data.name}}<br />
<strong>Location:</strong> {{data.location}}<br />
<strong>Instruments:</strong> {{data.instruments}}
</div>
</div>
<div class="right">
<a href="#" class="account-edit-profile-link button-orange">UPDATE</a>
</div>
<br clear="all" />
<hr />
<div class="account-left">
<h2>jamtracks:</h2>
</div>
<div class="account-mid subscriptions">
<strong class="jamtrack-license-detail">
{{data.licenseDetail}}
</strong>
<br clear="all" />
<a href="/corp/terms#purchasing-jamtracks" rel="external" class="view-license" id="account-view-license-link">JamTracks License</a>
</div>
<div class="right">
<a id="account-my-jamtracks-link" href="#" class="button-orange">VIEW</a>
</div>
<br clear="all" />
<hr />
<div class="account-left">
<h2>affiliate:</h2>
</div>
{% if (data.is_affiliate_partner) { %}
<div class="account-mid affiliate">
<div class="whitespace">
<span class="user-referrals">You have referred {{ data.affiliate_referral_count }} users to date.</span>
<br />
<span class="affiliate-earnings">You have earned ${{ data.affiliate_earnings }} to date.</span>
</div>
</div>
<div class="right">
<a id="account-affiliate-partner-link" href="#" class="button-orange">VIEW</a>
</div>
<br clear="all" />
{% } else { %}
<div class="account-mid affiliate">
<div class="whitespace">
<span class="not-affiliated">You are not currently a JamKazam affiliate.</span>
<br />
<a href="/affiliateProgram" rel="external" class="learn-affiliate">Learn how you can earn cash simply by telling your friends and followers about JamKazam.</a>
</div>
</div>
<br clear="all" />
{% } %}
{% if (data.is_onboarder) { %}
<hr />
<div class="account-left">
<h2>onboarding:</h2>
</div>
<div class="account-mid school">
<div class="whitespace">
<span class="school-info">Manage the JamKazam users that you are assigned to for onboarding.</span>
</div>
</div>
<div class="right">
<a id="account-onboarder-link" href="#" class="button-orange">UPDATE</a>
</div>
<br clear="all" />
{% } %}
{% if (data.owns_school) { %}
<hr />
<div class="account-left">
<h2>school:</h2>
</div>
<div class="account-mid school">
<div class="whitespace">
<span class="school-info">Invite teachers, students, and manage your school settings.</span>
</div>
</div>
<div class="right">
<a id="account-school-link" href="#" class="button-orange">UPDATE</a>
</div>
<br clear="all" />
{% } %}
{% if (data.owned_retailer_id) { %}
<hr />
<div class="account-left">
<h2>retailer:</h2>
</div>
<div class="account-mid school">
<div class="whitespace">
<span class="retailer-info">Manage your retail store partner settings.</span>
</div>
</div>
<div class="right">
<a id="account-retailer-link" href="#" class="button-orange">UPDATE</a>
</div>
<br clear="all" />
{% } %}
</div>
<!-- end content wrapper -->
</script>
</div>
<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account/identity" class="screen secondary" id="account-identity">
<!-- header -->
<div class="content-head">
<!-- icon -->
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<!-- section head text -->
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- end header -->
<!-- profile scrolling area -->
<div class="content-body">
<div id="account-identity-content-scroller" class="content-body-scroller">
</div>
</div>
<!-- end content scrolling area -->
</div>
<script type="text/template" id="template-account-identity">
<!-- content wrapper -->
<div class="content-wrapper account-identity">
<br />
<div class="account-left">
<h2>identity:</h2>
</div>
<div class="account-edit-email left mr20">
<form id="account-edit-email-form">
<h4 class="b">Update your email address:</h4>
<div class="field">
<label for="account_update_email">Email:</label>
<input id="account_update_email" name="update_email" type="text" value="{email}">
</div>
<div class="right input-aligner">
<a id="account-edit-email-cancel" href="#" class="button-grey">CANCEL</a>
<a id="account-edit-email-submit" href="#" class="button-orange">UPDATE EMAIL</a>
</div>
<input type="submit" style="display:none"/>
</form>
</div>
<div class="account-edit-password left">
<form id="account-edit-password-form">
<h4 class="b">Update your password:</h4>
<div class="field">
<label for="current_password">Current Password:</label>
<input type="password" name="current_password" value="">
</div>
<div class="field">
<label for="password">New Password:</label>
<input type="password" name="password" value="">
</div>
<div class="field">
<label for="account_retype_password">Retype New Password:</label>
<input id="account_retype_password" name="password_confirmation" type="password" value="">
</div>
<div class="right input-aligner">
<a id="account-edit-password-cancel" href="#" class="button-grey">CANCEL</a>
<a id="account-edit-password-submit" href="#" class="button-orange">UPDATE PASSWORD</a>
</div>
<input type="submit" style="display:none"/>
</form>
</div>
<br clear="all" />
</div>
<!-- end content wrapper -->
</script>
<script type="text/template" id="template-account-update-email-password-prompt-dialog">
<br />
<form>
Enter Password:<br />
<input id="update-email-confirm-password" name="password" type="password">
</form>
<br />
<div class="left"><a href="#" id="account-edit-email-confirm-password-cancel" class="button-grey m0" data-purpose="cancel">CANCEL</a></div>
<div class="right"><a href="#" id="account-edit-email-confirm-password-submit" class="button-orange" data-purpose="submit">SUBMIT</a></div>
<br />
</script>
<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account/affiliate" class="screen secondary" id="account-affiliate">
<!-- header -->
<div class="content-head">
<!-- icon -->
<div class="content-icon">
<img width="24" height="24" src="/assets/content/icon_dollar-827e36ca25b31560aee5d322b00c9c0301f8497bd0fbc6f4478a0dbdf4934f07.png">
</div>
<!-- section head text -->
<h1>affiliate report</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- end header -->
<!-- profile scrolling area -->
<div class="content-body">
<div id="account-affiliate-content-scroller" class="content-body-scroller">
</div>
</div>
<!-- end content scrolling area -->
</div>
<script type="text/template" id="template-account-affiliate">
<!-- content wrapper -->
<div class="content-wrapper account-affiliate">
<br />
<div class="account-left">
<div style='float:right; margin-right:20px;'><h2>Total Count:&nbsp;&nbsp;{total_count}</h2></div>
<br />
<div style="overflow:scroll; margin-left: 50px; margin-top: 20px">
<div style="float:left;">Registration Date</div><div style="float:left; margin-left:20px">Number of Users</div>
<br />
{by_date}
</div>
</div>
<br clear="all" />
</div>
<!-- end content wrapper -->
</script>
<!-- Account Profile Screen -->
<div layout="screen" id="account-profile-basics" layout-id="account/profile" class="screen secondary">
<div class="content-head">
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<div id="account-profile-content-scroller" class="content-body-scroller account-content-scroller">
<div class="content-wrapper account-profile">
<form id="account-edit-profile-form">
<h2>edit profile: basics</h2>
<br><br>
<div class="location w25 left">
<a href="#" class="avatar_large"><img id="avatar"></a>
<a href="#" class="small" id="account-change-avatar">Change Avatar</a>
<div class="clearall"></div>
<div class="field">
<label>Country:</label>
<select id="country" name="country" class="w80">
<option selected="selected"></option>
</select>
</div>
<div class="field">
<label>State/Province:</label>
<select id="region" name="region" class="w80" disabled="disabled">
<option selected="selected"></option>
</select>
</div>
<div class="field">
<label>City:</label>
<select id="city" name="city" class="w80" disabled="disabled">
<option selected="selected"></option>
</select>
</div>
</div>
<div class="right-side right w70" style="margin-top:-36px;">
<div class="field left w45">
<label>First Name:</label>
<input type="text" id="first-name" name="first_name" class="w70" style="margin-bottom:12px;">
</div>
<div class="field left w45">
<label>Last Name:</label>
<input type="text" id="last-name" name="last_name" class="w70" style="margin-bottom:12px;">
</div>
<br class="clearall">
<div class="field left w45 gender">
<label>Gender:</label>
<select id="gender" name="gender" class="w80">
<option value="M">Male</option>
<option value="F">Female</option>
<option value="">-</option>
</select>
</div>
<br class="clearall">
<div class="field">
<label>Musical Bio:</label>
<textarea id="biography" name="biography" class="biography"></textarea>
</div>
<div class="field">
<input type="checkbox" id="subscribe" name="subscribe_email"> I will accept email from JamKazam about this service.
</div>
<div class="right field actions">
<a class="button-grey account-edit-profile-cancel">CANCEL</a>&nbsp;&nbsp;<a class="account-edit-profile-submit button-orange">SAVE &amp; NEXT</a>
</div>
</div>
<div class="clearall"></div>
</form>
</div>
</div>
</div>
</div>
<div layout="screen" id="account-profile-experience" layout-id="account/profile/experience" class="screen secondary">
<div class="content-head">
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<div id="account-profile-content-scroller" class="content-body-scroller account-content-scroller">
<div class="content-wrapper account-profile">
<form id="account-edit-profile-experience-form">
<h2>edit profile: musical experience</h2>
<div class="field left">
<label for="user-genres">What genres do you play?</label>
<div class="genres">
<table id="user-genres" width="100%" cellpadding="10" cellspacing="6"></table>
</div>
</div>
<div class="field right w65">
What instruments do you play?
<div class="instruments">
<table class="instrument_selector" width="100%" cellpadding="0" cellspacing="6">
</table>
</div>
</div>
<div class="clearall"></div>
<div>
<div class="field left w35">
<label>Status</label>
<select name="skill_level">
<option value="">select an option</option>
<option value="1">Amateur</option>
<option value="2">Professional</option>
</select>
</div>
<div class="field left w25">
<label>Concert Gigs Played</label>
<select name="concert_count">
<option value="">select an option</option>
<option value="0">zero</option>
<option value="1">under 10</option>
<option value="2">10 to 50</option>
<option value="3">50 to 100</option>
<option value="4">over 100</option>
</select>
</div>
<div class="field left w25">
<label>Studio Sessions Played</label>
<select name="studio_session_count">
<option value="">select an option</option>
<option value="0">zero</option>
<option value="1">under 10</option>
<option value="2">10 to 50</option>
<option value="3">50 to 100</option>
<option value="4">over 100</option>
</select>
</div>
</div>
<br><br>
<div class="right field actions">
<a class="account-edit-profile-cancel button-grey">CANCEL</a>&nbsp;&nbsp;
<a class="account-edit-profile-back button-grey">BACK</a>&nbsp;&nbsp;
<a class="account-edit-profile-submit button-orange">SAVE &amp; NEXT</a>
</div>
<div class="clearall"></div>
</form>
</div>
</div>
</div>
</div>
<script type="text/template" id="account-profile-instrument">
<tr data-instrument-id='{id}'>
<td class="acct-prf-inst-ck"><input type="checkbox" {checked} />{description}</td>
<td align="right" width="50%" class="acct-prf-inst-drdwn">
<select name="proficiency" class='proficiency_selector'>
<option value="1">Beginner</option>
<option value="2">Intermediate</option>
<option value="3">Expert</option>
</select>
</td>
</tr>
</script>
<script type="text/template" id="template-user-setup-genres">
<tr><td class="user-genre-desc"><input value="{id}" {checked} type="checkbox" /><span>{description}</span></td></tr>
</script>
<div layout="screen" id="account-profile-interests" layout-id="account/profile/interests" class="screen secondary">
<div class="content-head">
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<div id="account-profile-content-scroller" class="content-body-scroller account-content-scroller">
<div class="content-wrapper account-profile">
<form id="account-edit-profile-interests-form">
<h2>edit profile: current interests</h2>
<div>
<div class="left interest-options">
<label>I would like to join a virtual band <a class="help" help-topic="profile-interests-virtual-band">[?]</a></label>
<div class="yes-no-options">
<div class="option">
<input type="radio" name="virtual_band" id="virtual-band-yes" class="dependent-master" value="true">
<label for="virtual-band-yes">Yes</label>
</div>
<div class="option">
<input type="radio" name="virtual_band" id="virtual-band-no" class="dependent-master" value="false">
<label for="virtual-band-no">No</label>
</div>
</div>
</div>
<div id="virtual-band-genres" class="left genres virtual-band-dependent hidden">
<label>Desired Genre <a class="select-genre">select</a></label>
<span class="genre-list"></span>
</div>
<div class="field left play-commitment virtual-band-dependent hidden">
<label>Play Commitment</label>
<select id="virtual-band-commitment" name="virtual_band_commitment">
<option value="1">infrequent</option>
<option value="2">once a week</option>
<option value="3">2-3 times a week</option>
<option value="4">4+ times a week</option>
</select>
</div>
</div>
<div class="clearall"></div>
<div>
<div class="left interest-options traditional-band">
<label>I would like to join a traditional band <a class="help" help-topic="profile-interests-traditional-band">[?]</a></label>
<div class="yes-no-options">
<div class="option yes-option">
<input type="radio" name="traditional_band" id="traditional-band-yes" class="dependent-master" value="true">
<label for="traditional-band-yes">Yes</label>
</div>
<div class="option no-option">
<input type="radio" name="traditional_band" id="traditional-band-no" class="dependent-master" value="false">
<label for="traditional-band-no">No</label>
</div>
</div>
</div>
<div id="traditional-band-genres" class="left genres traditional-band-dependent hidden">
<label>Desired Genre <a class="select-genre">select</a></label>
<span class="genre-list"></span>
</div>
<div class="field left play-commitment traditional-band-dependent hidden">
<label>Play Commitment</label>
<select id="traditional-band-commitment" name="traditional_band_commitment">
<option value="1">infrequent</option>
<option value="2">once a week</option>
<option value="3">2-3 times a week</option>
<option value="4">4+ times a week</option>
</select>
</div>
<div class="field left traditional-band-dependent hidden">
<label>Touring Option</label>
<select id="traditional-band-touring" name="touring">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
</div>
<div class="clearall"></div>
<div>
<div class="left interest-options paid-sessions">
<label>I am available to play in paid sessions <a class="help" help-topic="profile-interests-paid-sessions">[?]</a></label>
<div class="yes-no-options">
<div class="option yes-option">
<input type="radio" name="paid_sessions" id="paid-sessions-yes" class="dependent-master" value="true">
<label for="paid-sessions-yes">Yes</label>
</div>
<div class="option no-option">
<input type="radio" name="paid_sessions" id="paid-sessions-no" class="dependent-master" value="false">
<label for="paid-sessions-no">No</label>
</div>
</div>
</div>
<div id="paid-sessions-genres" class="genres paid-sessions-dependent hidden">
<label>Desired Genre <a class="select-genre">select</a></label>
<span class="genre-list"></span>
</div>
<div class="field left hourly-rate-holder paid-sessions-dependent hidden">
<label>Hourly Rate:</label>
<input type="text" class="rate" id="hourly-rate" name="paid_sessions_hourly_rate">
</div>
<div class="field left paid-sessions-dependent hidden">
<label>Daily Rate:</label>
<input type="text" class="rate" id="daily-rate" name="paid_sessions_daily_rate">
</div>
</div>
<div class="clearall"></div>
<div>
<div class="left interest-options">
<label>I am available to play in free sessions <a class="help" help-topic="profile-interests-free-sessions">[?]</a></label>
<div class="yes-no-options">
<div class="option">
<input type="radio" name="free_sessions" id="free-sessions-yes" class="dependent-master" value="true">
<label for="free-sessions-yes">Yes</label>
</div>
<div class="option">
<input type="radio" name="free_sessions" id="free-sessions-no" class="dependent-master" value="false">
<label for="free-sessions-no">No</label>
</div>
</div>
</div>
<div id="free-sessions-genres" class="left genres free-sessions-dependent hidden">
<label>Desired Genre <a class="select-genre">select</a></label>
<span class="genre-list"></span>
</div>
</div>
<div class="clearall"></div>
<div>
<div class="left interest-options">
<label>I would like to co-write with partner(s) <a class="help" help-topic="profile-interests-cowrite-partners">[?]</a></label>
<div class="yes-no-options">
<div class="option">
<input type="radio" name="cowriting" id="cowriting-yes" class="dependent-master" value="true">
<label for="cowriting-yes">Yes</label>
</div>
<div class="option">
<input type="radio" name="cowriting" id="cowriting-no" class="dependent-master" value="false">
<label for="cowriting-no">No</label>
</div>
</div>
</div>
<div id="cowriting-genres" class="left genres cowriting-dependent hidden">
<label>Desired Genre <a class="select-genre">select</a></label>
<span class="genre-list"></span>
</div>
<div class="field left purpose cowriting-dependent hidden">
<label>Purpose</label>
<select id="cowriting-purpose" name="cowriting_purpose">
<option value="1">just for fun</option>
<option value="2">sell music</option>
</select>
</div>
</div>
<br><br>
<div class="right field actions">
<a class="account-edit-profile-cancel button-grey">CANCEL</a>&nbsp;&nbsp;
<a class="account-edit-profile-back button-grey">BACK</a>&nbsp;&nbsp;
<a class="account-edit-profile-submit button-orange">SAVE &amp; NEXT</a>
</div>
<div class="clearall"></div>
</form>
</div>
</div>
</div>
</div>
<div layout="screen" id="account-profile-samples" layout-id="account/profile/samples" class="screen secondary account-profile-samples">
<div class="content-head">
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<div class="content-body">
<div id="account-profile-content-scroller" class="content-body-scroller account-content-scroller">
<div class="content-wrapper account-profile">
<form id="account-edit-profile-samples-form">
<h2>edit profile: online presence &amp; performance samples</h2>
<div class="profile-online-sample-controls"><div class="profile-table"><div class="profile-row"><div class="quarter-cell"><label>Website (URL):</label><div class="url_validator presence site_validator"><input class="website" maxlength="4000" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell"><label>SoundCloud (username):</label><div class="soundcloud_validator presence site_validator"><input class="soundcloud-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell"><label>ReverbNation (username):</label><div class="reverbnation_validator presence site_validator"><input class="reverbnation-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell"><label>Bandcamp (username):</label><div class="bandcamp_validator presence site_validator"><input class="bandcamp-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div></div><div class="profile-row"><div class="quarter-cell cell"><label>Fandalism (username):</label><div class="fandalism_validator presence site_validator"><input class="fandalism-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell cell"><label>YouTube&nbsp;<a href="https://support.google.com/youtube/answer/2657968?ref_topic=3024172&amp;hl=en" rel="external">(channel name)</a></label><div class="youtube_validator presence site_validator"><input class="youtube-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell cell"><label>Facebook&nbsp;<a href="https://www.facebook.com/help/174987089221178" rel="external">(page name)</a></label><div class="facebook_validator presence site_validator"><input class="facebook-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div><div class="quarter-cell cell"><label>Twitter (username):</label><div class="twitter_validator presence site_validator"><input class="twitter-username" maxlength="100" type="text"><span class="spinner-small"></span></div></div></div><div class="profile-row recordings"><div class="thirds-cell cell"><label>JamKazam Recordings:</label><div class="sample site_validator"><a class="btn-add-jk-recording button-grey">BROWSE</a></div><div class="sample-list" source-type="jamkazam"><div class="empty">No recordings</div></div></div><div class="thirds-cell cell"><label>SoundCloud Recordings (URL):</label><div class="rec_soundcloud_validator sample site_validator"><input class="soundcloud-recording" maxlength="4000" type="text"><a class="btn-add-soundcloud-recording button-grey add-recording-source">ADD</a><span class="spinner-small"></span></div><div class="sample-list" source-type="soundcloud"><div class="empty">No recordings</div></div></div><div class="thirds-cell cell"><label>YouTube Videos (URL):</label><div class="rec_youtube_validator sample site_validator"><input class="youtube-video" maxlength="4000" type="text"><a class="btn-add-youtube-video button-grey add-recording-source">ADD</a><span class="spinner-small"></span></div><div class="sample-list" source-type="youtube"><div class="empty">No recordings</div></div></div></div></div></div>
<div class="clearall"></div>
<br><br>
<div class="right field actions">
<a class="account-edit-profile-cancel button-grey">CANCEL</a>&nbsp;
<a class="account-edit-profile-back button-grey">BACK</a>&nbsp;
<a class="account-edit-profile-submit button-orange">SAVE &amp; FINISH</a>
</div>
<div class="clearall"></div>
</form>
</div>
</div>
</div>
</div>
<!-- Profile Avatar Screen -->
<div layout="screen" layout-id="account/profile/avatar" class="screen secondary">
<!-- header -->
<div class="content-head">
<!-- icon -->
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<!-- section head text -->
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- end header -->
<div class="content-body">
<!-- profile scrolling area -->
<div id="account-profile-avatar-content-scroller" class="content-scroller account-content-scroller">
</div>
<!-- end content scrolling area -->
</div>
</div>
<script type="text/template" id="template-account-profile-avatar">
<!-- content wrapper -->
<div class="content-wrapper account-profile-avatar">
<br />
<div class="avatar-space"></div>
<form id="account-edit-avatar-form">
&nbsp;&nbsp; <a href="#" id="account-edit-avatar-upload" class="button-orange">UPLOAD</a>
</form>
<br clear="all" />
<div class="right">
<a id="account-edit-avatar-cancel" href="#" class="button-grey">CANCEL</a>&nbsp;&nbsp;
<a id="account-edit-avatar-delete" href="#" class="button-orange">DELETE AVATAR</a>&nbsp;&nbsp;
<a id="account-edit-avatar-submit" href="#" class="button-orange">UPDATE AVATAR</a>
</div>
<div class="clearall"></div>
</div>
<!-- end content wrapper -->
<!-- taken from filepicker.io -->
<script type="text/javascript">
(function(a){if(window.filepicker){return}var b=a.createElement("script");b.type="text/javascript";b.async=!0;b.src=("https:"===a.location.protocol?"https:":"http:")+"//api.filepicker.io/v1/filepicker.js";var c=a.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);var d={};d._queue=[];var e="pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");var f=function(a,b){return function(){b.push([a,arguments])}};for(var g=0;g<e.length;g++){d[e[g]]=f(e[g],d._queue)}window.filepicker=d})(document);
</script>
<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account/audio" class="screen secondary" id="account-audio-profile">
<!-- header -->
<div class="content-head">
<!-- icon -->
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<!-- section head text -->
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- end header -->
<!-- profile scrolling area -->
<div class="content-body">
<div id="account-audio-content-scroller" class="content-body-scroller account-content-scroller">
<!-- content wrapper -->
<div class="content-wrapper account-audio">
<br>
<div class="account-left">
<h2>audio profiles:</h2>
</div>
<table class="generaltable audioprofile f14" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th align="left">NAME</th>
<th class="noborder actions">ACTIONS</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br clear="all">
<div class="left">
<a href="#" data-purpose="add-profile" class="button-orange">ADD NEW GEAR</a>
<a href="#" data-purpose="reload-audio" class="button-orange">RESCAN SYSTEM FOR EXTERNAL DEVICES</a>
<span class="rescanning-notice"><span class="spinner-small"></span><span>Rescanning...</span></span>
</div>
<div class="right">
<a href="javascript:history.go(-1)" class="button-grey">BACK</a>
</div>
</div>
</div>
</div>
<!-- end content scrolling area -->
</div>
<script type="text/template" id="template-account-audio">
<tbody>
{% for (var i = 0; i < data.profiles.length; i++) { %}
{% var profile = data.profiles[i]; %}
<tr data-status="{{profile.class}}" data-current="{{profile.current}}">
<td>{{profile.id}} <span data-current="{{profile.current}}">{{profile.active_text}}</span></td>
<td class="actions">
<a href="#" data-id="{{profile.id}}" data-purpose="activate-audio-profile" class="button-orange">ACTIVATE</a>
{% if(data.is_admin) { %}
<a href="#" data-id="{{profile.id}}" data-purpose="loopback-audio-profile" class="button-orange">LOOPBACK (admin only)</a>
{% } %}
<a href="#" data-id="{{profile.id}}" data-purpose="configure-audio-profile" class="button-orange">CONFIGURE</a>
<a href="#" data-id="{{profile.id}}" data-purpose="delete-audio-profile" class="button-orange">DELETE</a></td>
</tr>
{% } %}
</tbody>
</script>
<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account/video" class="screen secondary" id="account-video-profile">
<!-- header -->
<div class="content-head">
<!-- icon -->
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<!-- section head text -->
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- end header -->
<!-- profile scrolling area -->
<div class="content-body">
<div id="account-video-content-scroller" class="content-body-scroller account-content-scroller">
<!-- content wrapper -->
<div class="content-wrapper account-video">
<div class="webcam-container">
</div>
</div>
</div>
</div>
<!-- end content scrolling area -->
</div>
<!-- Account Sessions Dialog -->
<div class="screen secondary" id="account-sessions" layout="screen" layout-id="account/sessions">
<div class="content-head">
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- sessions scrolling area -->
<div class="content-body">
<div class="content-body-scroller account-content-scroller" id="account-sessions-content-scroller">
<div class="content-wrapper account-sessions">
<div class="sessions-header">
<div class="left sessions-caption">
<h2>scheduled sessions:</h2>
</div>
<div class="right">
<a class="button-grey" href="javascript:history.go(-1)">BACK</a>
</div>
<div class="clearall"></div>
</div>
<div id="account-scheduled-sessions">
<table class="generaltable">
<thead></thead>
<tbody></tbody>
</table>
</div>
<div class="clearall"></div>
</div>
<div class="content-wrapper">
<div class="ics-feed-caption">Following is a URL for your personal JamKazam .ics calendar, which tracks all sessions and events to which you have RSVP'd:</div>
<div class="account-calendar"><div class="ics-feed-link">http://127.0.0.1:41029/api/users/b900991c-69af-4b6d-b9d3-9a75143d74cc/calendar.ics</div><div class="ics-help-links"><div class="ics-help-link"><a href="">How to subscribe to your calendar in Google Calendar</a></div><div class="ics-help-link"><a href="">How to subscribe to your calendar in Microsoft Outlook</a></div></div></div>
</div>
</div>
</div>
<!-- end content scrolling area -->
</div>
<script id="template-account-session" type="text/template">
<tbody>
{% _.each(data.sessions, function(session) { %}
<tr>
<td>
<div data-id="{{session.id}}">
<div class="session-left">Date/Time:</div>
<div class="session-right">
{{session.pretty_scheduled_start_with_timezone}}
</div>
<div class="clearall"></div>
<div class="session-left">Session:</div>
<div class="session-right">
{{session.name}}
</div>
<div class="clearall"></div>
<div class="session-left">Notifications:</div>
<div class="session-right">
{{session.notification_msg}}
</div>
<div class="clearall"></div>
<div class="session-left"></div>
<div class="session-right">
<a class="button-orange session-detail-button" href="#" session-id="{{session.id}}">DETAILS</a>
<a class="button-orange session-page-button" href="#" rel="external" session-id="{{session.id}}">SESSION PAGE</a>
{% if (data.current_user == session.user_id) { %}
<a class="button-orange session-cancel-button" href="#" session-id="{{session.id}}">CANCEL SESSION</a>
{% } %}
</div>
<hr class="clearall">
</div>
</td>
</tr>
{% }); %}
</tbody>
</script>
<!--Account jamtracks Dialog--><div class="screen secondary" id="account-jamtracks" layout="screen" layout-id="account/jamtracks"><div class="content-head"><div class="content-icon"><img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png"></div><h1>my account</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><!--jamtracks scrolling area--><div class="content-body"><div class="content-body-scroller account-content-scroller" id="account-jamtracks-content-scroller"><div class="content-wrapper account-jamtracks"><div class="jamtracks-header"><div class="left jamtracks-caption"><h2>my jamtracks:</h2></div><div class="clearall"></div></div><div id="account-my-jamtracks"><table class="generaltable"><thead><tr><th>TITLE</th><th>ORIGINAL ARTIST</th><th>ACTIONS</th></tr></thead><tbody><tr class="no-jamtracks-found hidden"><td colspan="3">You don't currently own any JamTracks. <a class="orange" href="/client#/jamtrack/search">Browse JamTracks Now</a></td></tr></tbody></table></div><div class="right"><a class="button-orange" href="/client#/jamtrack/search">JAMTRACKS</a><a class="button-grey" href="javascript:history.go(-1)"> BACK</a></div></div></div></div></div><script id="template-account-jamtrack" type="text/template"><tr data-genre="{{data.jamtrack.genre}}" data-id="{{data.jamtrack.id}}"><td>{{data.jamtrack.name}}</td><td>{{data.jamtrack.original_artist}}</td><td><div class="table-link"><a class="jamtrack-solo-session" href="#" jamtrack-id="{{data.jamtrack.id}}"> Get into solo session</a></div><div class="table-link"><a class="jamtrack-group-session" href="#" jamtrack-id="{{data.jamtrack.id}}">Get into session others can join</a></div></td></tr></script>
<!--Account affiliates Dialog--><div class="screen secondary" id="account-affiliate-partner" layout="screen" layout-id="account/affiliatePartner"><div class="content-head"><div class="content-icon"><img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png"></div><h1>my account</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><!--affiliates scrolling area--><div class="content-body"><div class="content-body-scroller account-content-scroller" id="account-affiliate-partner-content-scroller"><div class="content-wrapper account-affiliates"><div class="affiliates-header"><div class="left affiliates-caption"><h2>affiliate:</h2></div><div class="clearall"></div></div><div class="affiliate-partner-nav"><a id="affiliate-partner-agreement-link">agreement</a><a id="affiliate-partner-earnings-link">earnings</a><a id="affiliate-partner-signups-link">signups</a><a id="affiliate-partner-links-link">links</a><a class="active" id="affiliate-partner-account-link">account</a></div><div class="clearall"></div><div class="affiliate-partner-account"><div class="clearall"></div></div><div class="affiliate-partner-links"><div class="clearall"></div></div><div class="affiliate-partner-agreement"><div class="clearall"></div></div><div class="affiliate-partner-signups"><div class="clearall"></div></div><div class="affiliate-partner-earnings"><div class="clearall"></div></div><div id="affiliate-partner-tab-content"></div><div class="clearall"></div></div></div></div></div><script id="template-affiliate-partner-account" type="text/template"><div class="tab-account"><div class="right-col">We must have a complete mailing address and a valid tax ID in order to process and mail payments due to all affiliates.&nbsp;&nbsp;Per the terms of the affiliate agreement, if this information is not available within 90 days of the end of a calendar quarter, then any payment obligation due to the affiliate for such calendar quarter shall be considered fully and permanently discharged, and no further payment for such calendar quarter shall be due or payable to affiliate.<br /><br /><span>For fastest receipt of payment, please specify a PayPal.Me account (ex:<b>&nbsp; paypal.me/YourName</b>&nbsp; )</span><br /><br />So please provide this data, and be sure to keep it current!</div><div class="left-col"><div class="affiliate-label">Affiliate:</div><div class="w80">{{ data.partner_name }} ({{data.entity_type}})</div><br /><br /><div class="affiliate-label">Street Address 1: </div><input type="text" name="affiliate_partner_address1" id="affiliate_partner_address1" value="{{ data.address.address1 }}" class="w60" /><br /><div class="affiliate-label">Street Address 2: </div><input type="text" name="affiliate_partner_address2" id="affiliate_partner_address2" value="{{ data.address.address2 }}" class="w60" /><br /><div class="affiliate-label">City: </div><input type="text" name="affiliate_partner_city" id="affiliate_partner_city" value="{{ data.address.city }}" class="w60" /><br /><div class="affiliate-label">State/Region: </div><input type="text" name="affiliate_partner_state" id="affiliate_partner_state" value="{{ data.address.state }}" class="w60" /><br /><div class="affiliate-label">Zip/Postal Code: </div><input type="text" name="affiliate_partner_postal_code" id="affiliate_partner_postal_code" value="{{ data.address.postal_code }}" class="w60" /><br /><div class="affiliate-label">Country: </div><input type="text" name="affiliate_partner_country" id="affiliate_partner_country" value="{{ data.address.country }}" class="w60" /><br /><br /><div class="affiliate-label">Tax ID: </div><input type="text" name="affiliate_partner_tax_identifier" id="affiliate_partner_tax_identifier" value="{{ data.tax_identifier }}" class="w60" /><br /><br /><div class="affiliate-label">PayPal.Me:</div><input type="text" name="affiliate_partner_paypal_id" id="affiliate_partner_paypal_id" value="{{ data.paypal_id }}" class="w60" /><br /><br /><div class="spacer"></div><div class="input-buttons"><div class="right"><a class="button-grey" href="javascript:history.go(-1)"> CANCEL</a><a class="button-orange" href="#" id="affiliate-profile-account-submit">UPDATE</a></div></div></div><div class="clearall"></div></div><div class="clearall"></div></script><script id="template-affiliate-partner-agreement" type="text/template"><div class="agreement"><label class="partner-agreement">You are viewing:</label><select class="easydropdown" name="agreement"><option value="Current agreement in effect">Current agreement in effect</option></select><br /><h2>JamKazam Affiliate Agreement</h2><div class="execution-date">(you executed this Agreement on {{ window.JK.formatDate(data.signed_at) }})</div><!-- this was created by taking docx into Google Docs and Downloading as HTML -->
<div id="partner-agreement-v1">
<p class="c2"><span class="c0">Updated: February 9, 2021.</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">This Affiliate Agreement (this &ldquo;</span><span class="c0 c10">Agreement</span><span class="c0">&rdquo;) contains the terms and conditions that govern your participation in the JamKazam affiliate marketing program (the &ldquo;</span><span class="c0 c10">Program</span><span class="c0">&rdquo;). &ldquo;</span><span class="c0 c10">JamKazam</span><span class="c0">&rdquo;, &ldquo;</span><span class="c0 c10">we</span><span class="c0">,&rdquo; &ldquo;</span><span class="c0 c10">us</span><span class="c0">,&rdquo;
or &ldquo;</span><span class="c0 c10">our</span><span class="c0">&rdquo;
means JamKazam, Inc. &ldquo;</span><span class="c0 c10">You</span><span class="c0">&rdquo;
or &ldquo;</span><span class="c0 c10">your</span><span class="c0">&rdquo;
means the applicant. A &ldquo;</span><span class="c0 c10">site</span><span class="c0">&rdquo;
means a website. &ldquo;</span><span class="c0 c10">JamKazam Site</span><span class="c0">&rdquo; means the jamkazam.com website or a JamKazam applicaion or any other site that is owned or operated by or on behalf of us and which is identified as participating in the Program in the </span><span class="c0 c10 c17">Program Advertising Fee Schedule</span><span class="c0">&nbsp;in Section 10, as applicable. &ldquo;</span><span class="c0 c10">Your Site</span><span class="c0">&rdquo;
means any site(s), software application(s), or content that you create, own, or operate and link to the JamKazam Site. </span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">1. Description of the Program</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">The purpose of the Program is to permit you to advertise Products on Your Site and to earn advertising fees for Qualifying Purchases (defined in Section 7) made by your Qualifying Customers (defined in Section 7). A &ldquo;</span><span class="c0 c10">Product</span><span class="c0">&rdquo;
a product or service sold on the JamKazam Site and listed in the </span><span class="c0 c10 c17">Program Advertising Fee Schedule</span><span class="c0">&nbsp;in Section 10. In order to facilitate your advertisement of Products, we may make available to you data, images, text, link formats, widgets, links, and other linking tools, and other information in connection with the Program (&ldquo;Content&rdquo;). </span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">2. Enrollment, Suitability, and Communications</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0">To enroll in the Program, you must execute this Agreement by clicking the &ldquo;I Agree&rdquo;
button at the end of this Agreement, after having thoroughly reviewed the Agreement.</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Your Site may be considered unsuitable for participation in the Program resulting in termination of this Agreement by JamKazam if Your Site:</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<ul class="c6 lst-kix_list_47-0 start">
<li class="c3 c2"><span class="c0 c8">promotes or contains sexually explicit materials;</span></li>
<li class="c3 c2"><span class="c0 c8">promotes violence or contains violent materials;</span></li>
<li class="c3 c2"><span class="c0 c8">promotes or contains libelous or defamatory materials;</span></li>
<li class="c3 c2">
<span class="c0 c8">promotes discrimination, or employs discriminatory practices, based on race, sex, religion, nationality, disability, sexual orientation, or age;</span>
</li>
<li class="c3 c2"><span class="c0 c8">promotes or undertakes illegal activities;</span></li>
<li class="c3 c2">
<span class="c0 c8">is directed toward children under 13 years of age, as defined by the Children&rsquo;s Online Privacy Protection Act (15 U.S.C. &sect;&sect;
6501-6506) and any regulations promulgated thereunder;</span></li>
<li class="c3 c2">
<span class="c0 c8">includes any trademark of JamKazam or a variant or misspelling of a trademark of JamKazam in any domain name, subdomain name, or in any username, group name, or other identifier on any social networking site; or</span>
</li>
<li class="c3 c2"><span class="c0 c8">otherwise violates intellectual property rights.</span></li>
</ul>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">You will ensure that the information you provide in executing this Agreement and otherwise associated with your account, including your name, email address, mailing address, tax ID, and other information, is at all times complete, accurate, and up-to-date. We may send notifications (if any), reports (if any), and other communications relating to the Program and this Agreement to the email address then-currently associated with your JamKazam account. You will be deemed to have received all notifications, reports, and other communications sent to that email address, even if the email address associated with your account is no longer current. We may mail checks (if any) payable to you for advertising fees earned under this Agreement to the mailing address then-currently associated with your JamKazam account. You will be deemed to have received all checks sent to that mailing address, even if the mailing address associated with your account is no longer current. If we send a check to a mailing address that is no longer valid, we may, in our sole discretion, choose to issue a stop payment order for such a check and send a new check to a new current address that your provide, but in such a case, we will charge a US$50.00 fee for this exception process.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">If you are a Non-US person participating in the Program, you agree that you will perform all services under the Agreement outside the United States. </span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">3. Links on Your Site</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">After you have entered into this Agreement, you may display Special Links on Your Site. &ldquo;</span><span class="c0 c10">Special Links</span><span class="c0">&rdquo;
are links to the JamKazam Site that you place on Your Site in accordance with this Agreement, that properly utilize the special &ldquo;tagged&rdquo;
link formats we specify or provide. Special Links permit accurate tracking, reporting, and accrual of advertising fees. </span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">You may earn advertising fees only as described in Section 7 and only with respect to activity on the JamKazam Site occurring directly through Special Links. We will have no obligation to pay you advertising fees if you fail to properly format the links on Your Site to the JamKazam Site as Special Links, including to the extent that such failure may result in any reduction of advertising fee amounts that would otherwise be paid to you under this Agreement.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">4. Program Requirements</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0">You hereby consent to us:</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<ul class="c6 lst-kix_list_44-0 start">
<li class="c3 c2"><span class="c0 c8">sending you emails relating to the Program from time to time; and</span></li>
<li class="c3 c2">
<span class="c0 c8">monitoring, recording, using, and disclosing information about Your Site and visitors to Your Site that we obtain in connection with your display of Special Links in accordance with the </span><span class="c0 c10 c8 c17">JamKazam Privacy Policy</span><span class="c0 c8">.</span>
</li>
</ul>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">5. Responsibility for Your Site</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">You will be solely responsible for Your Site including its development, operation, and maintenance, and all materials that appear on or within it. For example, you will be solely responsible for:</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<ul class="c6 lst-kix_list_45-0 start">
<li class="c3 c2"><span class="c0 c8">the technical operation of Your Site and all related equipment;</span></li>
<li class="c3 c2">
<span class="c0 c8">displaying Special Links and Content on Your Site in compliance with this Agreement and any agreement between you and any other person or entity (including any restrictions or requirements placed on you by any person or entity that hosts Your Site);</span>
</li>
<li class="c3 c2">
<span class="c0 c8">creating and posting, and ensuring the accuracy, completeness, and appropriateness of, materials posted on Your Site (including all Product descriptions and other Product-related materials and any information you include within or associate with Special Links);</span>
</li>
<li class="c3 c2">
<span class="c0 c8">using the Content, Your Site, and the materials on or within Your Site in a manner that does not infringe, violate, or misappropriate any of our rights or those of any other person or entity (including copyrights, trademarks, privacy, publicity or other intellectual property or proprietary rights);</span>
</li>
<li class="c3 c2">
<span class="c0 c8">disclosing on Your Site accurately and adequately, either through a privacy policy or otherwise, how you collect, use, store, and disclose data collected from visitors, including, where applicable, that third parties (including us and other advertisers) may serve content and advertisements, collect information directly from visitors, and place or recognize cookies on visitors&rsquo;
browsers; and</span></li>
<li class="c3 c2">
<span class="c0 c8">any use that you make of the Content and the JamKazam Marks, whether or not permitted under this Agreement.</span>
</li>
</ul>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">We will have no liability for these matters or for any of your end users&rsquo; claims relating to these matters, and you agree to defend, indemnify, and hold us, our affiliates and licensors, and our and their respective employees, officers, directors, and representatives, harmless from and against all claims, damages, losses, liabilities, costs, and expenses (including attorneys&rsquo;
fees) relating to (a) Your Site or any materials that appear on Your Site, including the combination of Your Site or those materials with other applications, content, or processes; (b) the use, development, design, manufacture, production, advertising, promotion, or marketing of Your Site or any materials that appear on or within Your Site, and all other matters described in this Section 5; (c) your use of any Content, whether or not such use is authorized by or violates this Agreement or any applicable law; (d) your violation of any term or condition of this Agreement; or (e) your or your employees&#39; negligence or willful misconduct.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">6. Order Processing</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">We will process Product orders placed by Qualifying Customers (defined in Section 7) on the JamKazam Site. We reserve the right to reject orders that do not comply with any requirements on the JamKazam Site, as they may be updated from time to time. We will track Qualifying Purchases (defined in Section 7) for reporting and advertising fee accrual purposes and will make available to you reports summarizing those Qualifying Purchases.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">7. Advertising Fees</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">We will pay you advertising fees on Qualifying Purchases in accordance with Section 8 and the </span><span class="c0 c10 c17">Program Advertising Fee Schedule</span><span class="c0">&nbsp;in Section 10. Subject to the exclusions set forth below, a &ldquo;</span><span class="c0 c10">Qualifying Purchase</span><span class="c0">&rdquo;
occurs when a Qualifying Customer purchases and pays for a Product within three (3) years of the date on which such Qualifying Customer registered to create his/her JamKazam account. A &ldquo;</span><span class="c0 c10">Qualifying Customer</span><span class="c0">&rdquo;
is an end user who: (a) clicks through a Special Link on Your Site to the JamKazam Site; and (b) during the single Session created by this click through, registers to create a new JamKazam account. A &ldquo;</span><span class="c0 c10">Session</span><span class="c0">&rdquo;
begins when an end user clicks through a Special Link on Your Site to the JamKazam Site and ends when such end user leaves the JamKazam Site.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Qualifying Purchases exclude, and we will not pay advertising fees on any of, the following:</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<ul class="c6 lst-kix_list_46-0 start">
<li class="c3 c2">
<span class="c0 c8">any Product purchase that is not correctly tracked or reported because the links from Your Site to the JamKazam Site are not properly formatted;</span>
</li>
<li class="c3 c2">
<span class="c0 c8">any Product purchased through a Special Link by you or on your behalf, including Products you purchase through Special Links for yourself, friends, relatives, or associates;</span>
</li>
<li class="c3 c2">
<span class="c0 c8">any Product purchased through a Special Link that violates the terms of this Agreement;</span>
</li>
<li class="c2 c3"><span class="c0 c8">any Product order that is canceled or returned; </span></li>
<li class="c3 c2"><span class="c0 c8">any Product purchase that becomes classified as bad debt; or</span></li>
<li class="c3 c2">
<span class="c0 c8">any Product purchase for which we process a promotional discount against the transaction that makes such Product free.</span>
</li>
</ul>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">8. Advertising Fee Payment</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">We will pay you advertising fees on a quarterly basis for Qualifying Purchases paid for in a given calendar quarter, subject to any applicable withholding or deduction described below. We will pay you approximately 30 days following the end of each calendar quarter by mailing a check in the amount of the advertising fees you earn to the mailing address then-currently associated with your JamKazam account, or by or processing a digital funds transfer (e.g. PayPal) to an account you designate, but we may accrue and withhold payment of advertising fees until the total amount due to you is at least US$25.00. If you do not have a valid mailing address associated with your JamKazam account within 30 days of the end of a calendar quarter, we will withhold any unpaid accrued advertising fees until you have associated a valid mailing address and notified us that you have done so.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Further, any unpaid accrued advertising fees in your account may be subject to escheatment under state law. We may be obligated by law to obtain tax information from you if you are a U.S. citizen, U.S. resident, or U.S. corporation, or if your business is otherwise taxable in the U.S. If we request tax information from you and you do not provide it to us, we may (in addition to any other rights or remedies available to us) withhold your advertising fees until you provide this information or otherwise satisfy us that you are not a person from whom we are required to obtain tax information.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">9. Policies and Pricing</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Qualifying Customers who buy Products through this Program are our customers with respect to all activities they undertake in connection with the JamKazam Site. Accordingly, as between you and us, all pricing, terms of sale, rules, policies, and operating procedures concerning customer orders, customer service, and product sales set forth on the JamKazam Site will apply to such Qualifying Customers, and we may change them at any time in our sole discretion.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">10. Program Advertising Fee Schedule</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">We will determine and calculate amounts payable to you as advertising fees for Qualifying Purchases as set forth below (the &ldquo;</span><span class="c0 c10">Program Advertising Fee Schedule</span><span class="c0">&rdquo;).</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<a href="#" name="fcab919a72a4bb6a7511330807c3ec6acfd219eb"></a><a href="#" name="0"></a>
<ul class="c6 lst-kix_list_46-0 start">
<li class="c3 c2">
<div class="c0 c8">Product: Silver, Gold, and Platinum Monthly or Annual Subscriptions</div>
<div class="c2">
JamKazam will pay advertising fees of 30% of the net revenues from Qualifying Purchases by Qualifying Customers of these Products.
</div>
</li>
<li class="c3 c2">
<div class="c0 c8">Product: JamTracks</div>
<div class="c2">
JamKazam will pay US$0.25 per JamTrack sold as a Qualifying Purchase by Qualifying Customers of these Products.
</div>
</li>
</ul>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">From time to time, we may modify this Program Advertising Fee Schedule as part of modifications made to this Agreement.</span>
</p>
<p class="c2 c5"><span class="c0 c7 c13"></span></p>
<p class="c2"><span class="c0 c7">11. Limited License</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Subject to the terms of this Agreement and solely for the limited purposes of advertising Products on, and directing end users to, the JamKazam Site in connection with the Program, we hereby grant you a limited, revocable, non-transferable, non-sublicensable, non-exclusive, royalty-free license to (a) copy and display the Content solely on Your Site; and (b) use only those of our trademarks and logos that we may make available to you as part of Content (those trademarks and logos, collectively, &ldquo;</span><span class="c0 c10">JamKazam Marks</span><span class="c0">&rdquo;) solely on Your Site.</span>
</p>
<p class="c2 c5"><a name="h.gjdgxs"></a></p>
<p class="c2">
<span class="c0">The license set forth in this Section 11 will immediately and automatically terminate if at any time you do not timely comply with any obligation under this Agreement, or otherwise upon termination of this Agreement. In addition, we may terminate the license set forth in this Section 11 in whole or in part upon written notice to you. You will promptly remove from Your Site and delete or otherwise destroy all of the Content and JamKazam Marks with respect to which the license set forth in this Section 11 is terminated or as we may otherwise request from time to time.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">12. Reservation of Rights; Submissions</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Other than the limited licenses expressly set forth in Section 11, we reserve all right, title and interest (including all intellectual property and proprietary rights) in and to, and you do not, by virtue of this Agreement or otherwise, acquire any ownership interest or rights in or to, the Program, Special Links, Content, Products, any domain name owned or operated by us, our trademarks and logos (including the JamKazam Marks), and any other intellectual property and technology that we provide or use in connection with the Program (including any application program interfaces, software development kits, libraries, sample code, and related materials). If you provide us with suggestions, reviews, modifications, data, images, text, or other information or content about a Product or in connection with this Agreement, any Content, or your participation in the Program, or if you modify any Content in any way, (collectively, &ldquo;</span><span class="c0 c10">Your Submission</span><span class="c0">&rdquo;), you hereby irrevocably assign to us all right, title, and interest in and to Your Submission and grant us (even if you have designated Your Submission as confidential) a perpetual, paid-up royalty-free, nonexclusive, worldwide, irrevocable, freely transferable right and license to (a) use, reproduce, perform, display, and distribute Your Submission in any manner; (b) adapt, modify, re-format, and create derivative works of Your Submission for any purpose; (c) use and publish your name in the form of a credit in conjunction with Your Submission (however, we will not have any obligation to do so); and (d) sublicense the foregoing rights to any other person or entity. Additionally, you hereby warrant that: (y) Your Submission is your original work, or you obtained Your Submission in a lawful manner; and (z) our and our sublicensees&rsquo;
exercise of rights under the license above will not violate any person&rsquo;s or entity&rsquo;s rights, including any copyright rights. You agree to provide us such assistance as we may require to document, perfect, or maintain our rights in and to Your Submission.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">13. Compliance with Laws</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">In connection with your participation in the Program you will comply with all applicable laws, ordinances, rules, regulations, orders, licenses, permits, judgments, decisions, and other requirements of any governmental authority that has jurisdiction over you, including laws (federal, state, or otherwise) that govern marketing email (e.g., the CAN-SPAM Act of 2003).</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">14. Term and Termination</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">The term of this Agreement will begin upon your execution of this Agreement by clicking the &ldquo;I Agree&rdquo;
button at the end of this Agreement, only if such execution is processed and confirmed successfully by the JamKazam Site, and will end when terminated by either you or us. Either you or we may terminate this Agreement at any time, with or without cause, by giving the other party written notice of termination. Upon any termination of this Agreement, any and all licenses you have with respect to Content will automatically terminate, and you will immediately stop using the Content and JamKazam Marks and promptly remove from Your Site and delete or otherwise destroy all links to the JamKazam Site, all JamKazam Marks, all other Content, and any other materials provided or made available by or on behalf of us to you under this Agreement or otherwise in connection with the Program. We may withhold accrued unpaid advertising fees for a reasonable period of time following termination to ensure that the correct amount is paid (e.g., to account for any cancelations or returns). Upon any termination of this Agreement, all rights and obligations of the parties will be extinguished, except that the rights and obligations of the parties under Sections 5, 9, 12, 13, 14, 16, 17, 18, 19, and 20, together with any of our payment obligations that accrue in accordance with Sections 6, 7, 8, and 10 following the termination of this Agreement, will survive the termination of this Agreement. No termination of this Agreement will relieve either party for any liability for any breach of, or liability accruing under, this Agreement prior to termination.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">15. Modification</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">We may modify any of the terms and conditions contained in this Agreement at any time and in our sole discretion by posting a change notice or revised agreement on the JamKazam Site or by sending notice of such modification to you by email to the email address then-currently associated with your JamKazam account (any such change by email will be effective on the date specified in such email and will in no event be less than two business days after the date the email is sent). Modifications may include, for example, changes to the Program Advertising Fee Schedule, payment procedures, and other Program requirements. IF ANY MODIFICATION IS UNACCEPTABLE TO YOU, YOUR ONLY RECOURSE IS TO TERMINATE THIS AGREEMENT. YOUR CONTINUED PARTICIPATION IN THE PROGRAM FOLLOWING THE EFFECTIVE DATE OF ANY MODIFICATION (E.G., THE DATE OF OUR POSTING OF A CHANGE NOTICE OR REVISED AGREEMENT ON THE JAMKAZAM SITE OR THE DATE SPECIFIED IN ANY EMAIL TO YOU REGARDING SUCH MODIFICATION) WILL CONSTITUTE YOUR BINDING ACCEPTANCE OF THE CHANGE.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">16. Relationship of Parties</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">You and we are independent contractors, and nothing in this Agreement will create any partnership, joint venture, agency, franchise, sales representative, or employment relationship between you and us or our respective affiliates. You will have no authority to make or accept any offers or representations on our behalf. You will not make any statement, whether on Your Site or otherwise, that contradicts or may contradict anything in this section. If you authorize, assist, encourage, or facilitate another person or entity to take any action related to the subject matter of this Agreement, you will be deemed to have taken the action yourself.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">17. Limitation of Liability</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">WE WILL NOT BE LIABLE FOR INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR EXEMPLARY DAMAGES (INCLUDING ANY LOSS OF REVENUE, PROFITS, GOODWILL, USE, OR DATA) ARISING IN CONNECTION WITH THIS AGREEMENT, THE PROGRAM, THE JAMKAZAM SITE, OR THE SERVICE OFFERINGS (DEFINED BELOW), EVEN IF WE HAVE BEEN ADVISED OF THE POSSIBILITY OF THOSE DAMAGES. FURTHER, OUR AGGREGATE LIABILITY ARISING IN CONNECTION WITH THIS AGREEMENT, THE PROGRAM, THE JAMKAZAM SITE, AND THE SERVICE OFFERINGS WILL NOT EXCEED THE TOTAL ADVERTISING FEES PAID OR PAYABLE TO YOU UNDER THIS AGREEMENT IN THE TWELVE MONTHS IMMEDIATELY PRECEDING THE DATE ON WHICH THE EVENT GIVING RISE TO THE MOST RECENT CLAIM OF LIABILITY OCCURRED.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">18. Disclaimers</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">THE PROGRAM, THE JAMKAZAM SITE, ANY PRODUCTS AND SERVICES OFFERED ON THE JAMKAZAM SITE, ANY SPECIAL LINKS, LINK FORMATS, CONTENT, JAMKAZAM.COM DOMAIN NAME, OUR TRADEMARKS AND LOGOS (INCLUDING THE JAMKAZAM MARKS), AND ALL TECHNOLOGY, SOFTWARE, FUNCTIONS, MATERIALS, DATA, IMAGES, TEXT, AND OTHER INFORMATION AND CONTENT PROVIDED OR USED BY OR ON BEHALF OF US OR LICENSORS IN CONNECTION WITH THE PROGRAM (COLLECTIVELY THE &ldquo;SERVICE OFFERINGS&rdquo;) ARE PROVIDED &ldquo;AS IS.&rdquo;
NEITHER WE NOR ANY OF OUR LICENSORS MAKE ANY REPRESENTATION OR WARRANTY OF ANY KIND, WHETHER EXPRESS, IMPLIED, STATUTORY, OR OTHERWISE WITH RESPECT TO THE SERVICE OFFERINGS. EXCEPT TO THE EXTENT PROHIBITED BY APPLICABLE LAW, WE AND OUR LICENSORS DISCLAIM ALL WARRANTIES WITH RESPECT TO THE SERVICE OFFERINGS, INCLUDING ANY IMPLIED WARRANTIES OF MERCHANTABILITY, SATISFACTORY QUALITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND QUIET ENJOYMENT, AND ANY WARRANTIES ARISING OUT OF ANY COURSE OF DEALING, PERFORMANCE, OR TRADE USAGE. WE MAY DISCONTINUE ANY SERVICE OFFERING, OR MAY CHANGE THE NATURE, FEATURES, FUNCTIONS, SCOPE, OR OPERATION OF ANY SERVICE OFFERING, AT ANY TIME AND FROM TIME TO TIME. NEITHER WE NOR ANY OF OUR LICENSORS WARRANT THAT THE SERVICE OFFERINGS WILL CONTINUE TO BE PROVIDED, WILL FUNCTION AS DESCRIBED, CONSISTENTLY OR IN ANY PARTICULAR MANNER, OR WILL BE UNINTERRUPTED, ACCURATE, ERROR FREE, OR FREE OF HARMFUL COMPONENTS. NEITHER WE NOR ANY OF OUR LICENSORS WILL BE RESPONSIBLE FOR (A) ANY ERRORS, INACCURACIES, OR SERVICE INTERRUPTIONS, INCLUDING POWER OUTAGES OR SYSTEM FAILURES; OR (B) ANY UNAUTHORIZED ACCESS TO OR ALTERATION OF, OR DELETION, DESTRUCTION, DAMAGE, OR LOSS OF, YOUR SITE OR ANY DATA, IMAGES, TEXT, OR OTHER INFORMATION OR CONTENT. NO ADVICE OR INFORMATION OBTAINED BY YOU FROM US OR FROM ANY OTHER PERSON OR ENTITY OR THROUGH THE PROGRAM, CONTENT, OR THE JAMKAZAM SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN THIS AGREEMENT. FURTHER, NEITHER WE NOR ANY OF OUR LICENSORS WILL BE RESPONSIBLE FOR ANY COMPENSATION, REIMBURSEMENT, OR DAMAGES ARISING IN CONNECTION WITH (X) ANY LOSS OF PROSPECTIVE PROFITS OR REVENUE, ANTICIPATED SALES, GOODWILL, OR OTHER BENEFITS, (Y) ANY INVESTMENTS, EXPENDITURES, OR COMMITMENTS BY YOU IN CONNECTION WITH THIS AGREEMENT OR YOUR PARTICIPATION IN THE PROGRAM, OR (Z) ANY TERMINATION OF THIS AGREEMENT OR YOUR PARTICIPATION IN THE PROGRAM.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">19. Disputes</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Any dispute relating in any way to the Program or this Agreement will be resolved by binding arbitration, rather than in court, except that you may assert claims in small claims court if your claims qualify. The Federal Arbitration Act and federal arbitration law and the laws of the state of Texas, without regard to principles of conflict of laws, will govern this Agreement and any dispute of any sort that might arise between you and us.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">There is no judge or jury in arbitration, and court review of an arbitration award is limited. However, an arbitrator can award on an individual basis the same damages and relief as a court (including injunctive and declaratory relief or statutory damages), and must follow the terms of this Agreement as a court would.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">To begin an arbitration proceeding, you must send a letter requesting arbitration and describing your claim to us at: JamKazam, Inc., Attn: Legal Department, 3924 Knollwood Drive, Austin TX 78731. The arbitration will be conducted by the American Arbitration Association (&ldquo;AAA&rdquo;) under its rules, including the AAA&rsquo;s Supplementary Procedures for Consumer-Related Disputes. The AAA&rsquo;s rules are available at www.adr.org or by calling 1-800-778-7879. Payment of all filing, administration and arbitrator fees will be governed by the AAA&rsquo;s rules. We will reimburse those fees for claims totaling less than $10,000 unless the arbitrator determines the claims are frivolous. Likewise, we will not seek attorneys&rsquo;
fees and costs in arbitration unless the arbitrator determines the claims are frivolous. You may choose to have the arbitration conducted by telephone, based on written submissions, or in person in the county where you live or at another mutually agreed location.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">We each agree that any dispute resolution proceedings will be conducted only on an individual basis and not in a class, consolidated or representative action. If for any reason a claim proceeds in court rather than in arbitration, we each waive any right to a jury trial. We also both agree that you or we may bring suit in court to enjoin infringement or other misuse of intellectual property rights.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Notwithstanding anything to the contrary in this Agreement, we may seek injunctive or other relief in any state, federal, or national court of competent jurisdiction for any actual or alleged infringement of our or any other person or entity&rsquo;s intellectual property or proprietary rights. You further acknowledge and agree that our rights in the Content are of a special, unique, extraordinary character, giving them peculiar value, the loss of which cannot be readily estimated or adequately compensated for in monetary damages.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0 c7">20. Miscellaneous</span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">You acknowledge and agree that we may at any time (directly or indirectly) solicit customer referrals on terms that may differ from those contained in this Agreement or operate sites that are similar to or compete with Your Site. You may not assign this Agreement, by operation of law or otherwise, without our express prior written approval. Subject to that restriction, this Agreement will be binding on, inure to the benefit of, and be enforceable against the parties and their respective successors and assigns. Our failure to enforce your strict performance of any provision of this Agreement will not constitute a waiver of our right to subsequently enforce such provision or any other provision of this Agreement. Whenever used in this Agreement, the terms &ldquo;include(s),&rdquo; &ldquo;including,&rdquo; &ldquo;e.g.,&rdquo;
and &ldquo;for example&rdquo; mean, respectively, &ldquo;include(s), without limitation,&rdquo; &ldquo;including, without limitation,&rdquo; &ldquo;e.g., without limitation,&rdquo;
and &ldquo;for example, without limitation.&rdquo; Any determinations or updates that may be made by us, any actions that may be taken by us, and any approvals that may be given by us under this Agreement, may be made, taken, or given in our sole discretion.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">BY CLICKING THE &quot;I AGREE&quot; BUTTON BELOW, YOU AGREE TO THE TERMS AND CONDITIONS OF THIS AGREEMENT, OR BY CONTINUING TO PARTICIPATE IN THE PROGRAM FOLLOWING OUR POSTING OF A CHANGE NOTICE OR REVISED AGREEMENT ON THE JAMKAZAM.COM SITE, YOU (A) AGREE TO BE BOUND BY THIS AGREEMENT; (B) ACKNOWLEDGE AND AGREE THAT YOU HAVE INDEPENDENTLY EVALUATED THE DESIRABILITY OF PARTICIPATING IN THE PROGRAM AND ARE NOT RELYING ON ANY REPRESENTATION, GUARANTEE, OR STATEMENT OTHER THAN AS EXPRESSLY SET FORTH IN THIS AGREEMENT; AND (C) HEREBY REPRESENT AND WARRANT THAT YOU ARE LAWFULLY ABLE TO ENTER INTO CONTRACTS (E.G., YOU ARE NOT A MINOR) AND THAT YOU ARE AND WILL REMAIN IN COMPLIANCE WITH THIS AGREEMENT. IN ADDITION, IF THIS AGREEMENT IS BEING AGREED TO BY A COMPANY OR OTHER LEGAL ENTITY, THEN THE PERSON AGREEING TO THIS AGREEMENT ON BEHALF OF THAT COMPANY OR ENTITY HEREBY REPRESENTS AND WARRANTS THAT HE OR SHE IS AUTHORIZED AND LAWFULLY ABLE TO BIND THAT COMPANY OR ENTITY TO THIS AGREEMENT.</span>
</p>
<!--
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2"><span class="c0">Radio buttons for:</span></p>
<ul class="c6 lst-kix_list_43-0 start">
<li class="c3 c2"><span class="c0 c8">I am entering into this Agreement as an individual</span></li>
<li class="c3 c2">
<span class="c0 c8">I am executing this Agreement on behalf of the company or entity listed below</span></li>
</ul>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">If the user clicks the entity radio button above, we display an Entity Name label and associated text entry box, and an Entity Type label with a drop down list box with the following options: Sole Proprietorship, Limited Liability Company (LLC), S Corporation, C Corporation, Partnership, Trust/Estate, and Other.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2">
<span class="c0">Green &ldquo;I Agree&rdquo; button on the left / centered. Red &ldquo;I Do Not Agree&rdquo; button on the right / centered.</span>
</p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2 c5"><span class="c0"></span></p>
<p class="c2 c5"><span></span></p>
-->
<div><p class="c2 c21">
<span class="c8 c14">JamKazam Confidential&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="c14 c8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;02/09/2021</span>
</p></div>
</div><div class="input-buttons"><div class="right"><a class="button-orange" href="/client#/account">BACK TO ACCOUNT</a></div></div></div></script><script id="template-affiliate-partner-signups" type="text/template"><table class="traffic-table jamtable"><thead><tr><th class="day">MONTH</th><th class="signups">SIGNUPS</th><th class="visits">VISITS</th></tr></thead><tbody></tbody></table></script><script id="template-affiliate-partner-links" type="text/template"><div class="links"><p class="prompt">This page provides you with a list of ready-to-use links you can share with your followers to let them know about JamKazam. These links include your unique affiliate ID, and users who follow these links to JamKazam and sign up for a JamKazam account will be tagged with your affiliate ID, so that when they purchase a subscription and/or JamTracks, you will be paid a revenue share on their purchase payments per the terms of the affiliate agreement.</p><p class="prompt">Click select link next to the link you want to use, then copy the link to the clipboard and paste it wherever you want to share it.</p><table class="links-table"><thead><tr><th class="target">TARGET PAGE</th><th class="copy-link"></th><th class="url">URL</th></tr></thead><tbody></tbody></table></div></script><script id="template-affiliate-partner-signups-row" type="text/template"><tr><td class="month">{{data.month}}</td><td class="signups">{{data.signups}}</td><td class="visits">{{data.visits}}</td></tr></script><script id="template-affiliate-partner-earnings" type="text/template"><table class="payment-table jamtable"><thead><tr><th class="month">MONTH</th><th class="sales">JAMTRACKS</th><th class="subscriptions">SUBSCRIPTIONS</th><th class="earnings">AFFILIATE EARNINGS</th></tr></thead><tbody></tbody></table></script><script id="template-affiliate-partner-earnings-row" type="text/template"><tr data-type="{{data.payment_type}}"><td class="month">{{data.time}}</td><td class="sales">{{data.sold}}</td><td class="subscriptions">{{ data.subscriptions }}</td><td class="earnings">{{data.earnings}}</td></tr></script><script id="template-affiliate-link-entry" type="text/template"><tr><td class="target">{{data.target}}</td><td class="copy-link"><a href="#">select link</a></td><td class="url"><input type="text" value="{{data.url}}" /></td></tr></script>
<!-- Account Sessions Dialog -->
<div class="screen secondary" id="account-session-detail" layout="screen" layout-arg="id" layout-id="account/sessionDetail">
<div class="content-head">
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- session detail area -->
<div class="content-body">
<div class="content-body-scroller session-detail-scroller" id="session-detail-content-scroller">
<div class="content-wrapper account-session-detail">
<div class="sessions-header">
<div class="left sessions-caption">
<h2>session details:</h2>
</div>
<div class="right session-buttons">
<a class="cancel-rsvp button-orange" href="#">CANCEL RSVP</a>
<a class="session-detail-page button-orange" href="#" rel="external">SESSION PAGE</a>
<a class="invite-others button-orange" href="#" layout-link="select-invites">INVITE OTHERS</a>
</div>
<div class="clearall"></div>
</div>
<div class="paginate-wait">
Fetching session details...
<div class="spinner-small"></div>
</div>
<div id="account-session-detail-div"></div>
<div class="clearall"></div>
</div>
</div>
</div>
<!-- end content scrolling area -->
</div>
<script id="template-account-session-detail" type="text/template">
{% if (data.has_pending) { %}
<div class="pending-rsvps dark-box">
<div class="box-header">
<h2 class="left">
RSVPs
</h2>
<div class="right rsvp-help-notice">
{{data.notification_msg}}
</div>
<div class="clearall"></div>
</div>
<div id="pendingRSVPs">
<table class="rsvp-table">
<tbody>
{{data.pending_rsvps}}
</tbody>
</table>
</div>
</div>
{% } %}
<div class="session-musicians dark-box">
<div class="box-header">
<h2 class="left">
Session Musicians
</h2>
<div class="clearall"></div>
</div>
<div id="session-rsvps">
<div class="musician-left">
RSVPs
</div>
<div class="musician-right">
<table class="rsvp-table">
<tbody>
{{data.session_rsvps}}
</tbody>
</table>
</div>
<div class="clearall"></div>
</div>
<div id="still-needed">
<div class="musician-left">
Still Needed
</div>
<div class="musician-right">
<table class="rsvp-table">
<tbody>
{{data.still_needed}}
</tbody>
</table>
</div>
<div class="clearall"></div>
</div>
<div id="invited-users">
<div class="musician-left">
Invited
</div>
<div class="musician-right">
<table class="rsvp-table">
<tbody>
<tr>
{{data.invited_users}}
</tr>
</tbody>
</table>
</div>
<div class="clearall"></div>
</div>
</div>
<div class="session-properties dark-box">
<div class="box-header">
<h2 class="left">
Session Properties
</h2>
<div class="right">
{% if (data.is_owner) { %}
<a class="button-orange update-session" href="/client#/account/sessionProperties/{{data.id}}">UPDATE</a>
{% } %}
</div>
<div class="clearall"></div>
</div>
<div id="session-properties">
{{data.session_properties}}
</div>
</div>
</script>
<script id="template-account-pending-rsvp" type="text/template">
<tr>
<td class="avatar-cell">
<a class="avatar-tiny" hoveraction="musician" href="/client#/profile/{{data.user_id}}" user-id="{{data.user_id}}">
<img src="{{data.avatar_url}}">
</a>
</td>
<td>
{{data.user_name}}
</td>
<td>
{{data.instruments}}
</td>
<td>
{{data.latency}}
</td>
<td class="rsvp-buttons">
<a class="button-orange left" href="/client#/profile/{{data.user_id}}" user-id="{{data.user_id}}">PROFILE</a>
<a class="button-orange left approveRsvpRequest" data-instrument-text="{{data.instrument_text}}" href="#" request-id="{{data.request_id}}" user-id="{{data.user_id}}" user-name="{{data.user_name}}">APPROVE</a>
<a class="button-orange left declineRsvpRequest" href="#" request-id="{{data.request_id}}" user-id="{{data.user_id}}">DECLINE</a>
<div class="clearall"></div>
</td>
<div class="clearall"></div>
</tr>
</script>
<script id="template-account-session-rsvp" type="text/template">
<tr>
<td class="avatar-cell">
<a class="avatar-tiny" hoveraction="musician" href="/client#/profile/{{data.id}}" user-id="{{data.id}}">
<img src="{{data.avatar_url}}">
</a>
</td>
<td>
{{data.user_name}}
</td>
<td>
{{data.instruments}}
</td>
<td>
{{data.latency}}
</td>
<td class="rsvp-buttons">
{% if (data.is_owner == true) { %}
<a class="button-orange cancelSessionRsvp" href="#" request-id="{{data.request_id}}">CANCEL</a>
{% }; %}
</td>
</tr>
<div class="clearall"></div>
</script>
<script id="template-account-session-properties" type="text/template">
<div class="session-properties-left">Date/Time:</div>
<div class="session-properties-right">
{{data.pretty_scheduled_start_with_timezone}}
</div>
<div class="clearall session-properties-left">Genre:</div>
<div class="session-properties-right">
{{data.genres}}
</div>
<div class="clearall session-properties-left">Name:</div>
<div class="session-properties-right">
{{data.name}}
</div>
<div class="clearall session-properties-left">Description:</div>
<div class="session-properties-right">
{{data.description}}
</div>
<div class="clearall session-properties-left">Notation Files:</div>
<div class="session-properties-right">
<table class="rsvp-table">
<tbody>
<tr>
{% _.each(data.music_notations, function(notation) { %}
<td>
<a href="/music_notations/{{notation.id}}">
{{notation.file_name}}
</a>
</td>
{% }); %}
</tr>
</tbody>
</table>
{{data.notations}}
</div>
<div class="clearall session-properties-left">Language:</div>
<div class="session-properties-right">
{{data.language_description}}
</div>
<div class="clearall session-properties-left">Access:</div>
<div class="session-properties-right">
{{data.musician_access_description}} {{data.fan_access_description}}
</div>
<div class="clearall session-properties-left">Legal:</div>
<div class="session-properties-right">
{{data.legal_policy}}
</div>
<div class="clearall session-properties-left">Fan Page:</div>
<div class="session-properties-right">
{{data.share_url}}
</div>
<div class="clearall"></div>
</script>
<script id="template-account-invited" type="text/template">
<td>
<a class="avatar-tiny" hoveraction="musician" href="#" user-id="{{data.user_id}}">
<img src="{{data.avatar_url}}">
</a>
</td>
</script>
<!-- / also used by musicians page -->
<script id="template-account-session-latency" type="text/template">
<span class="latency {{data.latency_style}}" data-audio-latency="{{data.audio_latency || &#39;&#39;}}" data-full-score="{{data.full_score || &#39;&#39;}}" data-internet-score="{{data.internet_score || &#39;&#39;}}" data-user-id="{{data.id}}">
{{data.latency_text}}
</span>
<span class="latency-info">
{{data.latency_info}}
</span>
</script>
<!-- Account Sessions Dialog -->
<div class="screen secondary" id="account-session-properties" layout="screen" layout-arg="id" layout-id="account/sessionProperties">
<div class="content-head">
<div class="content-icon">
<img width="27" height="20" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png">
</div>
<h1>my account</h1>
<!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div>
<!-- session detail area -->
<div class="content-body">
<div class="content-body-scroller session-detail-scroller" id="session-properties-content-scroller">
<div class="content-wrapper account-session-properties">
<div id="account-session-properties-div">
<div class="left-panel">
<div class="right-no-left">
<strong style="font-weight: bold;">Date &amp; Time</strong>
</div>
<div class="clearall left-column">
Date:
</div>
<div class="right-column">
<input id="session-prop-start-date" type="text">
</div>
<div class="clearall right-no-left">
<div class="icheckbuttons datetime_tbd_check">
<input id="date_time_tbd" type="checkbox">
</div>
<label class="datetime_tbd_label" for="date_time_tbd">Date and time TBD</label>
<div class="clearall"></div>
</div>
<div class="clearall left-column">
Start:
</div>
<div class="right-column">
<select id="start-time-prop-list"></select>
</div>
<div class="clearall left-column">
End:
</div>
<div class="right-column">
<select id="end-time-prop-list"></select>
</div>
<div class="clearall left-column">
Time Zone:
</div>
<div class="right-column">
<select name="timezone-list" id="timezone-prop-list" style="width: 100%"><option value="International Date Line West,Etc/GMT+12" class="label" data-tz="Etc/GMT+12" data-utc-offset="-43200">(GMT-12:00) Etc/GMT+12</option><option value="Midway Island,Pacific/Midway" class="label" data-tz="Pacific/Midway" data-utc-offset="-39600">(GMT-11:00) Pacific/Midway</option><option value="American Samoa,Pacific/Pago_Pago" class="label" data-tz="Pacific/Pago_Pago" data-utc-offset="-39600">(GMT-11:00) Pacific/Pago_Pago</option><option value="Hawaii,Pacific/Honolulu" class="label" data-tz="Pacific/Honolulu" data-utc-offset="-36000">(GMT-10:00) Pacific/Honolulu</option><option value="Alaska,America/Juneau" class="label" data-tz="America/Juneau" data-utc-offset="-32400">(GMT-09:00) America/Juneau</option><option value="Pacific Time (US &amp; Canada),America/Los_Angeles" class="label" data-tz="America/Los_Angeles" data-utc-offset="-28800">(GMT-08:00) America/Los_Angeles</option><option value="Tijuana,America/Tijuana" class="label" data-tz="America/Tijuana" data-utc-offset="-28800">(GMT-08:00) America/Tijuana</option><option value="Mountain Time (US &amp; Canada),America/Denver" class="label" data-tz="America/Denver" data-utc-offset="-25200">(GMT-07:00) America/Denver</option><option value="Arizona,America/Phoenix" class="label" data-tz="America/Phoenix" data-utc-offset="-25200">(GMT-07:00) America/Phoenix</option><option value="Chihuahua,America/Chihuahua" class="label" data-tz="America/Chihuahua" data-utc-offset="-21600">(GMT-06:00) America/Chihuahua</option><option value="Mazatlan,America/Mazatlan" class="label" data-tz="America/Mazatlan" data-utc-offset="-25200">(GMT-07:00) America/Mazatlan</option><option value="Central Time (US &amp; Canada),America/Chicago" class="label" data-tz="America/Chicago" data-utc-offset="-21600">(GMT-06:00) America/Chicago</option><option value="Saskatchewan,America/Regina" class="label" data-tz="America/Regina" data-utc-offset="-21600">(GMT-06:00) America/Regina</option><option value="Guadalajara,America/Mexico_City" class="label" data-tz="America/Mexico_City" data-utc-offset="-21600">(GMT-06:00) America/Mexico_City</option><option value="Mexico City,America/Mexico_City" class="label" data-tz="America/Mexico_City" data-utc-offset="-21600">(GMT-06:00) America/Mexico_City</option><option value="Monterrey,America/Monterrey" class="label" data-tz="America/Monterrey" data-utc-offset="-21600">(GMT-06:00) America/Monterrey</option><option value="Central America,America/Guatemala" class="label" data-tz="America/Guatemala" data-utc-offset="-21600">(GMT-06:00) America/Guatemala</option><option value="Eastern Time (US &amp; Canada),America/New_York" class="label" data-tz="America/New_York" data-utc-offset="-18000">(GMT-05:00) America/New_York</option><option value="Indiana (East),America/Indiana/Indianapolis" class="label" data-tz="America/Indiana/Indianapolis" data-utc-offset="-18000">(GMT-05:00) America/Indiana/Indianapolis</option><option value="Bogota,America/Bogota" class="label" data-tz="America/Bogota" data-utc-offset="-18000">(GMT-05:00) America/Bogota</option><option value="Lima,America/Lima" class="label" data-tz="America/Lima" data-utc-offset="-18000">(GMT-05:00) America/Lima</option><option value="Quito,America/Lima" class="label" data-tz="America/Lima" data-utc-offset="-18000">(GMT-05:00) America/Lima</option><option value="Atlantic Time (Canada),America/Halifax" class="label" data-tz="America/Halifax" data-utc-offset="-14400">(GMT-04:00) America/Halifax</option><option value="Caracas,America/Caracas" class="label" data-tz="America/Caracas" data-utc-offset="-14400">(GMT-04:00) America/Caracas</option><option value="La Paz,America/La_Paz" class="label" data-tz="America/La_Paz" data-utc-offset="-14400">(GMT-04:00) America/La_Paz</option><option value="Santiago,America/Santiago" class="label" data-tz="America/Santiago" data-utc-offset="-14400">(GMT-04:00) America/Santiago</option><option value="Newfoundland,America/St_Johns" class="label" data-tz="America/St_Johns" data-utc-offset="-12600">(GMT-03:30) America/St_Johns</option><option value="Brasilia,America/Sao_Paulo" class="label" data-tz="America/Sao_Paulo" data-utc-offset="-10800">(GMT-03:00) America/Sao_Paulo</option><option value="Buenos Aires,America/Argentina/Buenos_Aires" class="label" data-tz="America/Argentina/Buenos_Aires" data-utc-offset="-10800">(GMT-03:00) America/Argentina/Buenos_Aires</option><option value="Montevideo,America/Montevideo" class="label" data-tz="America/Montevideo" data-utc-offset="-10800">(GMT-03:00) America/Montevideo</option><option value="Georgetown,America/Guyana" class="label" data-tz="America/Guyana" data-utc-offset="-14400">(GMT-04:00) America/Guyana</option><option value="Puerto Rico,America/Puerto_Rico" class="label" data-tz="America/Puerto_Rico" data-utc-offset="-14400">(GMT-04:00) America/Puerto_Rico</option><option value="Mid-Atlantic,Atlantic/South_Georgia" class="label" data-tz="Atlantic/South_Georgia" data-utc-offset="-7200">(GMT-02:00) Atlantic/South_Georgia</option><option value="Azores,Atlantic/Azores" class="label" data-tz="Atlantic/Azores" data-utc-offset="-3600">(GMT-01:00) Atlantic/Azores</option><option value="Cape Verde Is.,Atlantic/Cape_Verde" class="label" data-tz="Atlantic/Cape_Verde" data-utc-offset="-3600">(GMT-01:00) Atlantic/Cape_Verde</option><option value="Dublin,Europe/Dublin" class="label" data-tz="Europe/Dublin" data-utc-offset="0">(GMT+00:00) Europe/Dublin</option><option value="Edinburgh,Europe/London" class="label" data-tz="Europe/London" data-utc-offset="0">(GMT+00:00) Europe/London</option><option value="Lisbon,Europe/Lisbon" class="label" data-tz="Europe/Lisbon" data-utc-offset="0">(GMT+00:00) Europe/Lisbon</option><option value="London,Europe/London" class="label" data-tz="Europe/London" data-utc-offset="0">(GMT+00:00) Europe/London</option><option value="Casablanca,Africa/Casablanca" class="label" data-tz="Africa/Casablanca" data-utc-offset="0">(GMT+00:00) Africa/Casablanca</option><option value="Monrovia,Africa/Monrovia" class="label" data-tz="Africa/Monrovia" data-utc-offset="0">(GMT+00:00) Africa/Monrovia</option><option value="UTC,Etc/UTC" class="label" data-tz="Etc/UTC" data-utc-offset="0">(GMT+00:00) Etc/UTC</option><option value="Belgrade,Europe/Belgrade" class="label" data-tz="Europe/Belgrade" data-utc-offset="3600">(GMT+01:00) Europe/Belgrade</option><option value="Bratislava,Europe/Bratislava" class="label" data-tz="Europe/Bratislava" data-utc-offset="3600">(GMT+01:00) Europe/Bratislava</option><option value="Budapest,Europe/Budapest" class="label" data-tz="Europe/Budapest" data-utc-offset="3600">(GMT+01:00) Europe/Budapest</option><option value="Ljubljana,Europe/Ljubljana" class="label" data-tz="Europe/Ljubljana" data-utc-offset="3600">(GMT+01:00) Europe/Ljubljana</option><option value="Prague,Europe/Prague" class="label" data-tz="Europe/Prague" data-utc-offset="3600">(GMT+01:00) Europe/Prague</option><option value="Sarajevo,Europe/Sarajevo" class="label" data-tz="Europe/Sarajevo" data-utc-offset="3600">(GMT+01:00) Europe/Sarajevo</option><option value="Skopje,Europe/Skopje" class="label" data-tz="Europe/Skopje" data-utc-offset="3600">(GMT+01:00) Europe/Skopje</option><option value="Warsaw,Europe/Warsaw" class="label" data-tz="Europe/Warsaw" data-utc-offset="3600">(GMT+01:00) Europe/Warsaw</option><option value="Zagreb,Europe/Zagreb" class="label" data-tz="Europe/Zagreb" data-utc-offset="3600">(GMT+01:00) Europe/Zagreb</option><option value="Brussels,Europe/Brussels" class="label" data-tz="Europe/Brussels" data-utc-offset="3600">(GMT+01:00) Europe/Brussels</option><option value="Copenhagen,Europe/Copenhagen" class="label" data-tz="Europe/Copenhagen" data-utc-offset="3600">(GMT+01:00) Europe/Copenhagen</option><option value="Madrid,Europe/Madrid" class="label" data-tz="Europe/Madrid" data-utc-offset="3600">(GMT+01:00) Europe/Madrid</option><option value="Paris,Europe/Paris" class="label" data-tz="Europe/Paris" data-utc-offset="3600">(GMT+01:00) Europe/Paris</option><option value="Amsterdam,Europe/Amsterdam" class="label" data-tz="Europe/Amsterdam" data-utc-offset="3600">(GMT+01:00) Europe/Amsterdam</option><option value="Berlin,Europe/Berlin" class="label" data-tz="Europe/Berlin" data-utc-offset="3600">(GMT+01:00) Europe/Berlin</option><option value="Bern,Europe/Zurich" class="label" data-tz="Europe/Zurich" data-utc-offset="3600">(GMT+01:00) Europe/Zurich</option><option value="Zurich,Europe/Zurich" class="label" data-tz="Europe/Zurich" data-utc-offset="3600">(GMT+01:00) Europe/Zurich</option><option value="Rome,Europe/Rome" class="label" data-tz="Europe/Rome" data-utc-offset="3600">(GMT+01:00) Europe/Rome</option><option value="Stockholm,Europe/Stockholm" class="label" data-tz="Europe/Stockholm" data-utc-offset="3600">(GMT+01:00) Europe/Stockholm</option><option value="Vienna,Europe/Vienna" class="label" data-tz="Europe/Vienna" data-utc-offset="3600">(GMT+01:00) Europe/Vienna</option><option value="West Central Africa,Africa/Algiers" class="label" data-tz="Africa/Algiers" data-utc-offset="3600">(GMT+01:00) Africa/Algiers</option><option value="Bucharest,Europe/Bucharest" class="label" data-tz="Europe/Bucharest" data-utc-offset="7200">(GMT+02:00) Europe/Bucharest</option><option value="Cairo,Africa/Cairo" class="label" data-tz="Africa/Cairo" data-utc-offset="7200">(GMT+02:00) Africa/Cairo</option><option value="Helsinki,Europe/Helsinki" class="label" data-tz="Europe/Helsinki" data-utc-offset="7200">(GMT+02:00) Europe/Helsinki</option><option value="Riga,Europe/Riga" class="label" data-tz="Europe/Riga" data-utc-offset="7200">(GMT+02:00) Europe/Riga</option><option value="Sofia,Europe/Sofia" class="label" data-tz="Europe/Sofia" data-utc-offset="7200">(GMT+02:00) Europe/Sofia</option><option value="Tallinn,Europe/Tallinn" class="label" data-tz="Europe/Tallinn" data-utc-offset="7200">(GMT+02:00) Europe/Tallinn</option><option value="Vilnius,Europe/Vilnius" class="label" data-tz="Europe/Vilnius" data-utc-offset="7200">(GMT+02:00) Europe/Vilnius</option><option value="Athens,Europe/Athens" class="label" data-tz="Europe/Athens" data-utc-offset="7200">(GMT+02:00) Europe/Athens</option><option value="Istanbul,Europe/Istanbul" class="label" data-tz="Europe/Istanbul" data-utc-offset="10800">(GMT+03:00) Europe/Istanbul</option><option value="Minsk,Europe/Minsk" class="label" data-tz="Europe/Minsk" data-utc-offset="10800">(GMT+03:00) Europe/Minsk</option><option value="Jerusalem,Asia/Jerusalem" class="label" data-tz="Asia/Jerusalem" data-utc-offset="7200">(GMT+02:00) Asia/Jerusalem</option><option value="Harare,Africa/Harare" class="label" data-tz="Africa/Harare" data-utc-offset="7200">(GMT+02:00) Africa/Harare</option><option value="Pretoria,Africa/Johannesburg" class="label" data-tz="Africa/Johannesburg" data-utc-offset="7200">(GMT+02:00) Africa/Johannesburg</option><option value="Kaliningrad,Europe/Kaliningrad" class="label" data-tz="Europe/Kaliningrad" data-utc-offset="7200">(GMT+02:00) Europe/Kaliningrad</option><option value="Moscow,Europe/Moscow" class="label" data-tz="Europe/Moscow" data-utc-offset="10800">(GMT+03:00) Europe/Moscow</option><option value="St. Petersburg,Europe/Moscow" class="label" data-tz="Europe/Moscow" data-utc-offset="10800">(GMT+03:00) Europe/Moscow</option><option value="Volgograd,Europe/Volgograd" class="label" data-tz="Europe/Volgograd" data-utc-offset="10800">(GMT+03:00) Europe/Volgograd</option><option value="Samara,Europe/Samara" class="label" data-tz="Europe/Samara" data-utc-offset="14400">(GMT+04:00) Europe/Samara</option><option value="Kuwait,Asia/Kuwait" class="label" data-tz="Asia/Kuwait" data-utc-offset="10800">(GMT+03:00) Asia/Kuwait</option><option value="Riyadh,Asia/Riyadh" class="label" data-tz="Asia/Riyadh" data-utc-offset="10800">(GMT+03:00) Asia/Riyadh</option><option value="Nairobi,Africa/Nairobi" class="label" data-tz="Africa/Nairobi" data-utc-offset="10800">(GMT+03:00) Africa/Nairobi</option><option value="Baghdad,Asia/Baghdad" class="label" data-tz="Asia/Baghdad" data-utc-offset="10800">(GMT+03:00) Asia/Baghdad</option><option value="Tehran,Asia/Tehran" class="label" data-tz="Asia/Tehran" data-utc-offset="12600">(GMT+03:30) Asia/Tehran</option><option value="Abu Dhabi,Asia/Muscat" class="label" data-tz="Asia/Muscat" data-utc-offset="14400">(GMT+04:00) Asia/Muscat</option><option value="Muscat,Asia/Muscat" class="label" data-tz="Asia/Muscat" data-utc-offset="14400">(GMT+04:00) Asia/Muscat</option><option value="Baku,Asia/Baku" class="label" data-tz="Asia/Baku" data-utc-offset="14400">(GMT+04:00) Asia/Baku</option><option value="Tbilisi,Asia/Tbilisi" class="label" data-tz="Asia/Tbilisi" data-utc-offset="14400">(GMT+04:00) Asia/Tbilisi</option><option value="Yerevan,Asia/Yerevan" class="label" data-tz="Asia/Yerevan" data-utc-offset="14400">(GMT+04:00) Asia/Yerevan</option><option value="Kabul,Asia/Kabul" class="label" data-tz="Asia/Kabul" data-utc-offset="16200">(GMT+04:30) Asia/Kabul</option><option value="Ekaterinburg,Asia/Yekaterinburg" class="label" data-tz="Asia/Yekaterinburg" data-utc-offset="18000">(GMT+05:00) Asia/Yekaterinburg</option><option value="Islamabad,Asia/Karachi" class="label" data-tz="Asia/Karachi" data-utc-offset="18000">(GMT+05:00) Asia/Karachi</option><option value="Karachi,Asia/Karachi" class="label" data-tz="Asia/Karachi" data-utc-offset="18000">(GMT+05:00) Asia/Karachi</option><option value="Tashkent,Asia/Tashkent" class="label" data-tz="Asia/Tashkent" data-utc-offset="18000">(GMT+05:00) Asia/Tashkent</option><option value="Chennai,Asia/Kolkata" class="label" data-tz="Asia/Kolkata" data-utc-offset="19800">(GMT+05:30) Asia/Kolkata</option><option value="Kolkata,Asia/Kolkata" class="label" data-tz="Asia/Kolkata" data-utc-offset="19800">(GMT+05:30) Asia/Kolkata</option><option value="Mumbai,Asia/Kolkata" class="label" data-tz="Asia/Kolkata" data-utc-offset="19800">(GMT+05:30) Asia/Kolkata</option><option value="New Delhi,Asia/Kolkata" class="label" data-tz="Asia/Kolkata" data-utc-offset="19800">(GMT+05:30) Asia/Kolkata</option><option value="Kathmandu,Asia/Kathmandu" class="label" data-tz="Asia/Kathmandu" data-utc-offset="20700">(GMT+05:45) Asia/Kathmandu</option><option value="Dhaka,Asia/Dhaka" class="label" data-tz="Asia/Dhaka" data-utc-offset="21600">(GMT+06:00) Asia/Dhaka</option><option value="Sri Jayawardenepura,Asia/Colombo" class="label" data-tz="Asia/Colombo" data-utc-offset="19800">(GMT+05:30) Asia/Colombo</option><option value="Almaty,Asia/Almaty" class="label" data-tz="Asia/Almaty" data-utc-offset="18000">(GMT+05:00) Asia/Almaty</option><option value="Astana,Asia/Almaty" class="label" data-tz="Asia/Almaty" data-utc-offset="18000">(GMT+05:00) Asia/Almaty</option><option value="Novosibirsk,Asia/Novosibirsk" class="label" data-tz="Asia/Novosibirsk" data-utc-offset="25200">(GMT+07:00) Asia/Novosibirsk</option><option value="Bangkok,Asia/Bangkok" class="label" data-tz="Asia/Bangkok" data-utc-offset="25200">(GMT+07:00) Asia/Bangkok</option><option value="Hanoi,Asia/Bangkok" class="label" data-tz="Asia/Bangkok" data-utc-offset="25200">(GMT+07:00) Asia/Bangkok</option><option value="Jakarta,Asia/Jakarta" class="label" data-tz="Asia/Jakarta" data-utc-offset="25200">(GMT+07:00) Asia/Jakarta</option><option value="Krasnoyarsk,Asia/Krasnoyarsk" class="label" data-tz="Asia/Krasnoyarsk" data-utc-offset="25200">(GMT+07:00) Asia/Krasnoyarsk</option><option value="Beijing,Asia/Shanghai" class="label" data-tz="Asia/Shanghai" data-utc-offset="28800">(GMT+08:00) Asia/Shanghai</option><option value="Chongqing,Asia/Chongqing" class="label" data-tz="Asia/Chongqing" data-utc-offset="28800">(GMT+08:00) Asia/Chongqing</option><option value="Hong Kong,Asia/Hong_Kong" class="label" data-tz="Asia/Hong_Kong" data-utc-offset="28800">(GMT+08:00) Asia/Hong_Kong</option><option value="Urumqi,Asia/Urumqi" class="label" data-tz="Asia/Urumqi" data-utc-offset="21600">(GMT+06:00) Asia/Urumqi</option><option value="Kuala Lumpur,Asia/Kuala_Lumpur" class="label" data-tz="Asia/Kuala_Lumpur" data-utc-offset="28800">(GMT+08:00) Asia/Kuala_Lumpur</option><option value="Singapore,Asia/Singapore" class="label" data-tz="Asia/Singapore" data-utc-offset="28800">(GMT+08:00) Asia/Singapore</option><option value="Taipei,Asia/Taipei" class="label" data-tz="Asia/Taipei" data-utc-offset="28800">(GMT+08:00) Asia/Taipei</option><option value="Perth,Australia/Perth" class="label" data-tz="Australia/Perth" data-utc-offset="28800">(GMT+08:00) Australia/Perth</option><option value="Irkutsk,Asia/Irkutsk" class="label" data-tz="Asia/Irkutsk" data-utc-offset="28800">(GMT+08:00) Asia/Irkutsk</option><option value="Ulaanbaatar,Asia/Ulaanbaatar" class="label" data-tz="Asia/Ulaanbaatar" data-utc-offset="28800">(GMT+08:00) Asia/Ulaanbaatar</option><option value="Seoul,Asia/Seoul" class="label" data-tz="Asia/Seoul" data-utc-offset="32400">(GMT+09:00) Asia/Seoul</option><option value="Osaka,Asia/Tokyo" class="label" data-tz="Asia/Tokyo" data-utc-offset="32400">(GMT+09:00) Asia/Tokyo</option><option value="Sapporo,Asia/Tokyo" class="label" data-tz="Asia/Tokyo" data-utc-offset="32400">(GMT+09:00) Asia/Tokyo</option><option value="Tokyo,Asia/Tokyo" class="label" data-tz="Asia/Tokyo" data-utc-offset="32400">(GMT+09:00) Asia/Tokyo</option><option value="Yakutsk,Asia/Yakutsk" class="label" data-tz="Asia/Yakutsk" data-utc-offset="32400">(GMT+09:00) Asia/Yakutsk</option><option value="Darwin,Australia/Darwin" class="label" data-tz="Australia/Darwin" data-utc-offset="34200">(GMT+09:30) Australia/Darwin</option><option value="Adelaide,Australia/Adelaide" class="label" data-tz="Australia/Adelaide" data-utc-offset="34200">(GMT+09:30) Australia/Adelaide</option><option value="Canberra,Australia/Canberra" class="label" data-tz="Australia/Canberra" data-utc-offset="36000">(GMT+10:00) Australia/Canberra</option><option value="Melbourne,Australia/Melbourne" class="label" data-tz="Australia/Melbourne" data-utc-offset="36000">(GMT+10:00) Australia/Melbourne</option><option value="Sydney,Australia/Sydney" class="label" data-tz="Australia/Sydney" data-utc-offset="36000">(GMT+10:00) Australia/Sydney</option><option value="Brisbane,Australia/Brisbane" class="label" data-tz="Australia/Brisbane" data-utc-offset="36000">(GMT+10:00) Australia/Brisbane</option><option value="Hobart,Australia/Hobart" class="label" data-tz="Australia/Hobart" data-utc-offset="36000">(GMT+10:00) Australia/Hobart</option><option value="Vladivostok,Asia/Vladivostok" class="label" data-tz="Asia/Vladivostok" data-utc-offset="36000">(GMT+10:00) Asia/Vladivostok</option><option value="Guam,Pacific/Guam" class="label" data-tz="Pacific/Guam" data-utc-offset="36000">(GMT+10:00) Pacific/Guam</option><option value="Port Moresby,Pacific/Port_Moresby" class="label" data-tz="Pacific/Port_Moresby" data-utc-offset="36000">(GMT+10:00) Pacific/Port_Moresby</option><option value="Magadan,Asia/Magadan" class="label" data-tz="Asia/Magadan" data-utc-offset="39600">(GMT+11:00) Asia/Magadan</option><option value="Srednekolymsk,Asia/Srednekolymsk" class="label" data-tz="Asia/Srednekolymsk" data-utc-offset="39600">(GMT+11:00) Asia/Srednekolymsk</option><option value="Solomon Is.,Pacific/Guadalcanal" class="label" data-tz="Pacific/Guadalcanal" data-utc-offset="39600">(GMT+11:00) Pacific/Guadalcanal</option><option value="New Caledonia,Pacific/Noumea" class="label" data-tz="Pacific/Noumea" data-utc-offset="39600">(GMT+11:00) Pacific/Noumea</option><option value="Fiji,Pacific/Fiji" class="label" data-tz="Pacific/Fiji" data-utc-offset="43200">(GMT+12:00) Pacific/Fiji</option><option value="Kamchatka,Asia/Kamchatka" class="label" data-tz="Asia/Kamchatka" data-utc-offset="43200">(GMT+12:00) Asia/Kamchatka</option><option value="Marshall Is.,Pacific/Majuro" class="label" data-tz="Pacific/Majuro" data-utc-offset="43200">(GMT+12:00) Pacific/Majuro</option><option value="Auckland,Pacific/Auckland" class="label" data-tz="Pacific/Auckland" data-utc-offset="43200">(GMT+12:00) Pacific/Auckland</option><option value="Wellington,Pacific/Auckland" class="label" data-tz="Pacific/Auckland" data-utc-offset="43200">(GMT+12:00) Pacific/Auckland</option><option value="Nuku" alofa,pacific="" tongatapu'="" class="label" data-tz="Pacific/Tongatapu" data-utc-offset="46800">(GMT+13:00) Pacific/Tongatapu</option><option value="Tokelau Is.,Pacific/Fakaofo" class="label" data-tz="Pacific/Fakaofo" data-utc-offset="46800">(GMT+13:00) Pacific/Fakaofo</option><option value="Chatham Is.,Pacific/Chatham" class="label" data-tz="Pacific/Chatham" data-utc-offset="45900">(GMT+12:45) Pacific/Chatham</option><option value="Samoa,Pacific/Apia" class="label" data-tz="Pacific/Apia" data-utc-offset="46800">(GMT+13:00) Pacific/Apia</option></select>
</div>
<div class="clearall left-column">
Recurring:
</div>
<div class="right-column">
<select id="recurring-mode-prop-list">
<option class="label" value="once">Not Recurring</option>
<option class="label" value="weekly">Weekly</option>
</select>
</div>
<div class="clearall"></div>
</div>
<div class="right-panel">
<div class="right-no-left">
<strong style="font-weight: bold;">Other Properties</strong>
</div>
<div class="clearall left-column">
Genre:
</div>
<div class="right-column">
<div id="divSessionGenre">
<div id="session-prop-genre">
<div class="dropdown-wrapper easydropdown-wrapper"><div class="dropdown easydropdown"><span class="old"><select class="genre-list" name="genres" id="EasyDropDownF5336E">
<option value="">Any Genre</option>
</select></span><span class="selected">Any Genre</span><span class="carat"></span></div><div class="dropdown-container"><ul><li class="active">Any Genre</li></ul></div></div>
</div>
</div>
</div>
<div class="clearall left-column">
Name:
</div>
<div class="right-column">
<div id="divSessionName">
<input id="session-prop-name" name="session-prop-name" style="width: 98%;" type="text">
</div>
</div>
<div class="clearall left-column">
Description:
</div>
<div class="right-column">
<div id="divSessionDescription">
<textarea class="session-prop-desc" id="session-prop-desc" name="session-prop-description" rows="3"></textarea>
</div>
</div>
<div class="clearall left-column">
Language:
</div>
<div class="right-column">
<select id="session-prop-lang-list">
<option value="eng">English</option>
<option value="afr">Afrikaans</option>
<option value="sqi">Albanian</option>
<option value="ara">Arabic</option>
<option value="hye">Armenian</option>
<option value="eus">Basque</option>
<option value="ben">Bengali</option>
<option value="bul">Bulgarian</option>
<option value="cat">Catalan</option>
<option value="khm">Central Khmer</option>
<option value="zho">Chinese</option>
<option value="hrv">Croatian</option>
<option value="ces">Czech</option>
<option value="dan">Danish</option>
<option value="nld">Dutch</option>
<option value="est">Estonian</option>
<option value="fij">Fijian</option>
<option value="fin">Finnish</option>
<option value="fra">French</option>
<option value="kat">Georgian</option>
<option value="deu">German</option>
<option value="guj">Gujarati</option>
<option value="heb">Hebrew</option>
<option value="hin">Hindi</option>
<option value="hun">Hungarian</option>
<option value="isl">Icelandic</option>
<option value="ind">Indonesian</option>
<option value="gle">Irish</option>
<option value="ita">Italian</option>
<option value="jpn">Japanese</option>
<option value="kor">Korean</option>
<option value="lat">Latin</option>
<option value="lav">Latvian</option>
<option value="lit">Lithuanian</option>
<option value="mkd">Macedonian</option>
<option value="msa">Malay</option>
<option value="mal">Malayalam</option>
<option value="mlt">Maltese</option>
<option value="mri">Maori</option>
<option value="mar">Marathi</option>
<option value="ell">Greek</option>
<option value="mon">Mongolian</option>
<option value="nep">Nepali</option>
<option value="nor">Norwegian</option>
<option value="pan">Panjabi</option>
<option value="fas">Persian</option>
<option value="pol">Polish</option>
<option value="por">Portuguese</option>
<option value="que">Quechua</option>
<option value="ron">Romanian</option>
<option value="rus">Russian</option>
<option value="smo">Samoan</option>
<option value="srp">Serbian</option>
<option value="slk">Slovak</option>
<option value="slv">Slovenian</option>
<option value="spa">Spanish</option>
<option value="swa">Swahili</option>
<option value="swe">Swedish</option>
<option value="tam">Tamil</option>
<option value="tat">Tatar</option>
<option value="tel">Telugu</option>
<option value="tha">Thai</option>
<option value="bod">Tibetan</option>
<option value="ton">Tonga (Tonga Islands)</option>
<option value="tur">Turkish</option>
<option value="ukr">Ukrainian</option>
<option value="urd">Urdu</option>
<option value="uzb">Uzbek</option>
<option value="vie">Vietnamese</option>
<option value="cym">Welsh</option>
<option value="xho">Xhosa</option>
</select>
</div>
<div class="clearall left-column">
Musician Access:
</div>
<div class="right-column">
<select id="session-prop-musician-access">
<option value="only-rsvp">Only RSVP musicians may join</option>
<option selected="selected" value="musicians-approval">Musicians may join by approval</option>
<option value="musicians">Musicians may join at will</option>
</select>
</div>
<div class="clearall left-column">
Fan Access:
</div>
<div class="right-column">
<select id="session-prop-fans-access">
<option selected="selected" value="listen-chat-each">Fans may listen, chat with each other</option>
<option value="no-listen-chat">Fans may not listen to session</option>
</select>
</div>
<div class="clearall right-no-left">
<div class="icheckbuttons open-rsvp-check">
<input id="open-rsvp" type="checkbox">
</div>
<label class="open-rsvp-label" for="open-rsvp">Allow interested JamKazam musicians to request a RSVP</label>
<div class="clearall"></div>
</div>
<div class="clearall left-column">
Legal:
</div>
<div class="right-column">
<select id="session-policy">
<option value="Standard">Standard</option>
<option value="Creative Commons">Creative Commons</option>
<option value="Offline">Offline</option>
</select>
</div>
<div class="clearall left-column">
Notation Files:
</div>
<div class="right-column">
<div class="spinner-small upload-spinner"></div>
<div class="select-files-section">
<a class="button-orange btn-select-files">SELECT FILES...</a>
<input accept=".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt" class="hidden" id="session-select-files" multiple="true" type="file" value="Select Files...">
<div class="selected-files-section">
<ul id="selected-filenames"></ul>
</div>
</div>
<div class="clearall"></div>
</div>
<div class="clearall"></div>
</div>
<div class="clearall"></div>
<div class="action-bar">
<div class="left">
<a class="button-grey" href="#" target="_blank">HELP</a>
</div>
<div class="right">
<a class="button-grey" href="javascript:history.go(-1)">CANCEL</a>
<a class="button-orange" href="#" id="session-update">UPDATE PROPERTIES</a>
</div>
</div>
</div>
<div class="clearall"></div>
</div>
</div>
</div>
<!-- end content scrolling area -->
</div>
<div class="screen secondary screen secondary" id="account-payment-history" layout="screen" layout-id="account/paymentHistory"><div class="content"><div class="content-head"><div class="content-icon"><img height="20" width="27" src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png"></div><h1>my account</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="AccountPaymentHistoryScreen" data-react-props="{}" data-react-cache-id="AccountPaymentHistoryScreen-0"></div></div></div></div><script id="template-payment-history-row" type="text/template"><tr><td>{{data.date}}</td><td class="capitalize">{{data.payment_method}}</td><td>{{data.description}}</td><td class="capitalize">{{data.status}}</td><td class="amount {{data.status}}">{{data.amount}}</td></tr></script>
<div class="screen secondary" id="account-school" layout="screen" layout-id="account/school"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png" width="27" height="20"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="AccountSchoolScreen" data-react-props="{}" data-react-cache-id="AccountSchoolScreen-0"></div></div></div>
<div class="screen secondary" id="account-retailer" layout="screen" layout-id="account/retailer"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png" width="27" height="20"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="AccountRetailerScreen" data-react-props="{}" data-react-cache-id="AccountRetailerScreen-0"></div></div></div>
<div class="screen secondary" id="account-onboarder" layout="screen" layout-id="account/onboarder"><div class="content-head"><div class="content-icon"><img src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png" width="27" height="20"></div><h1>jamclass</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="AccountOnboarderScreen" data-react-props="{}" data-react-cache-id="AccountOnboarderScreen-0"></div></div></div>
<div class="screen secondary" id="account-subscription" layout="screen" layout-id="account/subscription"><div class="content-head" style="height:26px"><div class="content-icon"><img src="/assets/content/icon_account-f6c56575eaf82732ff4da228470a2858bb10b2921888217ac58bc4dc7b31b6cb.png" width="27" height="20"></div><h1>my account</h1><!-- section navigation -->
<div class="content-nav">
<a href="/client#/home" class="home-icon"><img width="20" height="15" src="/assets/content/icon_home-2288b3be40659d7de2acae98b547b6e98bb6406e44eb67fdf18c9a6369ccd235.png"></a>
<a class="arrow-left" href="#"></a>
<a class="arrow-right op50" href="#"></a>
</div>
</div><div class="content-body"><div data-react-class="AccountSubscriptionScreen" data-react-props="{}" data-react-cache-id="AccountSubscriptionScreen-0"><div class="content-body-scroller"><div class="profile-header profile-head"></div><div class="profile-body"><div class="profile-wrapper"><div class="main-content"><div class="loading">Loading...</div><br></div></div></div></div></div></div></div>
<!-- Session Update Invite Musicians Dialog -->
<div id="invite-musician-friends-dialog" class="dialog invitemusicians-overlay" layout="dialog" layout-id="select-invites" style="min-height:180px;">
<div class="content-head">
<img height="21" width="22" class="content-icon" src="/assets/content/icon_email-304a9a2006ff4a28c34d249ed329c150737e7683182e02cbd80013c57d0ac3f3.png">
<h1>invite musicians</h1>
</div>
<div class="dialog-inner">
<p class="instructions">
Start typing a name, or click the Choose Friends button to invite your JamKazam friends to join your session.
</p>
<div class="invitemusicians-inner" id="update-session-invite-musicians">
</div>
<br clear="all">
<div class="actions">
<a id="btn-cancel-invites" layout-action="close" class="button-grey">CANCEL</a>
<a id="btn-save-invites" layout-action="close" class="button-orange">INVITE</a>
</div>
</div>
</div>
<!-- invite musician friend selector template -->
<script type="text/template" id="template-session-invite-musicians">
<div>
<div class="right" layout-link="select-friends">
<a href="#" class="btn-choose-friends button-grey" id="{choose_friends_id}">CHOOSE FRIENDS</a>
</div>
{instructions}
<div class="clearall"></div>
</div>
<br />
<!-- friend invitation box -->
<div class="friendbox">
<div class="selected-friends" id="{selected_friends_id}"></div>
<input id="{friend_input}" type="text" placeholder="Looking up friends..." />
</div>
</script>
<!-- Added Invitation Template -->
<script type="text/template" id="template-added-invitation">
<div user-id="{userId}" class="invitation">{userName}
<a><img src="/assets/shared/icon_delete_sm-7ea2a4226caf499fd281465db1bf31b41aa639e49992872f04523b08b7c157ac.png" width="13" height="13" /></a>
</div>
</script>
<div id="band-hover" class="hidden bubble band-bubble">
</div>
<script type="text/javascript">
var rest = JK.Rest();
// function addLike(bandId) {
// rest.addLike({band_id: bandId})
// .done(function(response) {
// $("#spnLikeCount", "#band-hover").html(parseInt($("#spnLikeCount", "#band-hover").text()) + 1);
// var $btnLikeSelector = $("#btnLike", "#band-hover");
// $btnLikeSelector.unbind("click");
// $btnLikeSelector.html("LIKED");
// });
// }
function addBandFollowing(bandId) {
rest.addFollowing({band_id: bandId})
.done(function(response) {
adjustBandFollowingCount(1);
var $btnFollowSelector = $("#btnFollow", "#band-hover");
$btnFollowSelector.unbind('click');
$btnFollowSelector.attr('onclick', '');
$btnFollowSelector.click(function() {
removeBandFollowing(bandId);
});
$btnFollowSelector.html("UNFOLLOW");
});
}
function removeBandFollowing(bandId) {
rest.removeFollowing(bandId)
.done(function(response) {
adjustBandFollowingCount(-1);
var $btnFollowSelector = $("#btnFollow", "#band-hover");
$btnFollowSelector.unbind('click');
$btnFollowSelector.attr('onclick', '');
$btnFollowSelector.click(function() {
addBandFollowing(bandId);
});
$btnFollowSelector.html("FOLLOW");
});
}
function adjustBandFollowingCount(value) {
$("#spnFollowCount", "#band-hover").text(parseInt($("#spnFollowCount", "#band-hover").text()) + value);
}
</script>
<script type="text/template" id="template-hover-band">
<div class="bubble-inner">
<a href="{profile_url}" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
<div class="left">
<h3>{name}</h3>
<small>{location}<br /><strong>{genres}</strong></small><br />
<br clear="all" />
<span class="follower-count" title="followers"><span id="spnFollowCount">{follower_count}</span> <img src="/assets/content/icon_followers.png" width="22" height="12" align="absmiddle" style="margin-right:4px;" /></span>
<span class="recording-count" title="recordings">{recording_count} <img src="/assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" style="margin-right:4px;" /></span>
<span class="session-count"> title="sessions">{session_count} <img src="/assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" style="margin-right:4px;" /></span>
</div>
<br clear="all" /><br />
<br />
<div class="f11">{biography}</div><br />
<table class="musicians" cellpadding="0" cellspacing="5">
{musicians}
</table>
<br />
<div align="center">
<div class="left"><a href="{profile_url}" class="button-orange">PROFILE</a></div>
<div class="left" style="display:none;"><a class="button-orange">LIKE</a></div>
<div class="left"><a id="btnFollow" onclick="{followAction}('{bandId}');" class="button-orange">FOLLOW</a></div>
</div>
<br /><br />
</div>
</script>
<div id="fan-hover" class="hidden bubble fan-bubble">
</div>
<script type="text/javascript">
var rest = JK.Rest();
function addFanFollowing(userId) {
rest.addFollowing({user_id: userId})
.done(function(response) {
adjustFanFollowingCount(1);
var $btnFollowSelector = $("#btnFollow", "#fan-hover");
$btnFollowSelector.unbind('click');
$btnFollowSelector.attr('onclick', '');
$btnFollowSelector.click(function() {
removeFanFollowing(userId);
});
$btnFollowSelector.html("UNFOLLOW");
});
}
function removeFanFollowing(userId) {
rest.removeFollowing(userId)
.done(function(response) {
adjustFanFollowingCount(-1);
var $btnFollowSelector = $("#btnFollow", "#fan-hover");
$btnFollowSelector.unbind('click');
$btnFollowSelector.attr('onclick', '');
$btnFollowSelector.click(function() {
addFanFollowing(userId);
});
$btnFollowSelector.html("FOLLOW");
});
}
function adjustFanFollowingCount(value) {
$("#spnFollowCount", "#fan-hover").text(parseInt($("#spnFollowCount", "#fan-hover").text()) + value);
}
function sendFanFriendRequest(userId) {
rest.sendFriendRequest(JK.app, userId);
$("#btnFriend", "#fan-hover").hide();
}
function removeFanFriend(userId) {
rest.removeFriend({friend_id: userId})
.done(function() {
var $btnFriendSelector = $("#btnFriend", "#fan-hover");
$btnFriendSelector.unbind("click");
$btnFriendSelector.attr('onclick', '');
$btnFriendSelector.html("CONNECT");
$btnFriendSelector.click(function() {
sendFanFriendRequest(userId);
});
});
}
</script>
<script type="text/template" id="template-hover-fan">
<div class="bubble-inner">
<a href="#" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
<div class="left ib">
<h3>{name}</h3>
<small>{location}</small><br /><br />
<span class="friend-count" title="friends">{friend_count} <img src="/assets/content/icon_friend.png" align="absmiddle" style="margin-right:4px;" /></span>
<span class="follower-count" title="followers"><span id="spnFollowCount">{follower_count}</span> <img src="/assets/content/icon_followers.png" width="22" height="12" align="absmiddle" style="margin-right:4px;" /></span>
</div>
<br clear="all" /><br />
<div class="f11">{biography}</div><br />
<small><strong>FOLLOWING:</strong></small><br /><br />
<table class="musicians" cellpadding="0" cellspacing="5">
{followings}
</table>
<br />
<div align="center">
<div class="left"><a href="{profile_url}" class="button-orange">PROFILE</a></div>
<div class="left"><a id="btnFriend" onclick="{friendAction}('{userId}');" class="button-orange">CONNECT</a></div>
<div class="left"><a id="btnFollow" onclick="{followAction}('{userId}');" class="button-orange">FOLLOW</a></div>
</div>
<br /><br />
</div>
</script>
<div id="musician-hover" class="hidden bubble musician-bubble">
</div>
<script type="text/javascript">
var rest = JK.Rest();
var logger = JK.logger;
var sessionUtils = JK.SessionUtils;
// function addLike(userId) {
// rest.addLike({user_id: userId})
// .done(function(response) {
// $("#spnLikeCount", "#musician-hover").text(parseInt($("#spnLikeCount", "#musician-hover").text()) + 1);
// var $btnLikeSelector = $("#btnLike", "#musician-hover");
// $btnLikeSelector.unbind("click");
// $btnLikeSelector.html("LIKED");
// });
// }
function joinClick(sessionId) {
sessionUtils.joinSession(sessionId);
}
function addMusicianFollowing(userId) {
rest.addFollowing({user_id: userId})
.done(function(response) {
adjustMusicianFollowingCount(1);
var $btnFollowSelector = $("#btnFollow", "#musician-hover");
$btnFollowSelector.unbind('click');
$btnFollowSelector.attr('onclick', '');
$btnFollowSelector.click(function() {
removeMusicianFollowing(userId);
});
$btnFollowSelector.html("UNFOLLOW");
});
}
function removeMusicianFollowing(userId) {
rest.removeFollowing(userId)
.done(function(response) {
adjustMusicianFollowingCount(-1);
var $btnFollowSelector = $("#btnFollow", "#musician-hover");
$btnFollowSelector.unbind('click');
$btnFollowSelector.attr('onclick', '');
$btnFollowSelector.click(function() {
addMusicianFollowing(userId);
});
$btnFollowSelector.html("FOLLOW");
});
}
function messageMusician(userId) {
if(JK.TextMessageDialogInstance) {
JK.app.layout.showDialog('text-message', {d1: userId})
}
else {
var goto = $('<span>We are sorry, but you can\'t message from this page.</span>');
JK.app.notify(
{
title: "Unable to Message From Here",
text: goto
},
null,
true);
}
return false;
}
function adjustMusicianFollowingCount(value) {
$("#spnFollowCount", "#musician-hover").html(parseInt($("#spnFollowCount", "#musician-hover").html()) + value);
}
function sendMusicianFriendRequest(userId) {
rest.sendFriendRequest(JK.app, userId);
//$("#btnFriend", "#musician-hover").hide();
$("#btnFriend").html('REQUEST SENT');
$("#btnFriend").addClass('disabled');
}
function removeMusicianFriend(userId) {
rest.removeFriend({friend_id: userId})
.done(function() {
var $btnFriendSelector = $("#btnFriend", "#musician-hover");
$btnFriendSelector.unbind("click");
$btnFriendSelector.attr('onclick', '');
$btnFriendSelector.html("CONNECT");
$btnFriendSelector.click(function() {
sendMusicianFriendRequest(userId);
});
});
}
</script>
<script type="text/template" id="template-hover-musician">
<div class="bubble-inner">
<a href="{profile_url}" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
<div class="left ib">
<h3>{name}</h3>
<small>{location}</small><br /><br />
{instruments}
{genres}
<br clear="all" />
<span class="friend-count" title="friends">{friend_count} <img src="/assets/content/icon_friend.png" align="absmiddle" style="margin-right:4px;" /></span>
<span class="follower-count" title="followers"><span id="spnFollowCount">{follower_count}</span> <img src="/assets/content/icon_followers.png" width="22" height="12" align="absmiddle" style="margin-right:4px;" /></span>
<span class="recording-count" title="recordings">{recording_count} <img src="/assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" style="margin-right:4px;" /></span>
<span class="session-count" title="sessions">{session_count} <img src="/assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" style="margin-right:4px;" /></span>
</div>
<br clear="all" /><br />
<div style="display:{session_display}" class="f12">
<strong>IN SESSION <span style="display:{join_display}">&mdash;</span>
<a id="btnJoinSession" onclick="joinClick('{sessionId}');" style="display:{join_display}">Click to Join</a>
</strong>
</div>
<br />
<div class="f11">{biography}</div><br />
<div class="left f11 musician-latency">
Your latency to {first_name} is:&nbsp;&nbsp;
<span id="musician-latency-badge"></span>
</div>
<br clear="both"/>
<br clear="both"/>
<small><strong>FOLLOWING:</strong></small><br /><br />
<table class="musicians" cellpadding="0" cellspacing="5">
{followings}
</table>
<br />
<div align="center">
<div class="left"><a href="{profile_url}" class="button-orange">PROFILE</a></div>
<div class="left" style="display:none;"><a id="btnLike" onclick="addLike('{userId}');" class="button-orange">LIKE</a></div>
<div class="left"><a id="btnFriend" onclick="{friendAction}('{userId}');" class="button-orange">CONNECT</a></div>
<div class="left"><a id="btnFollow" onclick="{followAction}('{userId}');" class="button-orange">FOLLOW</a></div>
<div class="left"><a id="btnMessage" onclick="messageMusician('{userId}');" class="button-orange">MESSAGE</a></div>
</div>
<br /><br />
</div>
</script>
<div id="recording-hover" class="hidden bubble">
</div>
<script type="text/javascript">
var rest = JK.Rest();
function addRecordingLike(recordingId) {
rest.addRecordingLike(recordingId, JK.currentUserId)
.done(function(response) {
$("#spnLikeCount", "#recording-hover").html(parseInt($("#spnLikeCount", "#recording-hover").text()) + 1);
$("#btnLike", "#recording-hover").unbind("click");
});
}
</script>
<script type="text/template" id="template-hover-recording">
<div class="bubble-inner">
<h3>{name}</h3>
<div class="small left">{genre}</div>
<div class="small right">{created_at}</div>
<br clear="all" />
<div class="f11 mt5 mb5">{description}</div>
<div class="small">
<span id="spnPlayCount">{play_count}</span> <img src="/assets/content/icon_arrow.png" title="plays" width="7" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
<span id="spnCommentCount">{comment_count}</span> <img src="/assets/content/icon_comment.png" title="comments" width="13" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
<span id="spnLikeCount">{like_count}</span> <img src="/assets/content/icon_like.png" title="likes" width="12" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
</div>
<br /><br />
<a href="#" class="avatar_large left mr20"><img src="{creator_avatar_url}" /></a>
<div class="left">
<h3>{creator_name}</h3>
<small>{location}</small>
</div>
<br clear="all" /><br />
MUSICIANS:<br /><br />
<table class="musicians" cellpadding="0" cellspacing="5">
{musicians}
</table><br />
<div align="center">
<div class="left"><a id="btnLike" onclick="addRecordingLike('{recordingId}', '{claimedRecordingId}');" class="button-orange">LIKE</a></div>
<div style="display:none;" class="left"><a id="btnComment" class="button-orange">COMMENT</a></div>
<div class="left"><a id="btnShare" layout-link="share-dialog" class="button-orange">SHARE</a></div>
<div class="left"><a href="/recordings/{claimedRecordingId}" class="button-orange" rel="external" target="_blank">WEB PAGE</a></div>
</div>
<br /><br />
</div>
</script>
<div id="session-hover" class="hidden bubble">
</div>
<script type="text/javascript">
var $scope = $("#session-hover");
var rest = JK.Rest();
function addSessionLike(sessionId) {
rest.addSessionLike(sessionId, JK.currentUserId)
.done(function(response) {
$("#spnLikeCount", "#session-hover").html(parseInt($("#spnLikeCount", "#session-hover").text()) + 1);
$("#btnLike", "#session-hover").unbind("click");
});
}
</script>
<script type="text/template" id="template-hover-session">
<div class="bubble-inner">
<div class="small left">{genre}</div>
<div class="small right">{created_at}</div>
<br clear="all" />
<div class="f11 mt5 mb5"><b>{name}</b></div>
<div class="f11 mt5 mb5">{description}</div>
<div class="small">
<span id="spnCommentCount">{comment_count}</span> <img src="/assets/content/icon_comment.png" title="comments" width="13" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
<span id="spnLikeCount">{like_count}</span> <img src="/assets/content/icon_like.png" title="likes" width="12" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
</div>
<br />
MUSICIANS:<br /><br />
<table class="musicians" cellpadding="0" cellspacing="5">
{musicians}
</table>
<br />
SCHEDULE:<br />
<div class="f11 mt5 mb5">{start_time}</div>
<div class="f11 mt5 mb5">{recurrence}</div>
<br />
<div align="center">
<div class="left"><a id="btnLike" onclick="addSessionLike('{musicSessionId}');" class="button-orange">LIKE</a></div>
<div style="display:none;" class="left"><a id="btnComment" class="button-orange">COMMENT</a></div>
<div class="left"><a id="btnShare" layout-link="share-dialog" class="button-orange">SHARE</a></div>
<div class="left"><a href="{url}" class="button-orange" rel="external" target="_blank">{externalLinkText}</a></div>
</div>
<br /><br />
</div>
</script>
<div layout="notify1" id="notification1" class="hidden notification">
<h2>Notification</h2>
<!-- avatar -->
<a href="#" id="notify-avatar" class="avatar_large mr20">
<img id="avatar">
</a>
<p></p>
<div class="detail"></div>
<div id="buttons" class="right clearall">
</div>
</div>
<div layout="notify2" id="notification2" class="hidden notification">
<h2>Notification</h2>
<!-- avatar -->
<a href="#" id="notify-avatar" class="avatar_large mr20">
<img id="avatar">
</a>
<p></p>
<div class="detail"></div>
<div id="buttons" class="right clearall">
</div>
</div>
<div layout="notify3" id="notification3" class="hidden notification">
<h2>Notification</h2>
<!-- avatar -->
<a href="#" id="notify-avatar" class="avatar_large mr20">
<img id="avatar">
</a>
<p></p>
<div class="detail"></div>
<div id="buttons" class="right clearall">
</div>
</div>
<div class="dialog share-overlay" layout="dialog" layout-id="client-update" id="client_update" topmost="true">
<!-- dialog header -->
<div class="content-head">
<img height="24" width="24" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png"><h1>alert</h1>
</div>
<div class="dialog-inner">
<!-- contents are replaced during update flow -->
</div>
<!-- end right column -->
<br clear="all">
</div>
<script type="text/template" id="template-update-start">
<div class="left w20"><img height="80" width="80" src="/assets/content/icon_information_big-107a551de594e0ce810cf744fdb416bb6bf204a2b0ac000535868d982215d46a.png" /></div>
<div class="left w80">There is a new version of the JamKazam application available, and you must allow the application to be updated prior to continuing. We apologize for any inconvenience.</div>
<br clear="all">
<div class="right">
<!--<a class="button-grey close-application" href="#">CLOSE APPLICATION</a>&nbsp;--><a class="button-orange start-update" href="#">START UPDATE</a>
</div>
</script>
<script type="text/template" id="template-update-downloading">
<h2 align="center">Application update is downloading</h2>
<br />
<div class="progress-bar">
<div id="progress-bar" class="progress-bar-progress"></div>
</div>
<br clear="all" /><br />
<!--
<div class="right">
<a href="#" class="button-grey close-application">CANCEL AND CLOSE APPLICATION</a>
</div>
-->
</script>
<script type="text/template" id="template-update-proceeding">
<h2 align="center">Application is Updating</h2>
<br />
<div class="progress-bar">
<div class="progress-bar-progress w100"></div>
</div>
<br />
<br />
<div id="client-updater-updating" align="center">
Please wait while the application updates.
<div id='update-steps'></div>
<!--
Installation of update is about to start.<br />
This application will close automatically in a moment.-->
</div>
</script>
<script type="text/template" id="template-update-restarting">
<h2 align="center">Application is Restarting</h2>
<br />
<div class="progress-bar">
<div class="progress-bar-progress w100"></div>
</div>
<br />
<br />
<div align="center">
{% if(data.os == 'MacOSX') { %}
This application will close automatically in <span class="countdown-secs">{{data.countdown}}</span> {{data.countdown == 1 ? 'second' : 'seconds'}}.
If it does not close, please restart it manually or download the latest JamKazam from <a class="open-downloads" href="/downloads" rel="external">our downloads page</a>.
{% } else { %}
The updater will launch automatically in <span class="countdown-secs">{{data.countdown}}</span> seconds.
If you do not see a Windows updater, please restart it manually or download the latest JamKazam from <a class="open-downloads" href="/downloads" rel="external">our downloads page</a>.
{% } %}
</div>
</script>
<script type="text/template" id="template-update-error">
<h2 align="center">Please Download to Update</h2>
<br />
<div align="center">
<div class="download-manual">
<p class="fix">Download the latest JamKazam from <a class="open-downloads" href="/downloads" rel="external">our downloads page</a>.</p>
</div>
<div class="error-detail">
{{data.error_msg}}
</div>
</div>
<!--
<div class="right">
<a href="#" class="button-grey close-application">CANCEL AND CLOSE APPLICATION</a>
</div>
-->
</script>
<script type="text/template" id="template-manual-upgrade">
<h2 align="center">New Client Available</h2>
<br />
<div align="center">
<div class="download-manual">
<p class="fix"><b>Step 1:</b> Download the latest JamKazam installer from <a class="open-downloads" href="/downloads" rel="external">our downloads page.</a></p><br/>
<p class="fix"><b>Step 2:</b> Double-click the downloaded file, and then drag & drop the Jamkazam application into your Applications folder, <b>and choose Replace option</b></p>
</div>
<div class="error-detail">
Our automatic updater is temporarily not working for Mac OS on this release.
</div>
</div>
<!--
<div class="right">
<a href="#" class="button-grey close-application">CANCEL AND CLOSE APPLICATION</a>
</div>
-->
</script>
<script type="text/template" id="template-overlay-small">
<div id="{id}" class="overlay-small-holder">
<div class="overlay"></div>
<div class="overlay-small">
<!-- header -->
<div class="content-head">
<h1>{title}</h1>
</div>
<!-- inner wrapper -->
<div class="overlay-inner">
</div>
</div>
</div>
</script>
<script id="template-listen-broadcast-state" type="text/template"><div class="listen-broadcast-state"><div class="instructions">Here you can see a greater amount of detail about the state of the broadcast. If you leave the hover window open, new activity related to broadcasts will show up in real-time.</div><div class="summary"><div class="title">Current Status</div><div class="source_up status"><div class="user"></div><div class="msg">Broadcasting</div></div><div class="source_down status"><div class="user"></div><div class="msg">Not Broadcasting</div></div><div class="source_wrong_up status"><div class="msg">Broadcast Attempt Failed</div></div><div class="source_wrong_down status"><div class="msg">Stop Broadcast Failed</div></div><div class="transition_up status"><div class="msg">Initializing Broadcast</div></div><div class="transition_down status"><div class="msg">Stopping Broadcast</div></div><div class="transition_timeout_up status"><div class="msg">No One Broadcasting Yet</div></div><div class="transition_timeout_down status"><div class="msg">Not Stopped Broadcasting</div></div><div class="unknown status"><div class="msg">Unknown Status</div></div><div class="loading status"><div class="msg">loading ...</div></div><div class="db_error status"><div class="msg">db error</div></div></div><div class="details"><div class="title"><div class="who-subtitle">Who</div><div class="detail-subtitle">Details<span>(most recent at top)</span></div></div><div class="detail-items"></div></div></div></script><script id="template-listen-broadcast-detail" type="text/template"><div class="listen-broadcast-detail"><div class="who"></div><div class="detail"></div></div></script>
<script id="template-sync-viewer" type="text/template"><div class="sync-viewer"><div class="headline"><div class="knobs"></div><div class="in-progress"><div class="download-progress"><div class="paused">Downloads paused.</div><div class="quiet"> No download work.</div><div class="busy"></div></div><div class="upload-progress"><div class="paused">Uploads paused.</div><div class="quiet"> No upload work.</div><div class="busy"></div></div></div></div><div class="dialog-tabs"><a class="tab selected" purpose="recordings">Recordings</a><a class="tab" purpose="log">Log<span class="badge">!</span></a></div><div class="tab tab-content" purpose="recordings"><div class="list-header"><div class="type-info"><span class="special-text">file details</span></div><div class="client-state-info"><span class="special-text">is the file on your system?</span></div><div class="upload-state-info"><span class="special-text">is it uploaded?</span></div></div><div class="list"></div></div><div class="tab tab-content" purpose="log"><div class="list-header"><div class="list-column"><span class="special-text">file details</span></div><div class="list-column"><span class="special-text">did it succeed?</span></div><div class="list-column"><span class="special-text">more detail</span></div></div><div class="log-list"></div></div><div class="paginator-holder"></div></div></script><script id="template-sync-viewer-recorded-track" type="text/template"><div class="recorded-track sync" data-client-id="{{data.client_id}}" data-client-track-id="{{data.client_track_id}}" data-fully-uploaded="{{data.fully_uploaded}}" data-id="{{data.id}}" data-instrument-id="{{data.instrument_id}}" data-recording-id="{{data.recording_id}}" data-track-id="{{data.track_id}}"><div class="type"><span class="text">TRACK</span><a class="avatar-tiny" hoveraction="musician" href="#" user-id="{{data.user.id}}"><img src="{{JK.resolveAvatarUrl(data.user.photo_url)}}" /></a><img class="instrument-icon" data-instrument-id="{{data.instrument_id}}" hoveraction="instrument" src="{{JK.getInstrumentIconMap24()[data.instrument_id].asset}}" /></div><div class="client-state bar"><div class="progress"></div><span class="msg"></span><a class="retry" href="#"><img width="12" height="14" src="/assets/content/icon_resync-70d057b289b335d41dbca365710034780cf06d027a5b1450a9fe47c32dca8e54.png" /></a></div><div class="upload-state bar"><div class="progress"></div><span class="msg"></span><a class="retry" href="#"><img width="12" height="14" src="/assets/content/icon_resync-70d057b289b335d41dbca365710034780cf06d027a5b1450a9fe47c32dca8e54.png" /></a></div></div></script><script id="template-sync-viewer-recorded-backing-track" type="text/template"><div class="recorded-backing-track sync" data-client-id="{{data.client_id}}" data-client-track-id="{{data.client_track_id}}" data-fully-uploaded="{{data.fully_uploaded}}" data-id="{{data.id}}" data-recording-id="{{data.recording_id}}" data-track-id="{{data.backing_track_id}}"><div class="type"><span class="text">BACKING</span><a class="avatar-tiny" hoveraction="musician" href="#" user-id="{{data.user.id}}"><img src="{{JK.resolveAvatarUrl(data.user.photo_url)}}" /></a></div><div class="client-state bar"><div class="progress"></div><span class="msg"></span><a class="retry" href="#"><img width="12" height="14" src="/assets/content/icon_resync-70d057b289b335d41dbca365710034780cf06d027a5b1450a9fe47c32dca8e54.png" /></a></div><div class="upload-state bar"><div class="progress"></div><span class="msg"></span><a class="retry" href="#"><img width="12" height="14" src="/assets/content/icon_resync-70d057b289b335d41dbca365710034780cf06d027a5b1450a9fe47c32dca8e54.png" /></a></div></div></script><script id="template-sync-viewer-stream-mix" type="text/template"><div class="stream-mix sync" data-id="{{data.id}}" data-recording-id="{{data.recording_id}}"><div class="type"><span class="text">STREAM MIX</span></div><div class="client-state bar"><div class="progress"></div><span class="msg"></span></div><div class="upload-state bar"><div class="progress"></div><span class="msg"></span><a class="retry" href="#"><img width="12" height="14" src="/assets/content/icon_resync-70d057b289b335d41dbca365710034780cf06d027a5b1450a9fe47c32dca8e54.png" /></a></div></div></script><script id="template-sync-viewer-mix" type="text/template"><div class="mix sync virtual" data-id="{{data.id}}" data-recording-id="{{data.recording_id}}"><div class="type"><span class="text">MIX</span><span class="duration">{{window.JK.prettyPrintSeconds(data.duration)}}</span></div><div class="mix-state bar"><span class="msg"></span></div></div></script><script id="template-sync-viewer-no-syncs" type="text/template"><div class="no-syncs">You have no recordings.</div></script><script id="template-sync-viewer-recording-wrapper-details" type="text/template"><div class="details" data-claimed-recording-id="{{data.claimedRecordingId}}" data-recording-id="{{data.id}}"><a class="session-detail-page" href="{{data.recording_landing_url}}" rel="external"><span class="name">{{data.my ? data.my.name : 'Unknown Name'}}</span></a><span class="timeago">{{$.timeago(data.created_at)}}</span><span class="totalsize">SIZE: {{data.totalSize}}</span><a class="delete" href="#">DELETE</a><a class="export" href="#">EXPORT</a><a class="open-video hidden" href="#">VIDEO</a></div></script><script id="template-sync-viewer-hover-recorded-track" type="text/template"><div class="help-hover-recorded-tracks"><div class="client-box"><div class="client-state-info"><span class="special-text">is the file on your system?</span></div><div class="client-state {{data.clientStateClass}}"><span class="msg">{{data.clientStateMsg}}</span></div><div class="client-state-definition sync-definition">{{data.clientStateDefinition}}</div></div><div class="upload-box"><div class="upload-state-info"><span class="special-text">is it uploaded?</span></div><div class="upload-state {{data.uploadStateClass}}"><span class="msg">{{data.uploadStateMsg}}</span></div><div class="upload-state-definition sync-definition">{{data.uploadStateDefinition}}</div></div><br clear="both" />{% if(data.summary) { %}<div class="summary"><div class="title">what's next?</div>{{data.summary}}</div>{% } %}</div></script><script id="template-sync-viewer-hover-recorded-backing-track" type="text/template"><div class="help-hover-recorded-backing-tracks"><div class="client-box"><div class="client-state-info"><span class="special-text">is the file on your system?</span></div><div class="client-state {{data.clientStateClass}}"><span class="msg">{{data.clientStateMsg}}</span></div><div class="client-state-definition sync-definition">{{data.clientStateDefinition}}</div></div><div class="upload-box"><div class="upload-state-info"><span class="special-text">is it uploaded?</span></div><div class="upload-state {{data.uploadStateClass}}"><span class="msg">{{data.uploadStateMsg}}</span></div><div class="upload-state-definition sync-definition">{{data.uploadStateDefinition}}</div></div><br clear="both" />{% if(data.summary) { %}<div class="summary"><div class="title">what's next?</div>{{data.summary}}</div>{% } %}</div></script><script id="template-sync-viewer-hover-stream-mix" type="text/template"><div class="help-hover-stream-mix"><div class="client-box"><div class="client-state-info"><span class="special-text">is the file on your system?</span></div><div class="client-state {{data.clientStateClass}}"><span class="msg">{{data.clientStateMsg}}</span></div><div class="client-state-definition sync-definition">{{data.clientStateDefinition}}</div></div><div class="upload-box"><div class="upload-state-info"><span class="special-text">is it uploaded?</span></div><div class="upload-state {{data.uploadStateClass}}"><span class="msg">{{data.uploadStateMsg}}</span></div><div class="upload-state-definition sync-definition">{{data.uploadStateDefinition}}</div></div><br clear="both" />{% if(data.summary) { %}<div class="summary"><div class="title">what's next?</div>{{data.summary}}</div>{% } %}</div></script><script id="template-sync-viewer-hover-mix" type="text/template"><div class="help-hover-mix"><div class="mix-box"><div class="mix-state-info"><span class="special-text">is it mixed?</span></div><div class="mix-state {{data.mixStateClass}} {{data.context}}"><span class="msg">{{data.mixStateMsg}}</span></div><div class="mix-state-definition sync-definition">{{data.mixStateDefinition}}</div></div><br clear="both" />{% if(data.summary) { %}<div class="summary"><div class="title">what's next?</div>{{data.summary}}</div>{% } %}</div></script><script id="template-sync-viewer-download-progress-reset" type="text/template"><span class="notice">No download in progress.</span></script><script id="template-sync-viewer-download-progress-reset" type="text/template"><span class="notice">No download in progress.</span></script><script id="template-sync-viewer-generic-command" type="text/template"><div class="generic sync command"><div class="type"><span class="text">{{data.displayType}}</span></div></div></script><script id="template-sync-viewer-recorded-track-command" type="text/template"><div class="recorded-track track-item sync"><div class="type"><div class="progress"></div><span class="text">{{data.action}} TRACK</span><a class="avatar-tiny" hoveraction="musician" href="#" user-id="{{data.user.id}}"><img src="{{JK.resolveAvatarUrl(data.user.photo_url)}}" /></a><img class="instrument-icon" data-instrument-id="{{data.instrument_id}}" hoveraction="instrument" src="{{JK.getInstrumentIconMap24()[data.instrument_id].asset}}" /></div></div></script><script id="template-sync-viewer-recorded-backing-track-command" type="text/template"><div class="recorded-backing-track track-item sync"><div class="type"><div class="progress"></div><span class="text">{{data.action}} BACKING TRACK</span><a class="avatar-tiny" hoveraction="musician" href="#" user-id="{{data.user.id}}"><img src="{{JK.resolveAvatarUrl(data.user.photo_url)}}" /></a></div></div></script><script id="template-sync-viewer-log-item" type="text/template"><div class="log success-{{data.success}}"><div class="command">{% if(data.isAsap) { %}<img width="12" height="14" title="This means you initiated this" src="/assets/content/icon_resync-70d057b289b335d41dbca365710034780cf06d027a5b1450a9fe47c32dca8e54.png" />{% } %}{{data.command}}</div><div class="success">{{data.displaySuccess}}</div><div class="detail">{{data.detail}}</div></div></script>
<script id="template-download-jamtrack" type="text/template"><div class="download-jamtrack"><div class="state"></div></div></script><script id="template-download-jamtrack-state-no-client" type="text/template"><div class="state-no-client"><div class="large hidden"><div class="msg">To play your JamTrack, launch the JamKazam application and open the JamTrack while in a session.</div></div><div class="small hidden"><div class="msg">{{data.name}} (launch client)</div></div></div></script><script id="template-download-jamtrack-state-synchronized" type="text/template"><div class="state-synchronized"><div class="large hidden"><div class="msg">Your JamTrack is on your system and ready to play.</div></div><div class="small hidden"><div class="msg">{{data.name}} (done)</div></div></div></script><script id="template-download-jamtrack-state-packaging" type="text/template"><div class="state-packaging"><div class="large hidden"><div class="msg">Your JamTrack is currently being created on the JamKazam server. (<span class="progress"></span>)</div><div class="spinner-large"></div></div><div class="small hidden"><div class="msg">{{data.name}} (packaging -&nbsp;<span class="progress"></span>)</div><div class="spinner-small"></div></div></div></script><script id="template-download-jamtrack-state-downloading" type="text/template"><div class="state-downloading"><div class="large hidden"><div class="msg">Your JamTrack is currently being downloaded. (<span class="progress">0%</span>)</div><div class="spinner-large"></div></div><div class="small hidden"><div class="msg">{{data.name}} (downloading -&nbsp;<span class="progress">0%</span>)</div><div class="spinner-small"></div></div></div></script><script id="template-download-jamtrack-state-keying" type="text/template"><div class="state-keying"><div class="large hidden"><div class="msg">Your JamTrack is being authenticated.</div><div class="spinner-large"></div></div><div class="small hidden"><div class="msg">{{data.name}} (keying)</div><div class="spinner-small"></div></div></div></script><script id="template-download-jamtrack-state-initial" type="text/template"><div class="state-initial"><div class="large hidden"><div class="msg">Initializing JamTrack...</div><div class="spinner-large"></div></div><div class="small hidden"><div class="msg">{{data.name}} (initializing)</div><div class="spinner-small"></div></div></div></script><script id="template-download-jamtrack-state-quiet" type="text/template"><div class="state-quiet"><div class="large hidden"><div class="msg"></div></div><div class="small hidden"><div class="msg">{{data.name}} (pending)</div></div></div></script><script id="template-download-jamtrack-state-errored" type="text/template"><div class="state-errored"><div class="large hidden"><div class="msg"></div><div class="retry"></div><a class="button-orange retry-button">RETRY</a></div><div class="small hidden"><div class="msg-holder"><div class="msg"></div><a class="button-orange retry-button">RETRY</a></div><div class="errormsg"></div><div class="retry"></div></div></div></script>
<script id="template-jam-track-preview" type="text/template"><div class="jam-track-preview"><div class="actions"><a class="play-button {{data.color}}" href="#"></a><a class="hidden stop-button {{data.color}}" href="#"></a></div><img class="instrument-icon" data-instrument-id="" height="24" hoveraction="instrument" width="24" /><div class="instrument-part"></div><div class="instrument-name"></div><div class="part"></div><div class="loading-text hidden"><div class="loading-text-text">preview loading</div><div class="loading spinner-small hidden"></div></div></div></script>
<script id="template-help-pre-processed-track" type="text/template">This track has not yet been processed into master form and may include multiple streams from the source musician.</script><script id="template-help-refocus-rescore" type="text/template">{% if(data.validIOScore) { %}We have re-scored latency based on your changes.{% } else { %}We have re-scored latency and IO based on your changes.{% } %}</script><script id="template-help-ftue-watch-video" type="text/template">Be sure to watch the help video.</script><script id="template-help-chat-not-enabled" type="text/template">You must first chose this option in order to activate a chat input.</script><script id="template-help-select-input" type="text/template">You still need to select an input device.</script><script id="template-help-select-output" type="text/template">Select an output device, because the current input device has no candidate output ports.</script><script id="template-help-push-resync-when-done" type="text/template">Push 'Resync' when done modifying device settings.</script><script id="template-help-can-move-on" type="text/template"><div class="help-can-move-on">You can move to the next step now.</div></script><script id="template-payment-still-needed" type="text/template"><div class="payment-still-needed">Thank you for upgrading your plan. For it to take effect, you will need to enter a payment method.</div></script><script id="template-payment-still-needed-native" type="text/template"><div class="payment-still-needed">Thank you for upgrading your plan. For it to take effect, you will need to enter a payment method.<br /><br />Your web browser will open if you select UPDATE PAYMENT METHOD.</div></script><script id="template-help-tweak-asio-settings" type="text/template">Click here to try faster ASIO settings.</script><script id="template-help-high-latency-notice" type="text/template"><div class="help-high-latency-notice">{% if(data.additional == 'asio') { %}<p class="gear-specific-latency-notice">Tip: click the ASIO SETTINGS button to try faster ASIO settings.</p><p>If you are unable to get your audio gear latency below 20 milliseconds, you can click NEXT to proceed through setup with a high-latency audio profile. This will allow you to play with JamTracks and backing tracks, but not play with others.&nbsp;</p><p><a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000123617-setup-wizard-windows-step-2-setting-up-your-audio-interface" rel="external">Click here</a>&nbsp;for more troubleshooting tips to speed up your audio gear setup.</p>{% } else if(data.additional == 'macosx-builtin') { %}<p class="gear-specific-latency-notice">Tip: Insert your headphones on a Mac to bring your latency down, and click the RESYNC button to try again.</p><p>If you are unable to get your audio gear latency below 20 milliseconds, you can click NEXT to proceed through setup with a high-latency audio profile. This will allow you to play with JamTracks and backing tracks, but not play with others.&nbsp;</p><p><a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000123592-setup-wizard-mac-step-2-setting-up-your-audio-interface" rel="external">Click here</a>&nbsp;for more troubleshooting tips to speed up your audio gear setup.</p>{% } else if(data.os == 'Win32') { %}<p class="general-info">Your computer and interface are processing audio too slowly to play online in real-time sessions with other musicians over the Internet. You may click NEXT to proceed through setup to play alone in sessions with JamTracks or backing tracks, or if you want to improve your speed score to play online,&nbsp;<a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000123617-setup-wizard-windows-step-2-setting-up-your-audio-interface" rel="external">click here</a>&nbsp;for a troubleshooting article.</p>{% } else { %}<p class="general-info">Your computer and interface are processing audio too slowly to play online in real-time sessions with other musicians over the Internet. You may click NEXT to proceed through setup to play alone in sessions with JamTracks or backing tracks, or if you want to improve your speed score to play online,&nbsp;<a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000123592-setup-wizard-mac-step-2-setting-up-your-audio-interface" rel="external">click here</a>&nbsp;for a troubleshooting article.</p>{% } %}</div></script><script id="template-help-session-plus-musicians" type="text/template">Plus any interested JamKazam musicians that I approve.</script><script id="template-help-minimum-output-channels" type="text/template">To be a valid output audio device, it must have at least 2 output ports.</script><script id="template-help-follower-count" type="text/template">The number of followers that this {{data.entity_type}} has.</script><script id="template-help-friend-count" type="text/template">The number of friends that this {{data.entity_type}} has.</script><script id="template-help-recording-count" type="text/template">The number of recordings that this {{data.entity_type}} has made.</script><script id="template-help-session-count" type="text/template">The number of sessions that this {{data.entity_type}} has played in.</script><script id="template-help-session-audio-inputs-instructions" type="text/template"><div class="session-audio-inputs-instructions big-dark-help session-help"><p>In this Audio Inputs section, set the input level on each of your audio tracks to a healthy level.</p><br /><p>To do this, hover your mouse over the volume icon on one of your audio tracks. You'll see a slider with meter lights on the sides. Use the gain knobs on your audio interface or the slider in the JamKazam app to adjust your input level up or down. Play and/or sing, and watch where the meter lights peak. These lights should reach the top of the green lights, and maybe one light into the orange/red zone.</p><br /><p>If your input is set too high, you'll get clipping and distortion. If your input is set too low, your audio may be too soft, or you'll get too much white noise mixed with your audio signal.</p></div></script><script id="template-help-session-personal-mix-instructions" type="text/template"><div class="session-personal-mix-instructions big-dark-help session-help"><p>In this Personal Mix section, adjust the volume of each audio track in your session to get the mix where you like it.</p><br /><p>To do this, hover your mouse over the volume icon on any of the audio tracks. You'll see a slider with meter lights on the sides. Pull the slider in the JamKazam app up to make the track louder in the mix, or pull the slider down to make the track softer in the mix. Don't worry, as these changes only affect what you hear - they don't change what others in your sessions hear.</p><br /><p>Also, please note that your personal mix is the mix that will be used for any recordings that you personally make in the session and also for any broadcast that you personally send from your computer to YouTube, Facebook, etc. If another musician in your session makes a recording or broadcasts your session, that musician's personal mix is the mix that will be used.</p></div></script><script id="template-help-session-media-tracks-instructions" type="text/template"><div class="session-media-tracks-instructions big-dark-help session-help"><p>In this Recorded Audio section, you can open recordings you've made in JamKazam sessions, JamTracks (multi-track recordings of popular songs) you've purchased from JamKazam, or audio files (i.e. simple backing tracks). You can also start a metronome that everyone in the session will hear.</p><br /><p>For any of these features, you can adjust the associated volume of audio in your session to get the mix where you like it.</p><br /><p>To do this, hover your mouse over the volume icon on any of the audio tracks. You'll see a slider with meter lights on the sides. Pull the slider in the JamKazam app up to make the track louder in your personal mix, or pull the slider down to make the track softer in your mix. Don't worry, as these changes only affect what you hear - they don't change what others in your sessions hear.</p><br /><p>Also, please note that your personal mix is the mix that will be used for any recordings that you personally make in the session and also for any broadcast that you personally send from your computer to YouTube, Facebook, etc. If another musician in your session makes a recording or broadcasts your session, that musician's personal mix is the mix that will be used.</p></div></script><script id="template-help-musician-score-count" type="text/template"><div class="help-musician-score-count"><p>The score shown is the one-way latency (or delay) in milliseconds from you to this user. This score is calculated using the following three values that JamKazam gathers:</p><ul><li><span class="definition">Your Audio Gear Latency:&nbsp;</span><span class="measurement my-gear-latency partial"><span class="measurement-value">{{data.my_gear_latency ? data.my_gear_latency + ' ms': '13 ms*'}}</span><span class="measurement-absent">{{data.my_gear_latency ? '' : "(you have not qualified any gear, so we picked an average gear latency)"}}</span></span></li><li><span class="definition">Their Audio Gear Latency:&nbsp;</span><span class="measurement their-gear-latency partial"><span class="measurement-value">{{data.their_gear_latency ? data.their_gear_latency + ' ms': '13 ms*'}}</span><span class="measurement-absent">{{data.their_gear_latency ? '' : "(they have not qualified any gear, so we picked an average gear latency)"}}</span></span></li><li><span class="definition">Round-trip Internet Latency:&nbsp;</span><span class="measurement internet-latency partial"><span class="measurement-value">{{data.internet_latency ? data.internet_latency + ' ms': '?'}}</span><span class="measurement-absent">{{data.internet_latency ? '' : "(we have not scored you with this user yet)"}}</span></span></li></ul><p><span class="definition">Total One-Way Latency:&nbsp;</span><span class="measurement my-gear-latency"><span class="measurement-value">( {{data.my_gear_latency ? data.my_gear_latency: '13'}} + {{data.their_gear_latency ? data.their_gear_latency: '13'}} + {{data.internet_latency ? data.internet_latency: '?'}} ) / 2 = {{data.full_score ? data.full_score + ' ms' : "?"}}</span><span class="measurement-absent">{{data.full_score ? '' : "(when we don't know internet latency, we don't try to guess your one-way latency)"}}</span></span></p><p>We categorize this score as good, fair, poor, unacceptable, or unknown. Those categories are defined as follows:</p><ul><li><span class="definition">Good:&nbsp;</span>20ms or less&nbsp;<img src="/assets/content/icon_green_score.png" /></li><li><span class="definition">Fair:&nbsp;</span>20ms to 35ms<img src="/assets/content/icon_yellow_score.png" /></li><li><span class="definition">Poor:&nbsp;</span>35ms to 50ms&nbsp;<img src="/assets/content/icon_red_score.png" /></li><li><span class="definition">Unacceptable:&nbsp;</span>Above 50ms&nbsp;<img src="/assets/content/icon_blue_score.png" /></li><li><span class="definition">Unknown:&nbsp;</span>No internet score is available between you and them.<img src="/assets/content/icon_purple_score.png" /></li></ul></div></script><script id="template-help-musician-score-self" type="text/template"><div class="help-musician-score-self"><p>You are looking at your own account.</p><p>Try hovering over other user's latency score to find out your one-way latency to them.</p><p><span class="definition">Your Audio Gear Latency:&nbsp;</span><span class="measurement my-gear-latency"><span class="measurement-value">{{data.my_gear_latency ? data.my_gear_latency + ' ms': '13 ms*'}}</span><span class="measurement-absent">{{data.my_gear_latency ? '' : "(you have not qualified any gear, so we picked an average gear latency)"}}</span></span></p></div></script><script id="template-help-gear-wizard-inputs-changed" type="text/template"><div class="help-inputs-changed">{% if(data.missingInputDevice) { %}<p>{{ data.missingInputDevice }} is no longer connected or malfunctioning.</p>{% } %}{% if(data.newInputDevice) { %}<p>{{ data.newInputDevice }} is now available.</p>{% } %}</div></script><script id="template-help-gear-wizard-outputs-changed" type="text/template"><div class="help-outputs-changed">{% if(data.missingOutputDevice) { %}<p>{{ data.missingOutputDevice }} is no longer connected or malfunctioning.</p>{% } %}{% if(data.newOutputDevice) { %}<p>{{ data.newOutputDevice }} is now available.</p>{% } %}</div></script><script id="template-help-no-audio-profiles" type="text/template"><div class="help-no-audio-profiles">Click here to configure new audio gear.</div></script><script id="template-help-file-manager-poke" type="text/template"><div class="help-file-manager-poke"><p>After the session is over, your recording will synchronize with the server to make a final mix.</p><p>You can find out more by clicking<em>&nbsp;File Manager&nbsp;</em>at any time.</p></div></script><script id="template-help-sync-viewer-paused" type="text/template"><div class="help-sync-viewer-paused">JamKazam prevents file uploads, downloads, and recording management while in a session.</div></script><script id="template-help-sync-viewer-retry" type="text/template"><div class="help-sync-viewer-retry">Your request will be attempted as soon as possible.</div></script><script id="template-help-recording-discarded-soon" type="text/template"><div class="help-recording-discarded-soon">This recording will be discarded {% $.timeago(data.discardTime) %}. If you want to keep this recording, click the (edit) link.</div></script><script id="template-help-command-enqueued" type="text/template"><div class="help-recording-command-enqueued">Your request will be executed as soon as possible.</div></script><script id="template-help-file-sync-delayed-deletion" type="text/template"><div class="file-sync-delayed-deletion">The files associated with this recording will be deleted as soon as your client has uploaded your tracks and stream mix from this recording.</div></script><script id="template-help-media-controls-disabled" type="text/template">{% if(data.mediaTrackOpener) { %}Switch<b>&nbsp;MIX:&nbsp;</b>to<b>&nbsp;Master&nbsp;</b>mode to have control over volume levels.{% } else { %}Only the person who opened the recording can control the volume levels.{% } %}</script><script id="template-help-not-session-controller" type="text/template"><div class="not-session-controller larger-text">This feature controls the master mix for the session, which is used to set the mix levels for recordings and session broadcasts,&nbsp;so changes to the master mix affect all musicians in the session.&nbsp;Only {{data.sessionControllerName}} has control of the master mix for this session.<br /><br />If you want to change the personal mix i.e. the mix/levels that you personally hear you can use the volume sliders on each track on the session screen to do this, and it wont affect what other musicians in the session hear, so you can do this safely.</div></script><script id="template-help-jamtrack-controls-disabled" type="text/template">During a recording, volume and mute controls for JamTracks are disabled. So, get the session volume levels right before starting the recording.</script><script id="template-help-volume-media-mixers" type="text/template">Audio files only expose both master and personal mix controls, so any change here will also affect everyone in the session.</script><script id="template-no-remaining-session-play-time" type="text/template"><div class="no-remaining-session-play-time"><p>There is no more time left in this session. You can upgrade your plan.</p></div></script><script id="template-plan-no-record" type="text/template"><div class="no-remaining-session-play-time"><p>Recording is not possible on your current plan. You can upgrade your plan to create recordings.</p></div></script><script id="template-plan-no-video" type="text/template"><div class="no-remaining-session-play-time"><p>Video is not possible on your current plan. You can upgrade your plan to use video.</p></div></script><script id="template-no-remaining-month-play-time" type="text/template"><div class="no-remaining-monthly-play-time"><p>There is no more session time left for this month. You can upgrade your plan.</p></div></script><script id="template-session-too-big-kicked" type="text/template"><div class="session-too-big-kicked"><p>Due to your current plan, you were forced to leave the session because someone else joined the session just now. You can upgrade your plan.</p></div></script><script id="template-help-downloaded-jamtrack" type="text/template"><div class="downloaded-jamtrack"><p>When a JamTrack is first purchased, a user-specific version of it is created on the server. Once it's ready, it's then downloaded to the client.</p><p>However, in some cases, you may need to download the JamTrack again (if you change machines, for instance).</p><p>If you do not currently have it and try to open it now, we will try to download it immediately.</p></div></script><script id="template-help-metronome-unstable" type="text/template"><div class="metronome-unstable"><span class="definition">Background</span><p>The metronome feature requires that every user's computer in the session must agree on the current time.</p><span class="definition">The Problem</span><p>The computers of {{data.names}} have not successfully synchronized to the current time.</p><span class="definition">Solution</span><p>The JamKazam service is trying to automatically correct this error condition. Please close this message, wait about 10 seconds, and then try opening the metronome again. If this problem persists after a couple of attempts, we recommend that the unsynchronized users restart the JamKazam application.</p><p>If this error persists after a restart, please have the users with the issue contact support@jamkazam.com.</p></div></script><script id="template-help-metromone-playback-modes" type="text/template"><div class="metromone-playback-modes"><p>The metronome plays a local metronome back to each musician locally, with the local metronomes all synchronized to a global clock with high precision.</p><p>The cluster test mixes playback of your local metronome with the streamed audio of all other musician metronomes. This will give you a good sense of the audible latency in your session. If all the metronome sounds are tightly clustered, there is low latency. If not, it will be more difficult to play in sync.</p></div></script><script id="template-help-jamtrack-guide-tile" type="text/template"><div class="jamtrack-guide-tile big-help"><p>To try out your JamTrack, click the 'create session' tile.</p></div></script><script id="template-help-jamtrack-guide-private" type="text/template"><div class="jamtrack-guide-private big-help"><p>To try out your JamTrack, select this option to create a session easily.</p></div></script><script id="template-help-jamtrack-guide-session" type="text/template"><div class="jamtrack-guide-open big-help"><p>To try out your JamTrack, click here to open it.</p></div></script><script id="template-help-profile-interests-virtual-band" type="text/template">For musicians who want to join a band that plays only online on JamKazam and does not travel and meet in person at a physical space to play.</script><script id="template-help-profile-interests-traditional-band" type="text/template">For musicians who want to join a more traditional band that meets in person at a physical space to play. It may also play online on JamKazam.</script><script id="template-help-profile-interests-paid-sessions" type="text/template">For professional session musicians who are qualified and interested in playing paid recording session gigs for bands, composers, and producers.</script><script id="template-help-profile-interests-free-sessions" type="text/template">For skilled musicians who are interested in playing free recording session gigs for bands, composers, and producers, either for fun or to build experience and resume.</script><script id="template-help-profile-interests-cowrite-partners" type="text/template">For composers and songwriters who want to collaborate with others in composing and creating new music.</script><script id="template-help-band-profile-add-new-member" type="text/template">For bands that want to add one or more new members and let the JamKazam community of musicians know your band is looking for new members.</script><script id="template-help-band-profile-play-paid-gigs" type="text/template">For professional bands that are qualified and interested in playing paid gigs at music venues and other events.</script><script id="template-help-band-profile-play-free-gigs" type="text/template">For bands that are interested in playing free gigs, either for fun or to build experience.</script><script id="template-help-jamtrack-landing-preview" type="text/template"><div class="jamtrack-landing-preview big-help"><p>click a play button to preview the master mix and individual tracks of the JamTrack</p></div></script><script id="template-help-jamtrack-landing-video" type="text/template"><div class="jamtrack-landing-video big-help"><p>click to watch JamTracks video</p></div></script><script id="template-help-jamtrack-landing-cta" type="text/template"><div class="jamtrack-landing-cta big-help"><p>click here to get this JamTrack free</p></div></script><script id="template-help-jamtrack-browse-band" type="text/template"><div class="jamtrack-browse-band big-help"><p>List JamTracks of a specified band</p></div></script><script id="template-help-jamtrack-browse-master-mix" type="text/template"><div class="jamtrack-browse-master-mix big-help"><p>Listen to master mix and individual tracks</p></div></script><script id="template-help-jamtrack-browse-cta" type="text/template"><div class="jamtrack-browse-cta big-help"><p>Click to select your first free JamTrack!</p></div></script><script id="template-help-jamtrack-web-play" type="text/template"><div class="jamtrack-web-play big-help"><p>Click here to open your free JamTrack</p></div></script><script id="template-help-master-metronome-notice" type="text/template"><div class="master-metronome-notice"><p>The metronome does not produce any sound in the master mix.</p></div></script><script id="template-help-personal-media-track" type="text/template"><div class="personal-media-track"><p>Only the person who opened the audio track can modify volume and pan from their end.</p></div></script><script id="template-help-missing-my-tracks" type="text/template"><div class="missing-my-tracks"><p>Click the RESYNC button up above to search for your track again.</p></div></script><script id="template-help-ftue-video-settings" type="text/template"><div class="ftue-video-settings"><p><ul><li>If you have a quad core computer, we recommend selecting 720p HD resolution (1280x720) and 30 frames per second (fps).</li><li>If you have a dual core computer, we recommend selecting 1/2 720p HD resolution (640x360) and 30 frames per second (fps).</li><li>If you're not sure what to choose, don't worry, you can change this later while in sessions to experiment with it.</li></ul></p></div></script><script id="template-help-new-webcam-found" type="text/template"><div class="new-webcam-found"><p>{{data.name}} is now available to use.</p></div></script><script id="template-help-old-webcam-lost" type="text/template"><div class="old-webcam-lost"><p>{{data.name}} is no longer connected.</p></div></script><script id="template-help-ftue-video-disable" type="text/template"><div class="ftue-video-disable"><p>You can disable video entirely. There are two reasons why you might do that:</p><ul><li>If you know you never want to see anyone else's video.</li><li>If you are experiencing technical problems with others send you video.</li></ul></div></script><script id="template-help-no-change-while-loading" type="text/template"><span>Certain actions are disabled while a track is being loaded.</span></script><script id="template-help-video-window-not-open" type="text/template"><div class="video-window-not-open"><p>You've selected to record video, but the video window is not open.</p><p>Click the VIDEO button in the main window and try again.</p></div></script><script id="template-help-no-webcam-1" type="text/template"><div class="video-window-not-open"><p>You've selected to record your primary webcam, but it is not open.</p></div></script><script id="template-help-no-webcam-2" type="text/template"><div class="video-window-not-open"><p>You've selected to record your secondary webcam, but it is not open.</p></div></script><script id="template-help-no-screen-capture" type="text/template"><div class="video-window-not-open"><p>You've selected to record your desktop, but that feature is not enabled.</p></div></script><script id="template-help-vid-record-chat-input" type="text/template"><div class="vid-record-chat-input"><p>Any chat inputs in the session will also be included in the video if checked.</p></div></script><script id="template-help-first-time-jamtrack-web-player" type="text/template"><div class="first-time-jamtrack-web-player">Create custom mixes to mute parts, slow down playback, etc.</div></script><script id="template-help-no-audio-help" type="text/template"><div class="no-audio-help"><p>A remote musician will appear grayed out if you are not receiving streaming audio from them.</p><p>Usually audio streaming just works, but in some cases router configurations do not allow audio streams to reach your computer.</p><p>This article <a href="https://forum.jamkazam.com/showthread.php?tid=118" rel="external">describes how you can configure your router</a> to allow the streamed audio to get through to you.</p></div></script><script id="template-help-teacher-musician-profile" type="text/template"><div class="teacher-musician-profile big-dark-help"><p><a href="https://forum.jamkazam.com/showthread.php?tid=119" rel="external">Click here</a>&nbsp;for a help article that explains how to fill out your musician profile.</p></div></script><script id="template-help-teacher-profile" type="text/template"><div class="teacher-profile big-dark-help"><p><a href="https://jamkazam.desk.com/customer/en/portal/articles/2405835-creating-your-teacher-profile#EditTeacherProfile" rel="external">Click here</a>&nbsp; for a help article that explains how to fill out your teacher profile effectively to attract students.</p></div></script><script id="template-help-jamtrack-variants" type="text/template"><div class="jamtrack-variants big-dark-help"><p>The FULL package of a JamTrack will let you also download each track or mix to a personal device. You can always upgrade to FULL later.</p></div></script><script id="template-help-jamtrack-upgrade" type="text/template"><div class="jamtrack-upgrade big-dark-help"><p>Upgrade your JamTrack so that you can download each track or mix to a personal device.</p></div></script><script id="template-help-side-remaining-jamclass-credits" type="text/template"><div class="side-remaining-jamclass-credits"><h2>Book JamClass Lesson</h2><p>You currently have {{data.jamclass_credits}} JamClass lesson credits available.</p><a class="book-now button-orange">BOOK NOW!</a></div></script><script id="template-help-side-remaining-test-drives" type="text/template"><div class="side-remaining-test-drives"><h2>Book TestDrive Lesson</h2><p>You currently have {{data.remaining_test_drives}} TestDrive lesson credits available.</p><a class="book-now button-orange">BOOK NOW!</a></div></script><script id="template-help-side-buy-test-drive" type="text/template"><div class="side-buy-test-drive"><h2>Book TestDrive Lesson</h2><p>TestDrive is the best way to get started with lessons. We offer packages to let you try lessons with 2 or 4 different teachers at highly discounted rates to find the teacher who is best for you. Or if you're confident you've found the right one, you can get a discounted rate on your first lesson to get rolling.</p><a class="book-now button-orange">BOOK NOW!</a><p>Or call us at</p><p>877-376-8742 (877-37-MUSIC)</p><p>And we can answer any questions and help set you up over the phone.</p></div></script><script id="template-help-side-buy-normal-lesson" type="text/template"><div class="side-buy-normal-lesson"><h2>Book Lesson</h2><p>Lessons with {{data.first_name}} start at just {{data.cheapest_lesson_stmt}}.</p><a class="book-now button-orange">BOOK NOW!</a><p>Or call us at</p><p>877-376-8742 (877-37-MUSIC)</p><p>And we can answer any questions and help set you up over the phone.</p></div></script><script id="template-help-side-didnt-find-teacher" type="text/template"><div class="side-didnt-find-teacher"><h2>Let us help!</h2><p>Didn't find the teacher you want? Tell us what you're looking for,and our concierge team will find one or more teachers who meet your requirements in about a week. We are 100% committed to helping you connect to your ideal teacher!</p><div class="field"><label>Email</label><input class="email" placeholder="Email address" type="text" value="{{data.email}}" /></div><div class="field"><label>Phone</label><input class="phonenumber" placeholder="Callback number" type="text" /></div><div class="textarea-wrapper"><textarea class="note" placeholder="Write a note here explaining what you need in your teacher..."></textarea></div><a class="post-help button-orange">SEND NOTE</a></div></script><script id="template-help-ftue-step-3-config-tracks" type="text/template"><div class="ftue-step-3-config-tracks big-dark-help"><p>Please click here for detailed instructions to successfully complete this setup step. These instructions will help you avoid wasted time and frustration.</p></div></script><script id="template-help-ftue-step-2-instructions" type="text/template"><div class="ftue-step-2-instructions big-dark-help"><p>Please click here for detailed instructions to successfully complete this setup step. These instructions will help you avoid wasted time and frustration.</p></div></script><script id="template-help-ftue-step-2-sample-rate" type="text/template"><div class="ftue-step-2-sample-rate big-dark-help"><p>Your sample rate settings are currently in conflict.&nbsp;<a href="https://forum.jamkazam.com/showthread.php?tid=120" rel="external">Click here</a>&nbsp;for instructions to correct this.</p></div></script><script id="template-help-ftue-step-4-instructions" type="text/template"><div class="ftue-step-4-instructions big-dark-help"><p>Please click here for detailed instructions to successfully complete this setup step.</p></div></script><script id="template-help-ftue-step-5-instructions" type="text/template"><div class="ftue-step-5-instructions big-dark-help"><p>Please click here for detailed instructions to successfully complete this setup step.</p></div></script><script id="template-help-test-drive-package-go" type="text/template"><div class="test-drive-package-go"><p>{% if(data.plural) { %}Enter your email and a password, and click Sign Up to pay for and book your lesson with these awesome teachers!{% } else { %}Enter your email and a password, and click Sign Up to pay for and book your lesson with this awesome teacher!{% } %}</p></div></script>
<!-- / pulls in all dialogs -->
<div class="overlay" id="banner_overlay"></div><div class="dialog-overlay-sm" data-type="" id="banner"><div class="content-head"><img height="24" width="24" class="content-icon alert" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png"><img height="24" width="24" class="content-icon notice" src="/assets/content/icon_checkmark_circle-9c885ebd3a7a662b3d6bf5a26103a9f471000a2cad59a0ba9446b9e7d0aa77a3.png"><h1></h1></div><div class="dialog-inner"></div><br class="end-content" clear="all"><div class="center buttons"><a class="button-orange close-btn">CLOSE</a><div class="no-more-show"><input class="no-more-show-checkbox" type="checkbox"><span>Don't show this again</span></div><a class="button-orange yes-btn">YES</a><a class="button-grey no-btn">CANCEL</a></div></div><script id="template-app-in-read-only-volume" type="text/template"><div class="template-app-in-read-only-volume"><p>The JamKazam application is running in a read-only volume. This stops the automatic update feature from working, and may cause other issues because it is not a supported configuration.</p><p>So let's fix it. Don't worry--it's easy to do--please read on.</p><p>First, here's almost certainly what happened to cause this problem: after JamKazam.dmg was downloaded, it was then double-clicked and a window opened showing the contents of the dmg. The JamKazam application icon was double-clicked inside that opened window. Unfortunately, that isn't OK.</p><p>Instead, do this to move JamKazam to a good location, and run it from there:</p><ol><li class="download-dmg">Download the latest mac installer from the<a href="/downloads" rel="external">Downloads</a>page.<br /><em>(the download will have a filename ending in .dmg)</em></li><li>Double-click the downloaded dmg file to open it.</li><li>In the resulting screen, drag the JamKazam icon to the Applications folder. It will show a progress bar as it copies.</li><li>Double-click the Applications folder to go into the folder.</li><li>If you are still running the JamKazam application at this point, you will need to stop it before executing the next step.</li><li>Find the JamKazam application in the Applications folder, and double-click the icon to launch it!</li></ol></div></script><script id="template-shutdown-prompt" type="text/template"><div class="shutdown-prompt"><ul><li><span class="definition">SHUT DOWN</span>- Choosing this option will shutdown the application immediately.</li></ul></div></script><script id="template-mixer-mode-change" type="text/template"><div class="mixer-mode-change">JamKazam gives you control over both a personal and a master mix in each session:<ul><li><span class="definition">Master Mix</span><div>The master mix controls the audio mix that will be used for any recordings you make while in sessions, and also the audio mix that will be broadcast to fans listening to your live session performances. With master mix selected, when you adjust the faders on the session screen up or down, it changes the master mix for all musicians and tracks in the session globally.</div></li><li><span class="definition">Personal Mix</span><div>The personal mix controls the audio mix that you individually hear while playing in the session, and you can customize this mix to hear more or less of the music stream from each other musician playing in the session. This does not affect the master mix used for recordings or broadcasts. With personal mix selected, when you adjust the faders on the session screen up or down, it changes the personal mix only for you locally.</div></li><li><span class="definition">Note on Audio Files</span><div>The volume control on any audio file is always both the master and personal volume control, regardless of the current mode.</div><br /><br /></li></ul></div></script>
<script type="text/template" id="template-disconnected">
<h2 align="center">Disconnected from Server</h2>
<br />
<br />
<br />
<div align="center">
You have been disconnected from JamKazam. <br/><br/>
<span class="reconnect-progress-msg">Reconnecting automatically in <span class="reconnect-countdown">{countdown}</span></span>
</div>
<br clear="all" /><br />
<div class="right">
<a href="#" class="button-orange disconnected-reconnect">RECONNECT NOW</a>
</div>
</script>
<!-- Terms Dialog -->
<div class="dialog" layout="dialog" layout-id="leave-session-warning" id="leave-session-warning">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png">
<h1>Warning</h1>
</div>
<div class="dialog-inner">
<p>
WARNING: This action will result in you leaving this session. You will no longer be
able to transmit or hear audio. Click OK below to proceed.
</p>
<br clear="left"><br>
<div class="right">
<a id="btn-accept-leave-session" layout-action="close" class="button-orange">OK</a>
</div>
<div class="right">
<a id="btn-cancel-leave-session" layout-action="close" class="button-grey">CANCEL</a>
</div>
<br clear="all">
</div>
</div>
<div class="dialog configure-tracks" id="configure-tracks-dialog" layout="dialog" layout-id="configure-tracks">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png">
<h1>configure tracks</h1>
</div>
<div class="dialog-inner">
<div data-react-class="ConfigureTracksDialogContents" data-react-props="{}" data-react-cache-id="ConfigureTracksDialogContents-0"><div><div class="dialog-tabs"><a class="selected tab-configure-audio">Inputs &amp; Outputs</a><a class="tab-configure-voice">Voice Chat</a></div><div class="instructions"><span>Choose your audio device. Drag and drop to assign input ports to tracks, and specify the instrument for each track. Drag and drop to assign a pair of output ports for session stereo audio monitoring.</span></div><div class="clearall"></div><div class="tab no-selection-range" data-tab-id="music-audio"><div class="ConfigureTracks"><select class="certified-audio-profile" style="display: none;"></select><div class="inputs-view"><div><h3 class="session-audio-inputs-header">Session Audio Inputs (Live Tracks)</h3><h3 class="plugin-header">Plugin</h3><h3 class="instrument-header">Instrument</h3></div><div class="live-tracks"></div><div class="add-track-action"><a class="button-orange">ADD AUDIO TRACK . . . </a><a class="button-orange">ADD MIDI TRACK . . . </a></div></div><div class="outputs-view"><div><h3 class="session-audio-outputs-header">Session Audio Outputs (Requires 2 Ports)</h3><div class="output-tracks"></div><a class="button-orange">UPDATE OUTPUTS . . . </a></div></div><div class="clearall"></div></div><div class="clearall"></div></div><div class="tab" data-tab-id="voice-chat"><form class="select-voice-chat-option section voice"><div class="sub-header">Select Voice Chat Option</div><div class="voicechat-option reuse-audio-input"><input type="radio" name="voicechat" checked=""><h3>Use Music Microphone</h3><p>I am already using a microphone to capture my vocal or instrumental music, so I can talk with other musicians using that microphone</p></div><div class="voicechat-option use-chat-input"><input type="radio" name="voicechat"><h3>Use Chat Microphone</h3><p>I am not using a microphone for acoustic instruments or vocals, so use the input selected to the right for voice chat during my sessions</p></div></form><div class="clearall"></div><div class="select-voice-chat"><div class="sub-header">Voice Chat Input</div><div class="ftue-box chat-inputs"></div><div class="vu-meter"><div class="ftue-controls"><div class="ftue-vu-left voice-chat-vu-left"></div><div class="ftue-fader chat-fader"></div><div class="gain-label">GAIN</div><div class="ftue-vu-right voice-chat-vu-right"></div></div></div></div><div class="clearall"></div></div><div class="buttons"><a class="btn-add-new-audio-gear button-grey">ADD NEW AUDIO GEAR</a><a class="button-grey btn-cancel">CANCEL</a><a class="button-orange btn-update-settings">SAVE SETTINGS</a></div></div></div>
</div>
</div>
<div class="dialog configure-tracks" id="edit-recording-dialog" layout="dialog" layout-id="edit-recording"><div class="content-head"><img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png"><h1>Edit Recording</h1></div><div class="dialog-inner"><form><div class="field"><label for="name">Recording name:</label><input name="name" type="text"></div><div class="field"><label for="description">Description:</label><textarea name="description" rows="4"></textarea></div><div class="field genre-selector"><label for="genre">Genre:</label><select name="genre"></select></div><div class="field" purpose="is_public"><input name="is_public" type="checkbox"><label for="is_public">Public Recording</label></div></form><div class="buttons"><div class="left"><a class="button-grey cancel-btn" layout-action="cancel">CANCEL</a></div><div class="right"><a class="button-orange delete-btn">DELETE</a><a class="button-orange save-btn">UPDATE</a></div></div><br clear="all"></div></div>
<!-- Invitation Dialog -->
<div class="dialog invitation-overlay" layout="dialog" layout-id="inviteUsers" id="invitation-dialog">
<div class="invitation-inner" id="invitation-textarea-container" style="display:none">
<div style="margin-left:10px; margin-top:10px;">
<label for="txt-emails">Enter email address(es). If multiple addresses, separate with commas.</label><br>
<textarea id="txt-emails"></textarea>
</div>
<div style="margin-left:10px; margin-top:20px;display:none">
<label for="txt-message">Enter a personal message to the person(s) you are inviting.</label><br>
<textarea id="txt-message" disabled="disabled" style="display:none"></textarea>
</div>
</div>
<div class="invitation-inner" id="invitation-checkbox-container" style="display:none">
<div style="margin-left:10px; margin-top:10px;">
<label>Click the checkbox next to the email of each person you'd like to invite.</label><br>
<label class="email-filter" for="email-filter">Filter Results: <input text="text" name="email-filter" disabled="disabled"></label><br>
<div id="invitation-checkboxes">
</div>
</div>
</div>
<br clear="all">
<div class="left">
<a id="btn-cancel-email" layout-action="close" class="button-grey">CANCEL</a>&nbsp;
</div>
<div class="right">
<a id="btn-send-invitation" layout-action="" class="button-orange">INVITE</a>
<a id="btn-next-invitation" class="button-orange">NEXT</a>
</div>
</div>
<!-- Share dialog -->
<div class="dialog share-overlay" layout="dialog" layout-id="share-dialog" id="share-dialog">
<div class="content-head"><h1>share this <span id="shareType"></span></h1></div>
<div class="dialog-inner">
<div class="share-to-social-media border-bottom">
<h3 class="mb5">Share to Social Media:</h3>
<div class="share-message-holder">
<textarea class="share-message" rows="4" placeholder="Add a Message..."></textarea><br>
<span class="error-msg"></span>
</div>
<div class="share-options left">
<span class="share-with-facebook">
<input type="checkbox" disabled="disabled">
<img align="absmiddle" alt="" style="vertical-align:middle" src="/assets/content/icon_facebook-8bfa4cfb93779f15b518fe382dd5c7cb3752cb3ac818d3cf8e777f0ab64150a0.png" width="24" height="24">
<a href="#" class="authorize">(sign in)</a>
</span>
<span class="share-with-twitter">
<input type="checkbox" disabled="disabled">
<img align="absmiddle" alt="" style="vertical-align:middle" src="/assets/content/icon_twitter-e8c36b173c1ed732b643ed731e5e78a5dcef75da6242ba7ecfa3d418a7317c60.png" width="24" height="24">
<a href="#" class="authorize">(sign in)</a>
</span>
<!--
<div class="share-with-google">
<input type="checkbox" disabled="disabled" />
<img align="absmiddle" alt="" style="vertical-align:middle" src="/assets/content/icon_google-de53b44c89f8779e3edf59c054014a809c56a07686712bcd6af3e4e1dcc157d7.png" width="24" height="24" />
</div>-->
<div class="error-msg">Please select at least one</div>
</div>
<div class="share-button-holder"><a class="button-orange dialog-share-button">SHARE</a></div>
<br clear="both">
</div>
<div class="share-link border-bottom">
<h3>Share a Link:</h3>
<div class="link-contents" id="link-contents">
</div>
<div class="right"><a id="btn-share-copy" class="button-orange">COPY LINK</a></div>
</div>
<div class="actions"><a class="button-orange" layout-action="close">X CLOSE</a></div>
<br clear="both">
<!-- contains syndication widget code -->
</div>
</div>
<div class="dialog network-test" id="network-test-dialog" layout="dialog" layout-id="network-test">
<div class="content-head">
<h1>Test Router &amp; Network</h1>
</div>
<div class="dialog-inner">
<div class="network-test">
<div class="help-text">
<span>In this step, you will test your router and Internet connection to ensure that you can play in online sessions, and to see how many musicians can be in a session with you based on your internet connection.</span>
<span class="gear-wizard-only">&nbsp;If you don't want to play online in real-time sessions, you can click NEXT to skip this step.</span>
</div>
<div class="wizard-step-content">
<div class="wizard-step-column">
<h2>Instructions</h2>
<div class="ftue-box instructions">
<ul>
<li>Check that computer is connected to router using Ethernet cable.</li>
<li>Click Start Network Test button.</li>
<li>View test results.</li>
</ul>
<div class="center">
<a class="button-orange watch-video" href="#" rel="external">WATCH VIDEO</a>
</div>
</div>
</div>
<div class="wizard-step-column">
<div class="summary">
<p>Ensure that your computer is connected to your home router using an Ethernet cable rather than using Wi-Fi wireless access. If necessary, find or purchase a long Ethernet cable, up to 100 ft.</p>
<p>Then click on the Start Network Test button below.</p>
<div class="center">
<a class="button-orange start-network-test" href="#">START NETWORK TEST</a>
<br>
<a class="hidden button-orange forever-network-test" href="#">THE FOREVER TEST (ADMIN ONLY)</a>
</div>
</div>
</div>
<div class="wizard-step-column">
<h2>Test Results</h2>
<div class="network-test-results ftue-box">
<div class="network-test-score-audio">
Audio:
<div class="scored-clients">
</div>
</div>
<div class="network-test-score-video">
Video:
<div class="scored-clients">
</div>
</div>
<div class="scoring-bar">
<div class="current-score">
testing...
<div class="subscore"></div>
</div>
<div class="good-marker"></div>
<div class="good-line"></div>
</div>
<div class="network-test-text">
<div class="in-progress"></div>
<ul>
<li class="audio-result"></li>
<li class="video-result"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="clearall"></div>
<div class="buttons">
<div class="left">
<a class="button-grey btn-cancel" href="#" layout-action="cancel">CANCEL</a>
<a class="button-grey btn-help" href="https://jamkazam.desk.com/customer/portal/articles/1716139-what-to-do-if-you-cannot-pass-the-network-test" rel="external">HELP</a>
</div>
<div class="right">
<a class="button-orange btn-close" href="#">CLOSE</a>
</div>
</div>
</div>
</div>
<!-- Invitation Dialog -->
<div class="dialog recordingFinished-overlay ftue-overlay tall" id="recording-finished-dialog" layout="dialog" layout-id="recordingFinished">
<div class="content-head">
<img height="20" width="20" class="content-icon" src="/assets/content/recordbutton-off-b786ca441e5e6a5535b19851e0769b0edc2dbe35cdc4e298cfce8c542d41536a.png">
<h1>recording finished</h1>
</div>
<div class="dialog-inner">
<span class="nowait">
Fill out the fields below and click the "SAVE" button to save this recording to your library. If you do not want to
keep the recording, click the "DISCARD" button.
</span>
<span class="pleasewait">
Please wait while we transfer the necessary audio files from your JamBlaster to your client...
</span>
<br>
<br>
<form class="left w40 mr20">
<div class="left w50 mr20">
<div class="field w100">
<label for="name">Recording name:</label>
<br>
<input class="w100" id="claim-recording-name" name="name" type="text">
</div>
</div>
<div class="right w40 genre-selector">
<div class="field">
<!-- genre box -->
<label for="genre">Genre:</label>
<br>
<select name="genre"></select>
</div>
</div>
<div class="field w100 left" purpose="description">
<label for="description">Description:</label>
<br>
<textarea class="w100" id="claim-recording-description" name="description"></textarea>
<div class="save-video field left" purpose="save_video">
<input checked="checked" name="save_video" type="checkbox">
<label for="save_video">Save Video to Computer</label>
</div>
<div class="upload-to-youtube field left" purpose="upload_to_youtube">
<span>
<input checked="checked" name="upload_to_youtube" type="checkbox">
<label for="upload_to_youtube">Upload Video to YouTube</label>
</span>
</div>
</div>
<div class="field left" purpose="is_public">
<input checked="checked" name="is_public" type="checkbox">
<label for="is_public">Public Recording</label>
<!-- <a href="#"><<img src="images/shared/icon_help.png" width="12" height="12" /></a> -->
</div>
</form>
<div class="left w50 ml30 preview-area">
Preview Recording:
<!-- recording play controls -->
<div class="recording recording-controls has-mix">
<div class="jam-track-get-ready">
<div class="spinner-small"></div>
<span>Get Ready!</span>
</div>
<!-- play button -->
<div class="left play-buttons">
<a class="play-button" href="#">
<img height="20" width="20" class="playbutton" src="/assets/content/icon_playbutton-65307cfdf56216f155371beecf7ad513f61451cc034199a054ae539223ec9244.png">
<img height="20" width="20" class="pausebutton" src="/assets/content/icon_pausebutton-b924a52a649c0a7db2bb4c8f1b611ee32ae45fb200a265ec04a3993061d4e39a.png">
</a>
<a class="stop-button" href="#">
<img height="20" width="20" class="stopbutton" src="/assets/content/icon_stopbutton-095550464225e47862f6ab944c6de0f7996eeba9a0114d618717b94d7a70ee77.png">
</a>
</div>
<!-- playback position -->
<div class="recording-position">
<!-- start time -->
<div class="recording-time">0:00</div>
<!-- playback background & slider -->
<div class="recording-playback">
<div class="recording-slider"><img height="16" width="5" src="/assets/content/slider_playcontrols-3f1e871ce58be5a507eac6dfa9048016adef4c6061cb342f7d72df328e7ef4af.png"></div>
</div>
<!-- end time -->
<div class="recording-time duration-time">0:00</div>
</div>
<!-- end playback position -->
<!-- current playback time -->
<div class="recording-current">0:00</div>
<div class="playback-mode-buttons icheckbuttons">
<input type="radio" name="playback-mode" checked="checked" value="preview-to-all" class="preview-to-all"><label for="playback-mode-preview-all" class="radio-text">Preview to All</label>
<input type="radio" name="playback-mode" value="preview-to-me" class="preview-to-me"><label for="playback-mode-preview-me" class="radio-text">Preview Only to Me</label>
</div>
<div class="metronome-playback-options">
<span id="metronome-playback-select"></span>
<span id="metronome-playback-help">?</span>
</div>
</div>
<!-- end recording play controls -->
<br>
<br>
</div>
<br clear="left">
<br>
<div class="right"><a class="button-grey" href="#" id="discard-session-recording">DISCARD</a>&nbsp;
<a class="button-orange" href="#" id="keep-session-recording">SAVE</a>
</div>
<br clear="all">
</div>
</div>
<div class="dialog localRecordings-overlay ftue-overlay tall" layout="dialog" layout-id="localRecordings" id="local-recordings-dialog">
<div class="content-head">
<img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png">
<h1>open a recording</h1>
</div>
<div class="dialog-inner">
<div class="recording-wrapper">
<table class="local-recordings" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th align="left">WHEN</th>
<th align="left">NAME</th>
<th align="right" class="noborder">DURATION</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br>
<div class="left paginator-holder">
</div>
<div class="right">
<a href="#" class="button-grey" layout-action="close">CANCEL</a><!--&nbsp;<a href="#" class="button-orange">OPEN RECORDING</a>-->
</div>
<br clear="all">
</div>
<script type="text/template" id="template-claimed-recording-row">
<tr data-recording-id="{{data.recordingId}}" data-local-state="{{data.aggregate_state}}">
<td>{{data.timeago}}</td>
<td>{{data.name}}</td>
<td>{{data.duration}}</td>
</tr>
</script>
</div>
<!-- Share dialog -->
<div class="dialog server-error-overlay" layout="dialog" layout-id="server-error-dialog" id="server-error-dialog" style="width:90%;height:90%; overflow:scroll">
<div class="content-head"><h1>Server Error</h1></div>
<div class="dialog-inner">
<div class="right"><a class="button-orange" layout-action="close">X CLOSE</a></div>
<br clear="both">
<div class="error-contents">
</div>
</div>
</div>
<div class="dialog textMessage-overlay ftue-overlay tall" id="text-message-dialog" layout="dialog" layout-id="text-message">
<div class="content-head">
<img width="12" height="12" class="content-icon" src="/assets/content/icon_comment-3fccc5133d6123d724298ee86d6c66e138577e6dea6a447d12f3c903228a8204.png">
<h1>
conversation with
<span class="receiver-name"></span>
</h1>
</div>
<div class="dialog-inner">
<div class="previous-messages-scroller">
<div class="previous-messages"></div>
</div>
<div class="text-message-scroller">
<form class="text-message-box">
<textarea id="new-text-message" name="new-text-message"></textarea>
</form>
</div>
<div class="left">
<span class="small offline-tip">An email will be sent if recipient is offline</span>
</div>
<div class="right">
<a class="button-grey btn-close-dialog" href="#" layout-action="close">CLOSE</a>
<a class="button-orange btn-send-text-message" href="#">SEND</a>
</div>
<div class="interaction-blocker"></div>
<span class="disconnected-msg">DISCONNECTED FROM SERVER</span>
</div>
</div>
<script id="template-previous-message" type="text/template">
<div class="previous-message">
<span class="previous-message-sender">{{data.sender}}</span>
<span class="previous-message-text">{{data.msg}}</span>
<time class="previous-message-timestamp timeago" datetime="{{data.sent}}">{{data.sent}}</time>
</div>
</script>
<div class="dialog textMessage-overlay ftue-overlay tall" id="accept-friend-request-dialog" layout="dialog" layout-id="accept-friend-request">
<div class="content-head">
<img width="14" height="14" class="content-icon" src="/assets/content/icon_friend-f3164b5a489d71c00569922cbaf077ae0bc31ac70b4f425a985f916440bb786e.png">
<h1>
friend request
</h1>
</div>
<div class="dialog-inner"></div>
<div class="right action-buttons">
<a class="button-grey btn-close-dialog" href="#" layout-action="close">CLOSE</a>
<a class="button-grey btn-cancel-dialog" href="#" layout-action="cancel">CANCEL</a>
<a class="button-orange btn-accept-friend-request" href="#">ACCEPT</a>
</div>
</div>
<script id="template-friend-request-not-friends" type="text/template">
<div class="dialog-content-scroller">
<a class="avatar-small" hoveraction="{{data.user.user_type}}" user-id="{{data.user.id}}">
<img src="{{data.user.photo_url}}">
</a>
<p class="accept-friend-msg">Become friends with {{data.user.name}} ?</p>
{% if(data.message) { %}
<div class="sender">
<span class="sender-name">{{data.user.name}}</span>
<span class="says">says:</span>
<div class="sender-msg">'{{data.message}}'</div>
</div>
{% } %}
<br clear="all">
<br clear="all">
</div>
</script>
<script id="template-friend-request-already-friends" type="text/template">
<div class="dialog-content-scroller">
<a class="avatar-small" hoveraction="{{data.user.user_type}}" user-id="{{data.user.id}}">
<img src="{{data.user.photo_url}}">
</a>
<p class="accept-friend-msg">You are now friends with {{data.user.name}}!</p>
<br>
<br>
<p>
Click
<b>friends</b>
on the right sidebar, find their name, and hover over their name for actions like 'message'
</p>
<br>
<br>
<p>
Or, you can also go straight to the
<a class="create-session-already-friends" href="/client#/createSession">create session</a>
page and click
<b>QUICK START PRIVATE</b>
to create a private session that only your friends can join!
</p>
<br clear="all">
<br clear="all">
</div>
</script>
<script id="template-friend-request-already-processed" type="text/template">
<div class="dialog-content-scroller">
<a class="avatar-small" hoveraction="{{data.user.user_type}}" user-id="{{data.user.id}}">
<img src="{{data.user.photo_url}}">
</a>
<p class="accept-friend-msg">This friend request from {{data.user.name}} is no longer valid.</p>
<br clear="all">
<br clear="all">
</div>
</script>
<script id="template-friend-generic-error" type="text/template">
<div class="dialog-content-scroller">
<p class="generic-error-msg">{{data.error_message}}</p>
<br clear="all">
</div>
</script>
<div class="dialog dialog-overlay-sm" id="launch-app-dialog" layout="dialog" layout-id="launch-app-dialog">
<div class="content-head">
<img width="24" height="24" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png">
<h1>Application Notice</h1>
</div>
<div class="dialog-inner"></div>
</div>
<script id="template-attempt-launch" type="text/template">
<p>
{{data.messagePrefix}}, you must use the JamKazam application.
</p>
<div class="right launch-buttons">
<a class="button-grey btn-cancel" href="#" layout-action="close">CANCEL</a>
<a class="button-orange btn-launch-app" href="{{data.launchUrl}}">LAUNCH APP</a>
</div>
</script>
<script id="template-unsupported-launch" type="text/template">
<p>
{{data.messagePrefix}}, you must use the JamKazam application. Please download and install the application if you have not done so already.
</p>
<div class="right launch-buttons">
<a class="button-grey btn-cancel" href="#" layout-action="close">CANCEL</a>
<a class="button-orange btn-go-to-download-page" href="/downloads">GO TO APP DOWNLOAD PAGE</a>
</div>
</script>
<script id="template-launch-successful" type="text/template">
<p>
The JamKazam application was launched successfully.
<a class="not-actually-launched" href="#">Don't see it?</a>
</p>
<div class="dont-see-it">
<p>
If you do not see the application, it may be minimized. Double-check the
<a href="{{data.osSpecificSystemTrayLink}}" rel="external">{{data.osSpecificSystemTray}}</a>
to see if it's running.
</p>
<p>
If the application is not running, then please
<a class="download-application" href="/downloads">download</a>
and install the application if you have not done so already, and then start it manually rather than using this web launcher.
</p>
</div>
<div class="right launch-buttons">
<a class="button-grey btn-done" href="#" layout-action="close">DONE</a>
</div>
</script>
<script id="template-launch-unsuccessful" type="text/template">
<h2>The JamKazam application could not be launched.</h2>
<p>
If you do not see the application, it may be minimized. Double-check the
<a href="{{data.osSpecificSystemTrayLink}}" rel="external">{{data.osSpecificSystemTray}}</a>
to see if it's running.
</p>
<p>
If the application is not running, then please
<a class="download-application" href="/downloads">download</a>
and install the application if you have not done so already, and then start it manually rather than using this web launcher.
</p>
<div class="right launch-buttons">
<a class="button-grey btn-done" href="#" layout-action="close">CLOSE</a>
<a class="button-orange btn-go-to-download-page" href="/downloads">GO TO APP DOWNLOAD PAGE</a>
</div>
</script>
<div class="dialog dialog-overlay-sm" id="comment-dialog" layout="dialog" layout-id="comment-dialog">
<div class="content-head">
<h1></h1>
</div>
<div class="dialog-inner">
<div class="right">
<a class="button-orange" id="dialog-close-button" layout-action="close">X CLOSE</a>
</div>
<h2>Comments:</h2>
<div class="avatar-small">
<img alt="" src="/assets/shared/avatar_generic-770246c6abf9a87533829e81ec7726dbb7783feaa276d23c0d9c00068febc417.png">
</div>
<div class="left w80 p10">
<textarea class="w100 p5 f15" id="txtComment" placeholder="Enter a comment..." rows="2"></textarea>
<br>
<br>
<div class="right">
<a class="button-orange" id="btn-add-comment">ADD COMMENT</a>
</div>
</div>
<br clear="all">
<div class="dialog-comment-scroller"></div>
</div>
</div>
<script id="template-comments" type="text/template">
<div class="avatar-small mr10" hoveraction="{{data.hoverAction}}" profileaction="{{data.hoverAction}}" user-id="{{data.user_id}}">
<a href="/client#/profile/{{data.user_id}}">
<img alt="" src="{{data.avatar_url}}">
</a>
</div>
<div class="w80 left p10 lightgrey mt10 comment-text">
<a hoveraction="{{data.hoverAction}}" profileaction="{{data.hoverAction}}" user-id="{{data.user_id}}">{{data.name}}</a>
&nbsp;{{data.comment}}
<br>
<div class="f12 grey mt5 comment-timestamp">
{{data.timeago}}
</div>
</div>
<br clear="all">
</script>
<div class="dialog dialog-overlay-sm rsvp-dialog" id="rsvp-submit-dialog" layout="dialog" layout-id="rsvp-submit-dialog">
<div class="content-head">
<img alt="" class="content-icon" width="20" height="20" src="/assets/content/icon_checkmark_circle-9c885ebd3a7a662b3d6bf5a26103a9f471000a2cad59a0ba9446b9e7d0aa77a3.png">
<h1>rsvp</h1>
</div>
<div class="dialog-inner">
<h2>SESSION</h2>
<div class="session-name"></div>
<div class="scheduled-start"></div>
<div class="schedule-recurrence"></div>
<div class="rsvp-options">
<div class="part">
<div class="slot-instructions">Check the box(es) next to the track(s) you want to play in the session:</div>
<div class="error" style="display:none"></div>
<div class="rsvp-instruments"></div>
<div class="comment-instructions">Enter a message to the other musicians in the session (optional):</div>
</div>
<textarea class="txtComment" placeholder="Enter a comment..." rows="2"></textarea>
</div>
<div class="rsvp-confirm hidden">
<p>SUCCESS!</p>
<br>
<p>We recommend that you subscribe to your own personal JamKazam calendar in your favorite calendar app to help you remember this session, as well as other sessions and events to which you RSVP.</p>
<br>
<p>Here is the URL for your calendar:</p>
<div class="account-calendar"><div class="ics-feed-link">http://127.0.0.1:41029/api/users/b900991c-69af-4b6d-b9d3-9a75143d74cc/calendar.ics</div><div class="ics-help-links"><div class="ics-help-link"><a href="">How to subscribe to your calendar in Google Calendar</a></div><div class="ics-help-link"><a href="">How to subscribe to your calendar in Microsoft Outlook</a></div></div></div>
<div class="confirm-buttons">
<a class="button-grey" id="btnClose" layout-action="close">CLOSE</a>
</div>
</div>
<div class="buttons">
<div class="left">
<a class="button-grey" href="https://jamkazam.freshdesk.com" id="btnHelp" rel="external" target="_blank">HELP</a>
</div>
<div class="right">
<a class="button-grey" id="btnCancel" layout-action="close">CANCEL</a>
<a class="button-orange" id="btnSubmitRsvp">SUBMIT RSVP</a>
</div>
</div>
</div>
</div>
<div class="dialog dialog-overlay-sm rsvp-dialog" id="rsvp-cancel-dialog" layout="dialog" layout-id="rsvp-cancel-dialog">
<div class="content-head">
<img alt="" class="content-icon" width="20" height="20" src="/assets/content/icon_checkmark_circle-9c885ebd3a7a662b3d6bf5a26103a9f471000a2cad59a0ba9446b9e7d0aa77a3.png">
<h1>cancel rsvp</h1>
</div>
<div class="dialog-inner">
<h2>SESSION</h2>
<div class="session-name"></div>
<div class="scheduled-start"></div>
<div class="schedule-recurrence"></div>
<div class="part">
<div class="error" style="display:none"></div>
<div class="icheckbuttons">
<ul id="cancel-rsvp-container">
<li>
<input checked="" id="cancel-single-session" name="cancel" type="radio" value="yes">
<label class="radio-text" for="cancel-single-session">Cancel RSVP just for this one session</label>
<div class="clearall"></div>
</li>
<li>
<input id="cancel-all-sessions" name="cancel" type="radio" value="all">
<label class="radio-text" for="cancel-all-sessions">Cancel RSVP for all future sessions</label>
<div class="clearall"></div>
</li>
</ul>
</div>
</div>
<div class="cancel-instructions">Enter a message to the other musicians in the session (optional):</div>
<textarea class="txtComment" id="txtComment" placeholder="Enter a comment..." rows="2"></textarea>
<div class="buttons">
<div class="left">
<a class="button-orange" href="https://jamkazam.freshdesk.com" rel="external" target="_blank">HELP</a>
</div>
<div class="right">
<a class="button-grey" id="btnCancel" layout-action="close">CANCEL</a>
<a class="button-orange" id="btnCancelRsvp">CANCEL RSVP</a>
</div>
</div>
</div>
</div>
<div class="dialog dialog-overlay-sm" id="rsvp-create-slot-dialog" layout="dialog" layout-id="rsvp-create-slot-dialog"><div class="content-head"><img width="24" height="24" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png"><h1>RSVP Slot Already Filled</h1></div><div class="dialog-inner"><div class="instructions"></div><br><div class="instruments"></div><div class="buttons"><div class="right"><a class="button-grey btnCancel" layout-action="cancel">NO</a><a class="button-orange btnSave">YES</a></div></div></div></div>
<div class="dialog dialog-overlay-lg" id="session-start-dialog" layout="dialog" layout-id="session-start-dialog"><div class="content-head"><img width="24" height="24" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png"><h1>Start Session</h1></div><div class="dialog-inner"><div class="session-wrapper"><div class="left w55"><h3>When are you starting your session?</h3><div class="mt5" id="session-start-type-disp"></div><h3 class="mb5 mt20">What are you playing?</h3><em id="session-name-disp"></em><div class="mt5" id="session-description-disp"></div><div class="mt5" id="session-notations-disp"></div><h3 class="mt20">Which band is playing?</h3><div class="mt5" id="session-band-disp"></div><h3 class="mt20">What language will be spoken?</h3><div class="mt5" id="session-language-disp"></div></div><div class="right w40"><h3>Who is invited?</h3><div class="mt5" id="session-invited-disp"></div><h3 class="mt20">What instruments/parts do you need?</h3><div class="left ib w20 mt5">Me:</div><div class="left ib w75 mt5" id="session-instruments-me-disp"></div><div class="clearall left ib w20 mt5">Others:</div><div class="left ib w75 mt5" id="session-instruments-rsvp-disp"></div><br clear="all"><h3 class="mt20">What access policies are in effect?</h3><div class="mt5" id="session-musician-access-disp"></div><div id="session-fans-access-disp"></div><h3 class="mt20">What legal policy is in effect?</h3><div class="mt5" id="session-policy-disp"></div></div></div><div class="clearall"></div><br><br><div class="buttons"><div class="right"><a class="button-grey btnCancel" layout-action="cancel">CANCEL</a><a class="button-orange btnStartSession">START SESSION</a></div></div></div></div>
<div class="dialog dialog-overlay-sm" id="session-cancel-dialog" layout="dialog" layout-id="session-cancel-dialog">
<div class="content-head">
<img alt="" class="content-icon" width="20" height="20" src="/assets/content/icon_checkmark_circle-9c885ebd3a7a662b3d6bf5a26103a9f471000a2cad59a0ba9446b9e7d0aa77a3.png">
<h1>cancel session</h1>
</div>
<div class="dialog-inner">
<h2>SESSION</h2>
<span class="session-name"></span>
<br>
<span class="scheduled-start"></span>
<br>
<span class="schedule-recurrence"></span>
<br>
<br>
Enter a message to the other musicians in the session (optional):
<textarea class="cancel-description" id="txtCancelMessage" placeholder="Enter a message..." rows="2"></textarea>
<br>
<br>
<div class="left">
<a class="button-orange" href="https://jamkazam.freshdesk.com" rel="external" target="_blank">HELP</a>
</div>
<div class="right">
<a class="button-grey" id="btnCancel" layout-action="close">CANCEL</a>
<a class="button-orange" id="btnCancelSession">CANCEL SESSION</a>
</div>
<br clear="all">
</div>
</div>
<div class="dialog thin-dialog overlay-small" layout-id="signin-dialog" id="signin-dialog">
<div class="content-head">
<h1>sign in</h1>
</div>
<div class="overlay-inner signin-common">
<a class="signin-facebook" href="/auth/facebook"><img width="249" height="46" src="/assets/content/button_facebook_signin-7f094bf735f0c3e194a0d71d6be04b414056e0eed0cd618b37faf2e40b0b87fb.png"></a>
<br>
<br>
<br>
<strong class="white">Or sign in with JamKazam Account</strong>
<br>
<br>
<form class="signin-form " action="/signin" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off"><input name="sso" type="hidden" value="">
<input name="send_back_to" type="hidden" value="">
<div class="field email">
<label for="session_email">Email Address:</label>
<input autofocus="autofocus" type="text" name="session[email]" id="session_email">
</div>
<div class="field password">
<label for="session_password">Password:</label>
<input autofocus="autofocus" type="password" name="session[password]" id="session_password">
</div>
<script>
if(window.jamClient === undefined) {
document.write('<input name="user[remember_me]" type="hidden" value="0">');
document.write('<small><input type="checkbox" name="remember_me" class="keep-logged-in" value="1" name="user[remember_me]" id="user_remember_me" checked> Keep me logged in</small>');
} else {
document.write('<input name="user[remember_me]" type="hidden" value="1">');
}
</script><input name="user[remember_me]" type="hidden" value="0"><small><input type="checkbox" name="remember_me" class="keep-logged-in" value="1" id="user_remember_me" checked=""> Keep me logged in</small>
<div class="login-error-msg">Invalid login</div>
<br clear="all">
<div align="center" class="actions">
<a class="button-grey signin-cancel" href="#">CANCEL</a>
<input type="submit" name="commit" value="SIGN IN" class="button-orange signin-submit" data-disable-with="SIGN IN">
<br>
<br>
<small>
<a class="forgot-password" href="/request_reset_password" rel="external">Forgot Password?</a>
</small>
</div>
</form><br>
<div class="center">
<small>
Don't have an account?
<a class="show-signup-dialog" href="#">Sign Up</a>
</small>
</div>
</div>
<br clear="all">
</div>
<div class="dialog thin-dialog overlay-small" layout-id="signup-dialog" id="signup-dialog">
<!-- ftue header -->
<div class="content-head">
<h1>sign up for jamkazam</h1>
</div>
<div class="overlay-inner signup-common">
<a class="signup-facebook" href="/auth/facebook"><img width="249" height="46" src="/assets/content/button_facebook_signup-57c91a83257dc1b8420c4e7d2d8589720dc0829a37fd91de25996217c07c2638.png"></a>
<br>
<br>
<br>
<div class="center">
<strong class="white">Or</strong>
</div>
<br>
<br>
<div class="center">
<a class="button-orange block signup-email" rel="external" href="/signup">SIGN UP WITH YOUR EMAIL</a>
<br>
<div class="center">
<small>
Already have an account?
<a class="show-signin-dialog" href="#">Sign In</a>
<br>
<br>
<a class="signup-cancel" href="#">Cancel</a>
</small>
</div>
</div>
<br clear="all">
</div>
<!-- end overlay content -->
</div>
<!-- video overlay content -->
<div class="dialog thin-dialog overlay-video" layout-id="video-dialog" id="video-dialog">
<!-- header -->
<div class="content-head">
<h1 id="video-dialog-header"></h1>
<div class="right"><a id="video-dialog-close" href="#" class="button-orange">X CLOSE</a></div>
</div>
<!-- inner wrapper -->
<div class="overlay-video-inner">
<iframe id="video-dialog-iframe" width="550" height="309" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<!-- end inner -->
</div>
<!-- end video overlay content -->
<!-- Friend Selector Dialog -->
<div class="dialog choosefriends-overlay" layout="dialog" layout-id="select-friends">
<div class="choosefriends-inner">
<table id="friend-selector-list" width="100%" cellspacing="0">
</table>
<br clear="left"><br>
</div>
<br clear="all">
<div class="left">
<a id="btn-cancel-friends" layout-action="close" class="button-grey">CANCEL</a>&nbsp;
</div>
<div class="right">
<a id="btn-save-friends" layout-action="close" class="button-orange">ADD SELECTED FRIENDS</a>
</div>
</div>
<!-- Added Invitation Template -->
<script type="text/template" id="template-friend-selection">
<tr user-id="{userId}" class="{css_class}">
<td><img user-id="{userId}" src="/assets/content/icon_check_white.png" width="11" height="12" style="display:{check_mark_display}" /></td>
<td><div class="avatar-tiny"><img src="{avatar_url}" /></div></td>
<td>{userName}</td>
<td align="right"><small>{status}</small>
<span><img src="{status_img_url}" style="display:{status_img_display}" width="24" height="24" align="absmiddle" /></span>
</td>
</tr>
</script>
<div class="dialog dialog-overlay-sm" id="jamtrack-availability-dialog" layout="dialog" layout-id="jamtrack-availability-dialog">
<div class="content-head">
<h1>JamTrack Availability:</h1>
</div>
<div class="dialog-inner">
<div class="left">
<span>JamKazam has not yet secured license rights to sell this JamTrack to customers outside the United States.</span>
</div>
<div class="right">
<a class="button-orange" id="dialog-close-button" layout-action="close">X CLOSE</a>
</div>
<div class="clearall"></div>
</div>
</div>
<div class="dialog dialog-overlay-sm" id="jamtrack-license-dialog" layout="dialog" layout-id="jamtrack-license-dialog"><div class="content-head"><h1>JamTrack License:</h1></div><div class="dialog-inner"><div class="content-body"><div class="content-body-scroller"><div class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim ut nunc at hendrerit. Vestibulum semper risus a libero fermentum, molestie convallis risus faucibus. Ut molestie hendrerit orci, id laoreet turpis malesuada nec. Cras sem urna, commodo finibus sodales eu, scelerisque et ligula. Vivamus congue urna lobortis, volutpat ex non, facilisis ante. Maecenas laoreet lacus sit amet justo tempus sagittis. Proin eget libero est. Nullam vulputate finibus nibh nec malesuada. Proin at odio dui. Cras venenatis pharetra ipsum sit amet mollis. Vivamus enim lectus, venenatis sit amet velit at, condimentum euismod dolor. Sed ut tellus in lacus finibus maximus quis ac tortor. Nullam ac purus tincidunt, vestibulum magna vel, hendrerit nunc. Nam tincidunt velit ut est congue ultrices. Integer id magna vulputate, consequat ante et, gravida nibh. </div><div class="paragraph">Etiam ac neque vel ex sagittis cursus ut a nulla. Praesent id pretium metus. Duis rhoncus egestas magna ut fringilla. Aenean et lobortis sem. Duis at turpis luctus, auctor lectus vitae, consectetur ante. Donec feugiat ullamcorper lacus eu ultricies. Sed vitae turpis arcu. Nam faucibus facilisis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vel felis rutrum, elementum lacus euismod, ultricies leo. </div><div class="paragraph">Etiam ac neque vel ex sagittis cursus ut a nulla. Praesent id pretium metus. Duis rhoncus egestas magna ut fringilla. Aenean et lobortis sem. Duis at turpis luctus, auctor lectus vitae, consectetur ante. Donec feugiat ullamcorper lacus eu ultricies. Sed vitae turpis arcu. Nam faucibus facilisis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vel felis rutrum, elementum lacus euismod, ultricies leo. </div><div class="paragraph">Etiam non nisi magna. Sed diam sem, vulputate sit amet odio quis, vulputate pharetra nunc. Morbi commodo lacus in leo semper semper. Sed nulla felis, consequat dignissim dictum eu, elementum eget massa. Nulla luctus condimentum magna. Vestibulum in interdum erat. In porttitor fermentum mi, ac tincidunt nisi interdum vulputate.</div></div></div><div class="jamtrack_buttons"><div class="right"><a class="button-grey btnCancel" layout-action="cancel">OK </a></div></div></div></div>
<div class="dialog dialog-overlay-sm" id="client-preferences-dialog" layout="dialog" layout-id="client-preferences-dialog"><div class="content-head"><img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png"><h1>Application Preferences</h1></div><div class="dialog-inner"><form action="post"><div class="column"><div class="field" data-purpose="autostart"><div class="input"><input name="autostart" type="checkbox"></div><label for="autostart">Start JamKazam when system starts</label><p class="hint">If you use JamKazam mostly to play with others in real-time, we recommend that you check this box to allow the JamKazam application to start each time you start your computer. It will run quietly in the background, and you won't notice it, but it will collect critical latency data periodically to help you connect with other musicians, and it will also upload/download any recordings you make in sessions.</p></div><div class="field" data-purpose="use-static-port"><div class="input"><input name="use-static-port" type="checkbox"></div><label for="use-static-port">Always use the same set of UDP ports</label><p class="hint">If you are having problems with the network test or not hearing audio from others and need to configure Port Forwarding in your router, check this box.</p></div><div class="field" data-purpose="static-port"><div class="input"><input name="static-port" type="number"></div><label for="static-port">The first port that the client will open</label><p class="hint">You can specify any port you like, but we recommend an even number in the range including 1026-49150 to avoid conflicts with other programs. When configuring Port Forwarding in your router, be sure to open this port along with the next 10. For example, if this field is 12000, then in your router, forward ports 12000-12010 to your computer's IP address.</p></div><br clear="all"></div><br clear="all"></form><div class="buttons"><div class="right"><a class="button-grey btnCancel" layout-action="cancel">CANCEL</a><a class="button-orange btnSave">SAVE</a></div></div></div></div>
<div class="dialog dialog-overlay-sm" id="audio-profile-invalid-dialog" layout="dialog" layout-id="audio-profile-invalid-dialog"><div class="content-head"><img width="24" height="24" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png"><h1>Connect Audio Gear</h1></div><div class="dialog-inner"><p class="instructions-header">Your audio gear is not functioning. Please reconnect it.</p><div class="column"><h2>Instructions</h2><div class="instructions-box"><ul><li>The most common reason audio gear is not working is due to it being disconnected.</li><li>Please reconnect your audio gear, and the application should automatically attempt to re-enable it. If it does not, select the 'RESCAN SYSTEM' button after reconnecting the device.</li><li>If you are still having issues, go to the Audio Gear Screen where more configuration options are available</li></ul></div></div><div class="column"><a class="button-orange" data-purpose="reload-audio" href="#">RESCAN SYSTEM</a><br><span class="rescanning-notice"></span></div><div class="column"><h2>Gear Status</h2><div class="instructions-box"><div class="results scanning"><span class="result scanning">SCANNING</span><span class="result success">FUNCTIONING</span><span class="result failed">NOT<br>FUNCTIONING</span></div><ul class="results-detail"><li>Input device is not connected</li></ul></div></div><div class="buttons"><div class="left"><a class="button-grey btnCancel" layout-action="cancel">CANCEL</a><a class="button-grey btnConfigureGear">GO TO AUDIO GEAR SCREEN</a><a class="button-grey btnRestartApplication">RESTART APPLICATION</a></div><div class="right"><a class="button-orange btnContinue">CONTINUE TO SESSION</a></div></div></div></div>
<div class="dialog whatsnext-overlay ftue-overlay tall" id="getting-started-dialog" layout="dialog" layout-id="getting-started"><div class="content-head"><h1>getting started</h1></div><div class="ftue-inner"><div class="title">Welcome to JamKazam! Here are the top things you should do to get the
most out of this service. Be sure to get through all of these for the best experience, but you can spread
them out over multiple visits!</div><div class="row full setup-gear"><div class="column"><h2>SET UP GEAR</h2><div class="blurb"><span><div class="action-button"><a class="button-orange setup-gear-btn" layout-link="account/audio">SET UP GEAR</a></div>Click SET UP GEAR to configure and test your audio gear and network connection.
Once youve completed this step, well drop you into your first session, and you can explore the session
interface.</span></div></div><br clear="both"></div><div class="row"><div class="column"><h2>INVITE YOUR FRIENDS</h2><div class="blurb">Invite others to join JamKazam. Youll be connected as friends, which makes it easier to get into sessions
together. And it will grow our community, which helps us as a young company. Click the icons below to
invite!</div><div class="social-buttons"><a class="facebook-invite" href="#"><img align="absmiddle" height="24" width="24" src="/assets/content/icon_facebook-8bfa4cfb93779f15b518fe382dd5c7cb3752cb3ac818d3cf8e777f0ab64150a0.png"><span>Facebook</span></a><a class="email-invite" href="#"><img align="absmiddle" height="24" width="24" src="/assets/content/icon_gmail-e38b3123e4c986b56707c11ad0e11e1ad14ed8ed9fc8bcc6c395ff21ca660244.png"><span>E-mail</span></a><a class="google-invite" href="#"><img align="absmiddle" height="26" width="26" src="/assets/content/icon_google-de53b44c89f8779e3edf59c054014a809c56a07686712bcd6af3e4e1dcc157d7.png"><span>Google+</span></a></div></div><div class="column get-a-free-jamtrack-section"><h2 class="get-a-free-jamtrack hidden">GET A FREE JAMTRACK</h2><h2 class="browse-jamtracks hidden">CHECK OUT JAMTRACKS</h2><div class="blurb">JamTracks are the best way to play with your favorite music. Unlike traditional backing tracks,&nbsp;they are complete multitrack recordings, with fully isolated tracks for each part.&nbsp;<span class="jamtracks-limited-time hidden">For a limited time, you can get your first JamTrack free.</span>&nbsp;Check it out!</div><div class="action-button"><a class="button-orange browse-jamtrack" href="#" rel="external">LEARN MORE</a></div></div><br clear="both"></div><div class="row find-connect"><div class="column"><h2>CREATE A "REAL" SESSION</h2><div class="blurb">You can create sessions that start immediately and see who joins, or you can schedule sessions, invite friends, and others from the community, and manage RSVPs. Learn how.</div><div class="action-button"><a class="button-orange" href="https://www.youtube.com/watch?v=EZZuGcDUoWk" rel="external">WATCH VIDEO</a></div></div><div class="column"><h2>FIND SESSIONS TO JOIN</h2><div class="blurb">In addition to creating your own sessions, its awesome to join others sessions. Watch this tutorial video
to learn about how to find and select good sessions to join.</div><div class="action-button"><a class="button-orange setup-gear" href="https://www.youtube.com/watch?v=xWponSJo-GU" rel="external">WATCH VIDEO</a></div></div><br clear="both"></div><div class="row full learn-more"><div class="column"><h2>LEARN MORE ABOUT JAMKAZAM</h2><div class="blurb">There is a lot you can do with JamKazam, and more great features available every week. Check the
following link for a list of videos and other resources you can use to take advantage of everything thats
available:<a href="https://www.youtube.com/channel/UC38nc9MMZgExJAd7ca3rkUA" purpose="youtube-tutorials" rel="external">JamKazam Tutorials &amp; Resources</a></div></div><br clear="both"></div><div class="row dialog-buttons"><div class="buttons"><div class="show-getting-started"><input id="show_getting_started" type="checkbox"><span>Don't show this again</span></div><a class="close-btn button-orange" href="#" layout-action="close">CLOSE</a></div></div><br clear="both"></div></div>
<div class="dialog" id="join-test-session-dialog" layout="dialog" layout-id="join-test-session"><div class="content-head"><h1>join test session</h1></div><div class="dialog-inner"><div class="title">VERIFY YOUR SETUP WITH A TEST SESSION</div><div class="hint">You have set up your gear and verified your network, but does it<em>&nbsp;really&nbsp;</em>work?<br><br>The way to find out is by joining a test session.<br><br>This will familiarize you with how sessions work in JamKazam, and if you are lucky, someone else might even join in.</div><div class="buttons"><a class="button-grey" layout-action="cancel">CANCEL</a><a class="button-orange join-test-session">JOIN TEST SESSION</a></div><br></div></div>
<div class="dialog dialog-overlay-sm" id="change-search-location-dialog" layout="dialog" layout-id="change-search-location"><div class="content-head"><h1>change search location</h1></div><div class="dialog-inner"><div class="hint">Specify which location you want to search from.</div><form action="post"><div class="column"><div class="field" purpose="country"><label for="country">Country:</label><select name="country"></select></div><div class="field" purpose="region"><label for="region">State/Province:</label><select disabled="disabled" name="region"></select></div><div class="field" purpose="city"><label for="city">City:</label><select disabled="disabled" name="city"></select></div><a class="reset-location" href="#">Reset to my current location</a></div><br clear="all"></form><div class="buttons"><div class="right"><a class="button-grey btnCancel" layout-action="cancel">CANCEL</a><a class="button-orange btnSave">SAVE</a></div></div></div></div>
<div class="dialog dialog-overlay-sm" id="all-syncs-dialog" layout="dialog" layout-id="all-syncs-dialog"><div class="content-head"><img width="19" height="19" class="content-icon" src="/assets/content/icon_findsession-e6c3267ed0864a134d25109bd4a397cf7152e2e8b7ae83d87ffe96c032a3d4c9.png"><h1>Your Files</h1></div><div class="dialog-inner"><p class="instructions-header">Files that belong to you are shown below. You can see if they are currently on your system, and in the case of Recordings, if they have been uploaded to the server yet.</p><div class="syncs"></div><div class="buttons"><div class="right"><a class="button-grey btnClose" layout-action="close">CLOSE</a></div></div></div></div>
<div class="dialog dialog-overlay-sm" id="adjust-gear-speed-dialog" layout="dialog" layout-id="adjust-gear-speed-dialog"><div class="content-head"><h1>Adjust Gear Speed</h1></div><div class="dialog-inner"><div class="dialog-content"><div class="dialog-column content"><div class="help-text">If you are failing the I/O test on your audio interface, or if your audio sounds bad, try selecting a slower audio processing speed. Your goal is to pass the I/O test and hear good audio, while sacrificing as little speed as possible.</div><div class="basic"><h2 class="settings">Settings:</h2><div class="speed-options"><div class="speed-option setting-slow"><input id="adjust-gear-speed-slow" name="gear-speed" type="radio" value="slow"><label for="adjust-gear-speed-slow">Slow</label></div><div class="speed-option setting-fair"><input id="adjust-gear-speed-fair" name="gear-speed" type="radio" value="fair"><label for="adjust-gear-speed-fair">Moderate</label></div><div class="speed-option setting-fast"><input id="adjust-gear-speed-fast" name="gear-speed" type="radio" value="fast"><label for="adjust-gear-speed-fast">Fast</label></div><div class="speed-text"></div></div></div><div class="advanced"><div class="help-text">If adjusting the settings above still doesn't work, you may try experimenting with the Frame and Buffer settings below to see if you can achieve better results using these controls.</div><h2 class="settings">Advanced Settings:</h2><div class="frame-and-buffers"><div class="framesize"><h2>Frame Size:</h2><select class="select-frame-size"><option val="1">1</option><option val="2">2</option><option val="2.5">2.5</option><option val="5"> 5</option><option val="10"> 10</option></select></div><div class="buffers"><h2>Buffer In/Out<a class="adjust-gear-settings" href="#">?</a></h2><select class="select-buffer-in"><option val="0"> 0</option><option val="1"> 1</option><option val="2"> 2</option><option val="3"> 3</option><option val="4"> 4</option><option val="5"> 5</option><option val="6"> 6</option><option val="7"> 7</option><option val="8"> 8</option><option val="9"> 9</option><option val="10">10</option></select><select class="select-buffer-out"><option val="0"> 0</option><option val="1"> 1</option><option val="2"> 2</option><option val="3"> 3</option><option val="4"> 4</option><option val="5"> 5</option><option val="6"> 6</option><option val="7"> 7</option><option val="8"> 8</option><option val="9"> 9</option><option val="10">10</option></select></div></div><a class="button-orange run-test-btn">RUN TEST</a></div></div><div class="dialog-column"><h2 class="test-results-header">Test &amp; Results</h2><div class="ftue-box results" data-type="adjust-gear-speed">
<div class="left w50 center white scoring-section latency-score-section">
<div class="p5">
<div class="latency">LATENCY</div>
<span class="latency-score"></span>
<div class="spinner-small"></div>
</div>
</div>
<div class="left w50 center white scoring-section io-score-section">
<div class="p5">
<div class="io">I/O</div>
<span class="io-skip-msg">
Not Tested
</span>
<span class="io-countdown">
<span class="secs"></span>
seconds left
<span class="spinner-small"></span>
</span>
<span class="io-rate">Rate=<span class="io-rate-score"></span></span>
<span class="io-var">Var=<span class="io-var-score"></span></span>
</div>
</div>
<div class="clearall">
<ul class="results-text">
<li class="latency-good">Your latency is good.</li>
<li class="latency-acceptable">Your latency is fair.</li>
<li class="latency-bad">Your latency is poor.</li>
<li class="io-rate-good">Your I/O rate is good.</li>
<li class="io-rate-acceptable">Your I/O rate is fair.</li>
<li class="io-rate-bad">Your I/O rate is poor.</li>
<li class="io-var-good">Your I/O variance is good.</li>
<li class="io-var-acceptable">Your I/O variance is fair.</li>
<li class="io-var-bad">Your I/O variance is poor.</li>
<li class="success">You may proceed to the next step.</li>
<li class="failure">
<span class="conditional" data-type="automated">
We're sorry, but your audio gear has failed.
<span class="io-failure">
<a class="adjust-gear-for-io-fail" href="#">Tweak your settings,</a>
watch the video, or click HELP button below.
</span>
<span class="no-io-failure">
Please watch video or click HELP button below.
</span>
</span>
<span class="conditional" data-type="loopback">We're sorry, but your audio gear has failed. Please watch videos on the previous screen.</span>
<span class="conditional" data-type="adjust-gear-speed">We're sorry, but your audio gear has failed. Adjust your settings and try again.</span>
</li>
</ul>
<div class="unknown-text">
<div>We cannot accurately predict the latency of your audio gear. To proceed, you must run an audio loopback test. Click button below to do this.</div>
<div class="loopback-button-holder">
<a class="button-orange loopback-test" href="#">RUN LOOPBACK TEST</a>
</div>
</div>
<div class="loopback-completed">
You have completed the loopback test successfully. Click Next to continue.
</div>
<div class="adjust-gear-speed-completed">
You have adjusted your gear speed settings successfully. Click Next to continue.
</div>
</div>
</div>
</div></div><div class="buttons"><div class="right"><a class="button-grey btnCancel" layout-action="cancel">CANCEL</a><a class="button-orange btnSave">SAVE</a></div></div></div></div>
<div class="dialog openJamTrackDialog-overlay ftue-overlay tall" id="open-jam-track-dialog" layout="dialog" layout-id="open-jam-track-dialog"><div class="content-head"><img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png"><h1>open a jamtrack</h1></div><div class="dialog-inner"><div data-react-class="JamTrackAutoComplete" data-react-props="{&quot;onSearch&quot;:&quot;window.JK.OpenJamTrackDialogInstance.search&quot;,&quot;show_purchased_only&quot;:true}" data-react-cache-id="JamTrackAutoComplete-0"></div><button class="search-btn button-orange">SEARCH</button><div class="recording-wrapper"><table border="0" cellpadding="0" cellspacing="0" class="open-jam-tracks"><thead><tr><th align="left" class="jamtrack-name">NAME</th><th align="left" class="jamtrack-artist">ORIGINAL ARTIST</th><th align="left" class="jamtrack-state">DOWNLOADED<a class="downloaded-jamtrack-help" href="#">?</a></th></tr></thead><tbody></tbody></table></div><br><div class="left paginator-holder"></div><div class="help-links"><a class="what-are-jamtracks" href="#">What are JamTracks?</a><a href="/client#/jamtrack/search" rel="external">Shop for JamTracks</a></div><div class="right"><a class="button-grey" href="#" layout-action="cancel">CANCEL</a></div><br clear="all"></div><script id="template-jam-track-row" type="text/template"><tr data-local-state="{{data.jamTrackState}}" data-recording-id="{{data.jamTrackId}}"><td class="jamtrack-name">{{data.name}}</td><td class="jamtrack-artist">{{data.artist}}</td><td class="jamtrack-state">{{data.downloaded}}</td></tr></script></div>
<div class="dialog openBackingTrackDialog-overlay ftue-overlay tall" id="open-backing-track-dialog" layout="dialog" layout-id="open-backing-track-dialog"><div class="content-head"><img width="19" height="19" class="content-icon" src="/assets/content/icon_add-dc501b5d35eacf9b7238118b1b12b4beb60d34240ff2636346aaff1442a7126c.png"><h1>open an audio file</h1></div><div class="dialog-inner"><div class="recording-wrapper"><table border="0" cellpadding="0" cellspacing="0" class="open-backing-tracks"><thead><tr><th align="left">NAME</th><th align="left">SIZE</th><th align="left">TYPE</th></tr></thead><tbody></tbody></table></div><br><div class="help-links"><a class="display-backingtracks-folder" href="#">Display audio file folder</a><a class="what-are-backingtracks" href="#">What are Backing Tracks? </a></div><div class="right"><a class="button-grey" href="#" layout-action="close">CANCEL</a></div><br clear="all"></div><script id="template-backing-track-row" type="text/template"><tr data-local-state="{{data.backingTrackState}}" data-recording-id="{{data.backingTrackId}}"><td>{{data.name}}</td><td>{{data.length}} </td><td>{{data.type}}</td></tr></script></div>
<div class="dialog dialog-overlay-sm" id="login-required-dialog" layout="dialog" layout-id="login-required-dialog"><div class="content-head"><img width="24" height="24" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png"><h1>Login Required</h1></div><div class="dialog-inner"><p><a href="/signup">Sign Up</a>&nbsp;or&nbsp;<a href="/signin">Sign In</a>&nbsp;to access most functionality on this page.</p><p>However, you can browse for&nbsp;<a class="go-to-jamtracks" href="/client#/jamtrack/search">JamTracks</a>&nbsp;without logging in.</p><br><div class="clearall"></div><div class="buttons"><div class="right"><a class="button-orange btnClose" layout-action="close">CLOSE</a></div></div></div></div>
<div class="dialog dialog-overlay-sm" id="jamtrack-payment-history-dialog" layout="dialog" layout-id="jamtrack-payment-history-dialog"><div class="content-head"><h1>Payment History:</h1></div><div class="dialog-inner"><div class="content-body"><div class="content-body-scroller"><table class="payment-table"><thead><tr><th>DATE</th><th>AMOUNT</th><th>STATUS</th><th>PAYMENT_METHOD</th><th>REFERENCE</th></tr></thead><tbody><tr><td colspan="5">Loading payment history...</td></tr></tbody></table></div></div><div class="jamtrack_buttons"><div class="right"><a class="button-orange btnCancel" layout-action="cancel">OK </a></div></div></div></div>
<div class="dialog dialog-overlay-sm" id="single-player-profile-dialog" layout="dialog" layout-id="single-player-profile-dialog"><div class="content-head"><img width="24" height="24" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png"><h1>Application Notice</h1></div><div class="dialog-inner"><p class="high-latency hidden">Your audio profile has a latency score of&nbsp;<span class="audio-latency"></span><br><br>This is too high to play with others in real-time. However, you can play with JamTracks and backing tracks by yourself in a private session, or go to the gear setup wizard and add a new audio profile with lower latency.</p><p class="has-no-inputs hidden">You are currently using the default system profile, which has no audio inputs.<br><br>With this profile, you can't play with others in real-time. However, you can play with JamTracks and backing tracks by yourself in a private session, or go to the gear setup wizard and add a new audio profile that uses your gear.</p><div class="right action-buttons"><span class="rescanning-notice"><span class="spinner-small"></span>Rescanning...</span><a class="button-grey btn-cancel" href="#" layout-action="cancel">CANCEL</a><a class="button-grey btn-rescan hidden" href="#">RESCAN</a><a class="button-grey btn-gear-setup" href="/client#/account/audio">GO TO GEAR SETUP</a><a class="button-orange btn-private-session" href="#">PRIVATE SESSION</a></div></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="session-master-mix-dialog" layout="dialog" layout-id="session-master-mix-dialog"><div class="content-head"><img height="19" width="19" class="content-icon" src="/assets/shared/icon_session-09f5811cb411fd11c2d89a78b852185141054ac7f15e294b434590c3695bb7ce.png"><h1>session master mix</h1></div><div class="dialog-inner"><p class="notice"> The master mix is the audio mix used for both recordings and live broadcasts of session audio. Changes to the master mix are global, so there is only one master mix for the session. The master mix does not include controls for the metronome because the metronome is not recorded or broadcast. Any user in the session may use the volume and pan controls below to make adjustments to the master mix for everyone in the session.</p><a class="button-orange close-button" layout-action="close">CLOSE</a></div></div>
<div class="dialog dialog-overlay-sm" id="instrument-selector-dialog" layout="dialog" layout-id="instrument-selector-dialog">
<div class="content-head">
<img width="20" height="20" class="content-icon" src="/assets/content/icon_checkmark_circle-9c885ebd3a7a662b3d6bf5a26103a9f471000a2cad59a0ba9446b9e7d0aa77a3.png">
<h1>
select instruments &amp; expertise
</h1>
</div>
<div class="dialog-inner">
<strong>
<div class="instructions"></div>
</strong>
<br clear="all">
<div class="content-body">
<div class="content-body-scroller">
<div class="instrument-selector-container">
<table class="instrument_selector" width="100%" cellpadding="0" cellspacing="6">
<tbody><tr>
<td><input name="accordion" type="checkbox">Accordion</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="acoustic guitar" type="checkbox">Acoustic Guitar</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="bagpipes" type="checkbox">Bagpipes</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="banjo" type="checkbox">Banjo</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="bass guitar" type="checkbox">Bass Guitar</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="bassoon" type="checkbox">Bassoon</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="cello" type="checkbox">Cello</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="charango" type="checkbox">Charango</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="clarinet" type="checkbox">Clarinet</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="computer" type="checkbox">Computer</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="dobro" type="checkbox">Dobro</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="double bass" type="checkbox">Double Bass</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="drums" type="checkbox">Drums</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="electric guitar" type="checkbox">Electric Guitar</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="euphonium" type="checkbox">Euphonium</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="flugelhorn" type="checkbox">Flugelhorn</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="flute" type="checkbox">Flute</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="french horn" type="checkbox">French Horn</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="glockenspiel" type="checkbox">Glockenspiel</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="harmonica" type="checkbox">Harmonica</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="harp" type="checkbox">Harp</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="keyboard" type="checkbox">Keyboard</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="mandolin" type="checkbox">Mandolin</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="oboe" type="checkbox">Oboe</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="orchestra" type="checkbox">Orchestra</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="other" type="checkbox">Other</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="piano" type="checkbox">Piano</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="piccolo" type="checkbox">Piccolo</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="saxophone" type="checkbox">Saxophone</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="sitar" type="checkbox">Sitar</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="steel guitar" type="checkbox">Steel Guitar</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="theremin" type="checkbox">Theremin</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="timpani" type="checkbox">Timpani</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="trombone" type="checkbox">Trombone</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="trumpet" type="checkbox">Trumpet</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="tuba" type="checkbox">Tuba</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="ukulele" type="checkbox">Ukulele</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="viola" type="checkbox">Viola</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="violin" type="checkbox">Violin</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="vocoder" type="checkbox">Vocoder</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<tr>
<td><input name="voice" type="checkbox">Voice</td>
<td align="right" width="50%"><select class="proficiency_selector" <option="" value="1">Beginner<option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
<div class="right action-buttons">
<a class="button-grey btn-cancel-dialog" layout-action="cancel">CANCEL</a>
<a class="button-orange btn-select-instruments">SELECT</a>
</div>
</div>
<div class="dialog dialog-overlay-sm" id="genre-selector-dialog" layout="dialog" layout-id="genre-selector-dialog">
<div class="content-head">
<img width="20" height="20" class="content-icon" src="/assets/content/icon_checkmark_circle-9c885ebd3a7a662b3d6bf5a26103a9f471000a2cad59a0ba9446b9e7d0aa77a3.png">
<h1>
select genre
</h1>
</div>
<div class="dialog-inner">
<strong>
<div class="instructions"></div>
</strong>
<br clear="all">
<div class="content-body">
<div class="content-body-scroller">
<ul class="genres three-column-list-container"></ul>
</div>
</div>
</div>
<div class="right action-buttons">
<a class="button-grey btn-cancel-dialog" layout-action="cancel">CANCEL</a>
<a class="button-orange btn-select-genres">SELECT</a>
</div>
</div>
<div class="dialog dialog-overlay-lg" id="recording-selector-dialog" layout="dialog" layout-id="recording-selector-dialog">
<div class="content-head">
<img width="20" height="20" class="content-icon" src="/assets/content/icon_checkmark_circle-9c885ebd3a7a662b3d6bf5a26103a9f471000a2cad59a0ba9446b9e7d0aa77a3.png">
<h1>
select recordings
</h1>
</div>
<div class="dialog-inner">
<div class="instructions">
Select one or more recordings and click ADD to add JamKazam recordings to your performance samples.
</div>
<div class="recordings" id="recording-selector-dialog-feed-scroller">
<div class="recordings-content" id="recording-selector-dialog-feed-entry-list"></div>
<div class="end-of-list" id="recording-selector-dialog-end-of-feeds-list">No more recordings</div>
<div class="infinite-scroll-loader" id="recording-selector-dialog-loading-feeds" style="padding:5px">Loading ...</div>
</div>
<div class="right action-buttons">
<a class="button-grey btn-cancel-dialog" layout-action="cancel">CANCEL</a>
<a class="button-orange btn-select-recordings">SAVE</a>
</div>
</div>
</div>
<div class="dialog dialog-overlay-sm" id="sound-cloud-player-dialog" layout="dialog" layout-id="sound-cloud-player-dialog"><div class="content-head"><h1>soundcloud recording </h1></div><div class="dialog-inner"><h2 class="caption"></h2><div class="content-body"></div><iframe class="sound-cloud-player" frameborder="no" height="240" scrolling="no" src="" width="100%"></iframe></div><div class="jamtrack_buttons"><div class="center action_buttons"><a class="button-orange btn-close-dialog" href="#" layout-action="close">CLOSE</a></div></div></div>
<div class="dialog" id="deleteVideoConfirmDialog" layout="dialog" layout-id="delete-video-confirm-dialog"><div class="content-head"><img width="24" height="24" class="content-icon" src="/assets/content/icon_alert-121edcda06b605e6c66119514d9a02ca2d2a4afa91a03e7138a82e64d11ff595.png"><h1>Delete video from JamKazam?</h1></div><div class="dialog-inner"><div class="dialog-info">This will delete this video from JamKazam, but not from YouTube. To delete this video from YouTube, you must go to your YouTube account as we cannot do this for you.</div><div class="buttons"><div class="left"><a class="button-grey cancel-btn" layout-action="cancel">CANCEL</a></div><div class="right"><a class="button-orange delete-btn">DELETE</a></div></div><br clear="all"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="configure-live-tracks-dialog" layout="dialog" layout-id="configure-live-tracks-dialog"><div data-react-class="ConfigureLiveTracksDialog" data-react-props="{}" data-react-cache-id="ConfigureLiveTracksDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="configure-outputs-dialog" layout="dialog" layout-id="configure-outputs-dialog"><div data-react-class="ConfigureOutputsDialog" data-react-props="{}" data-react-cache-id="ConfigureOutputsDialog-0"><div><div class="content-head"><img class="content-icon" src="/assets/shared/icon_session.png" height="24" width="24"><h1>session audio outputs</h1></div><div class="dialog-inner"><p>Select two audio output ports that will be used to deliver the stereo audio of your sessions to your headphones or monitor.</p><select class="output-1"><option value="">Select an output port for session audio</option></select><select class="output-2"><option value="">Select an output port for session audio</option></select><div class="actions"><a class="button-grey">CANCEL</a><a class="button-orange">UPDATE PORTS</a></div></div></div></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="manage-vsts-dialog" layout="dialog" layout-id="manage-vsts-dialog"><div data-react-class="ManageVstsDialog" data-react-props="{}" data-react-cache-id="ManageVstsDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="try-test-drive-dialog" layout="dialog" layout-id="try-test-drive"><div data-react-class="TryTestDriveDialog" data-react-props="{}" data-react-cache-id="TryTestDriveDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="upload-avatar-dialog" layout="dialog" layout-id="upload-avatar"><div data-react-class="UploadAvatarDialog" data-react-props="{}" data-react-cache-id="UploadAvatarDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="invite-school-user-dialog" layout="dialog" layout-id="invite-school-user"><div data-react-class="InviteSchoolUserDialog" data-react-props="{}" data-react-cache-id="InviteSchoolUserDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="invite-retailer-user-dialog" layout="dialog" layout-id="invite-retailer-user"><div data-react-class="InviteRetailerUserDialog" data-react-props="{}" data-react-cache-id="InviteRetailerUserDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="chat-dialog" layout="dialog" layout-id="chat-dialog"><div data-react-class="ChatDialog" data-react-props="{}" data-react-cache-id="ChatDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="cancel-lesson-dialog" layout="dialog" layout-id="cancel-lesson-dialog"><div data-react-class="CancelLessonDialog" data-react-props="{}" data-react-cache-id="CancelLessonDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="reschedule-lesson-dialog" layout="dialog" layout-id="reschedule-lesson-dialog"><div data-react-class="RescheduleLessonDialog" data-react-props="{}" data-react-cache-id="RescheduleLessonDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="rate-user-dialog" layout="dialog" layout-id="rate-user-dialog"><div data-react-class="RateUserDialog" data-react-props="{}" data-react-cache-id="RateUserDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="music-notation-upload-dialog" layout="dialog" layout-id="music-notation-upload-dialog"><div data-react-class="MusicNotationUploadDialog" data-react-props="{}" data-react-cache-id="MusicNotationUploadDialog-0"><div class="MusicNotationUploadDialog"><div class="content-head"><img class="content-icon" src="/assets/content/icon_add.png" height="19" width="19"><h1>Uploading Attachment</h1></div><div class="dialog-inner"><div><h3>Your file has been uploaded.</h3></div><div class="actions"><a class="button-orange ">CLOSE</a></div></div></div></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="test-drive-package-dialog" layout="dialog" layout-id="test-drive-package-dialog"><div data-react-class="TestDrivePackageDialog" data-react-props="{}" data-react-cache-id="TestDrivePackageDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="jamblaster-name-dialog" layout="dialog" layout-id="jamblaster-name-dialog"><div data-react-class="JamBlasterNameDialog" data-react-props="{}" data-react-cache-id="JamBlasterNameDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="jamblaster-port-dialog" layout="dialog" layout-id="jamblaster-port-dialog"><div data-react-class="JamBlasterPortDialog" data-react-props="{}" data-react-cache-id="JamBlasterPortDialog-0"></div></div>
<div class="dialog dialog-overlay-sm top-parent" id="jamblaster-pairing-dialog" layout="dialog" layout-id="jamblaster-pairing-dialog"><div data-react-class="JamBlasterPairingDialog" data-react-props="{}" data-react-cache-id="JamBlasterPairingDialog-0"></div></div>
<div id="fb-root"></div>
<script type="text/javascript">
$(function() {
JK = JK || {};
JK.root_url = gon.root_url
// If no trackVolumeObject (when not running in native client)
// create a fake one.
if (!(window.trackVolumeObject)) {
window.trackVolumeObject = {
bIsMediaFile: false,
broadcast: false,
clientID: "",
instrumentID: "",
master: false,
monitor: false,
mute: false,
name: "",
objectName: "",
record: false,
volL: 0,
volR: 0,
wigetID: ""
};
}
var api = JK.Rest()
JK.currentUserId = 'b900991c-69af-4b6d-b9d3-9a75143d74cc';
JK.currentUserAvatarUrl = JK.resolveAvatarUrl('');
JK.currentUserName = 'Person 1';
JK.currentUserMusician = 'true';
JK.currentUserAdmin = false;
JK.currentUserFreeJamTrack = true
// Some things can't be initialized until we're connected. Put them here.
function _initAfterConnect(connected) {
if (this.didInitAfterConnect) return;
this.didInitAfterConnect = true
// This is a helper class with a singleton. No need to instantiate.
JK.GenreSelectorHelper.initialize(JK.app);
JK.getGenreList().done(function(genres) {
JK.genres = genres;
});
var recordingManager = new JK.RecordingManager(JK.app);
var acceptFriendRequestDialog = new JK.AcceptFriendRequestDialog(JK.app);
var header = new JK.Header(JK.app);
JK.Header = header;
header.initialize();
var sidebar = new JK.Sidebar(JK.app);
acceptFriendRequestDialog.initialize(sidebar);
sidebar.initialize(JK.InvitationDialogInstance, JK.TextMessageDialogInstance);
var editRecordingDialog = new JK.EditRecordingDialog(JK.app);
editRecordingDialog.initialize();
var deleteVideoDialog = new JK.DeleteVideoConfirmDialog(JK.app);
deleteVideoDialog.initialize();
var recordingFinishedDialog = new JK.RecordingFinishedDialog(JK.app);
recordingFinishedDialog.initialize();
JK.recordingFinishedDialog = recordingFinishedDialog
var localRecordingsDialog = new JK.LocalRecordingsDialog(JK.app);
localRecordingsDialog.initialize();
var openJamTrackDialog = new JK.OpenJamTrackDialog(JK.app);
JK.OpenJamTrackDialogInstance = openJamTrackDialog;
openJamTrackDialog.initialize();
var openBackingTrackDialog = new JK.OpenBackingTrackDialog(JK.app);
openBackingTrackDialog.initialize();
var configureTracksDialog = new JK.ConfigureTracksDialog(JK.app)
configureTracksDialog.initialize();
var networkTestDialog = new JK.NetworkTestDialog(JK.app);
networkTestDialog.initialize();
var jamtrackAvailabilityDialog = new JK.JamtrackAvailabilityDialog(JK.app);
jamtrackAvailabilityDialog.initialize();
var jamtrackLicenseDialog = new JK.JamtrackLicenseDialog(JK.app);
jamtrackLicenseDialog.initialize();
var jamtrackPaymentHistoryDialog = new JK.JamtrackPaymentHistoryDialog(JK.app);
jamtrackPaymentHistoryDialog.initialize();
var audioProfileInvalidDialog = new JK.AudioProfileInvalidDialog(JK.app);
audioProfileInvalidDialog.initialize();
var clientUpdate = new JK.ClientUpdate(JK.app);
JK.ClientUpdateInstance = clientUpdate;
clientUpdate.initialize();
var homeScreen = new JK.HomeScreen(JK.app);
homeScreen.initialize();
var profileScreen = new JK.ProfileScreen(JK.app);
profileScreen.initialize(JK.TextMessageDialogInstance);
var bandProfileScreen = new JK.BandProfileScreen(JK.app);
bandProfileScreen.initialize();
var accountScreen = new JK.AccountScreen(JK.app);
accountScreen.initialize();
var accountIdentityScreen = new JK.AccountIdentityScreen(JK.app);
accountIdentityScreen.initialize();
var accountSessionsScreen = new JK.AccountSessions(JK.app);
accountSessionsScreen.initialize();
var accountJamTracksScreen = new JK.AccountJamTracks(JK.app);
accountJamTracksScreen.initialize();
var accountSessionDetailScreen = new JK.AccountSessionDetail(JK.app);
accountSessionDetailScreen.initialize(JK.InvitationDialogInstance);
var accountSessionPropertiesScreen = new JK.AccountSessionProperties(JK.app);
accountSessionPropertiesScreen.initialize();
var accountAffiliateScreen = new JK.AccountAffiliateScreen(JK.app);
accountAffiliateScreen.initialize();
var affiliateReportScreen = new JK.AffiliateReportScreen(JK.app);
affiliateReportScreen.initialize();
var accountProfileScreen = new JK.AccountProfileScreen(JK.app);
accountProfileScreen.initialize();
var accountProfileAvatarScreen = new JK.AccountProfileAvatarScreen(JK.app);
accountProfileAvatarScreen.initialize(JK.UserDropdown);
var accountProfileExperience = new JK.AccountProfileExperience(JK.app);
accountProfileExperience.initialize();
var accountProfileInterests = new JK.AccountProfileInterests(JK.app);
accountProfileInterests.initialize();
var accountProfileSamples = new JK.AccountProfileSamples(JK.app, $(".screen.account-profile-samples"), api.getUserProfile, api.updateUser)
accountProfileSamples.initialize();
var accountAudioProfile = new JK.AccountAudioProfile(JK.app);
accountAudioProfile.initialize();
var accountVideoProfile = new JK.AccountVideoProfile(JK.app);
accountVideoProfile.initialize();
//var accountPaymentHistoryScreen = new JK.AccountPaymentHistoryScreen(JK.app);
//accountPaymentHistoryScreen.initialize();
var searchResultScreen = new JK.SearchResultScreen(JK.app);
searchResultScreen.initialize();
var instrumentSelectorInstance = new JK.InstrumentSelector(JK.app);
instrumentSelectorInstance.initialize(false);
var instrumentSelectorRSVPInstance = new JK.InstrumentSelector(JK.app);
instrumentSelectorRSVPInstance.initialize(true);
var createScheduledSessionScreen = new JK.CreateScheduledSession(JK.app);
createScheduledSessionScreen.initialize(
JK.InvitationDialogInstance,
JK.FriendSelectorDialogInstance,
instrumentSelectorInstance,
instrumentSelectorRSVPInstance
);
var bandSetupScreen = new JK.BandSetupScreen(JK.app);
bandSetupScreen.initialize(JK.InvitationDialogInstance, JK.FriendSelectorDialogInstance);
var bandSetupPhotoScreen = new JK.BandSetupPhotoScreen(JK.app);
bandSetupPhotoScreen.initialize();
var feedScreen = new JK.FeedScreen(JK.app);
feedScreen.initialize();
var findSessionScreen = new JK.FindSessionScreen(JK.app);
findSessionScreen.initialize();
// var sessionLatency = null;
// if ("jamClient" in window) {
// sessionLatency = new JK.SessionLatency(window.jamClient);
// }
// findSessionScreen.initialize(sessionLatency);
//var jamtrackScreen = new JK.JamTrackScreen(JK.app);
//jamtrackScreen.initialize();
//var jamtrackLanding = new JK.JamTrackLanding(JK.app);
//jamtrackLanding.initialize();
var shoppingCartScreen = new JK.ShoppingCartScreen(JK.app);
shoppingCartScreen.initialize();
var checkoutSignInScreen = new JK.CheckoutSignInScreen(JK.app);
checkoutSignInScreen.initialize();
var checkoutPaymentScreen = new JK.CheckoutPaymentScreen(JK.app);
checkoutPaymentScreen.initialize();
var checkoutOrderScreen = new JK.CheckoutOrderScreen(JK.app);
checkoutOrderScreen.initialize();
var checkoutCompleteScreen = new JK.CheckoutCompleteScreen(JK.app);
checkoutCompleteScreen.initialize();
var findMusicianScreen = new JK.MusicianSearchFilter();
findMusicianScreen.init(JK.app);
// var findMusicianScreen = new JK.FindMusicianScreen(JK.app);
//findMusicianScreen.initialize(JK.TextMessageDialogInstance);
var findBandScreen = new JK.BandSearchFilter();
findBandScreen.init(JK.app);
var redeemSignUpScreen = new JK.RedeemSignUpScreen(JK.app);
redeemSignUpScreen.initialize();
var redeemCompleteScreen = new JK.RedeemCompleteScreen(JK.app);
redeemCompleteScreen.initialize();
AppActions.appInit.trigger(JK.app)
var addNewGearDialog = new JK.AddNewGearDialog(JK.app);
addNewGearDialog.initialize();
var sessionSettingsDialog = new JK.SessionSettingsDialog(JK.app);
sessionSettingsDialog.initialize();
var adjustGearSpeed = new JK.AdjustGearSpeedDialog(JK.app);
adjustGearSpeed.initialize();
var loopbackWizard = new JK.LoopbackWizard(JK.app);
loopbackWizard.initialize();
var gearWizard = new JK.GearWizard(JK.app);
gearWizard.initialize(loopbackWizard, adjustGearSpeed);
var testBridgeScreen = new JK.TestBridgeScreen(JK.app);
testBridgeScreen.initialize();
var changeSearchLocationDialog = new JK.ChangeSearchLocationDialog(JK.app);
changeSearchLocationDialog.initialize();
var allSyncsDialog = new JK.AllSyncsDialog(JK.app);
allSyncsDialog.initialize();
var singlePlayerProfileGuardDialog = new JK.SinglePlayerProfileGuardDialog(JK.app);
singlePlayerProfileGuardDialog.initialize();
//var sessionMasterMixDialog = new JK.SessionMasterMixDialog(JK.app);
//sessionMasterMixDialog.initialize();
var signinDialog = new JK.SigninDialog(JK.app);
signinDialog.initialize();
JK.SigninPage(); // initialize signin helper
// do a client update early check upon initialization
JK.ClientUpdateInstance.check()
JK.app.initialRouting();
JK.hideCurtain(300);
}
JK.app = JK.JamKazam();
var jamServer = new JK.JamServer(JK.app, function(event_type) {return JK.app.activeElementEvent(event_type)});
jamServer.initialize();
var clientInit = new JK.ClientInit();
clientInit.init();
// latency_tester does not want to be here - redirect it
if(window.jamClient.getOperatingMode && window.jamClient.getOperatingMode() == "server") {
window.location = "/latency_tester";
return;
}
JK.RecordingUtils.init();
JK.app.initialize();
// Let's get things rolling...
if (JK.currentUserId) {
JK.JamServer.registerMessageCallback(JK.MessageType.CLIENT_UPDATE, function(header, payload) {
// do a client update early check upon initialization
JK.ClientUpdateInstance.runCheck(payload.product, payload.version, payload.uri, payload.size)
});
JK.TickDuration('.feed-entry.music-session-history-entry .inprogress .tick-duration');
JK.JamServer.connect() // singleton here defined in JamServer.js
.done(function() {
_initAfterConnect(true);
})
.fail(function() {
_initAfterConnect(false);
});
// this ensures that there is always a CurrentSessionModel, even if it's for a non-active session
JK.CurrentSessionModel = new JK.SessionModel(JK.app, JK.JamServer, window.jamClient, null);
}
else {
_initAfterConnect(false);
}
JK.bindHoverEvents();
})
</script>
<!-- version info: web=0.0.1 lib=0.1.1 pb=0.1.1 -->
<script>
(function(context) {
if(context.jamClient) {
var currentVersion = context.jamClient.ClientUpdateVersion();
if(currentVersion == null || currentVersion.indexOf("Compiled") > -1) {
// don't track dev version of the client
context.ga = function() {}
return;
}
}
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', {'trackingId': 'UA-44184562-2', 'siteSpeedSampleRate': 50, 'cookieDomain': 'jamkazam.com'});
ga('require', 'displayfeatures');
ga('send', 'pageview', {
dimension1: 'Registered User',
dimension2: 'Musician'
});
})(window);
</script>
<script>window.stripeReadyHandler = function() {
Stripe.setPublishableKey(gon.stripe_publishable_key);
}</script>
<!-- begin olark code -->
</body></html>