<html>
<head>
<style>
.annotated
{
position:relative;
}
.annotated img
{
display:block;
}
.annotated a
{
text-decoration: none;
color: inherit;
}
</style>
<link rel='stylesheet' href='../share/static/css/ngcp-annotate.css'>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="../share/static/js/libs/ngcp-annotate.js"></script>
<script>
$(function() {
dialog = $("#subselect").dialog({
autoOpen: false,
height: 400,
width: 500,
modal: true,
buttons: {
"Cancel": function() {
dialog.dialog("close");
},
"Assign": function() {
dialog.dialog("close");
}
},
close: function() {
}
});
$("div.annotated").each(function(){
$(this).find("div.caption").annotate(this).click(function(event) {
event.preventDefault();
dialog.dialog("open");
});
});
});
</script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<h1>Line Selection</h1>
<div class="annotated">
<img src="spa504g-front.jpg" alt="Cisco SPA504g" />
<div class="caption assigned" style="top:76px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-user fa-fw"></i> anne.miller@example.org (107)</a></div>
<div class="caption assigned" style="top:93px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-rss fa-fw"></i> john.doe@example.org (243)</a></div>
<div class="caption assigned" style="top:109px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-users fa-fw"></i> sales@example.org (100)</a></div>
<div class="caption unassigned" style="top:127px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></div>
</div>
<div id="subselect" title="Assign Subscriber">
<h3>Subscriber</h3>
<select>
<option value="1">aaa@example.org</option>
<option value="2">bbb@example.org</option>
<option value="3">ccc@example.org</option>
<option value="4">ddd@example.org</option>
</select>
<h3>Line Type</h3>
<select>
<option value="private">private</option>
<option value="shared">shared</option>
<option value="blf">blf</option>
<option value="speeddial">speeddial</option>
<option value="forward">forward</option>
<option value="transfer">transfer</option>
</select>
</div>
</body>
</html>
<!-- vim: set tabstop=4 syntax=html expandtab: -->