<!doctype html>
<html>
	<head>
		<title>jsPlumb 1.5.2 - draggable connectors experiments - YUI3</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" href="../demo-all.css">
		<link rel="stylesheet" href="demo.css">
	</head>
	<body data-demo-id="draggableConnectors" data-library="yui">

		<div id="headerWrapper">
			<div id="header">
				<div class="menu">   
					<a href="../../doc/">DOCS</a>
					<a href="../../apidocs">API</a>
					<a href="../../tests/all-tests.html">TESTS</a>
					<a href="mailto:hello@jsplumbtoolkit.com">CONTACT</a>
					<a href="http://github.com/sporritt/jsplumb/">GITHUB</a>
					<a href="https://groups.google.com/forum/?fromgroups#!forum/jsplumb">DISCUSS</a>
					<a href="https://github.com/sporritt/jsPlumb/issues">ISSUES</a>
				</div>
			</div>
		</div>
		
        <div id="main">
			<div id="render"></div>
			<div class="window" id="window1">one<br/><br/><a href="#" class="cmdLink hide" rel="window1">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window1">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window1">detach all</a></div>
			<div class="window" id="window2">two<br/><br/><a href="#" class="cmdLink hide" rel="window2">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window2">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window2">detach all</a></div>
			<div class="window" id="window3">three<br/><br/><a href="#" class="cmdLink hide" rel="window3">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window3">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window3">detach all</a></div>
			<div class="window" id="window4">four<br/><br/><a href="#" class="cmdLink hide" rel="window4">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window4">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window4">detach all</a></div>			
			<div id="list"></div>
			<iframe id="like" src="http://www.facebook.com/widgets/like.php?href=http://jsplumb.com&amp;layout=box_count"></iframe>
		</div>
		<div id="sidebar">
            <div id="explanation">                
            	<h4>DRAG &amp; DROP</h4>
				<p>Drag from any Endpoint to similar Endpoints on other elements to create Connections.</p>
				<p>Blue Endpoints use a <strong>beforeDrop</strong> interceptor.  This enables
				you to intercept a new connection and decide whether or not you wish to allow it to proceed. They are also configured to automatically reattach if you drag a Connection off and drop it on the background.</p>
				<p>Yellow Endpoints are configured to use a <strong>beforeDetach</strong> interceptor, which provides a way to programmatically override a Connection detach. Yellow connections are painted with the Straight connector</p>			
				<p>Green Endpoints support up to three Connections. Once a green Endpoint has three connections, when you drag from it you will drag the oldest connection made on the Endpoint.</p>
				<a id="clear" class="cmd" href="#">clear plumbing</a>	   
				<p>This demo uses jsPlumb 1.5.2 and YUI 3.3.0.</p>
            </div>			
        </div>	   
	    	
		<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
	    
	    <script type='text/javascript' src='../js/yui.jsPlumb-1.5.2-min.js'></script>
		
		<!--  demo code -->		
		<script type="text/javascript" src="demo-yui.js"></script>
		
		<!--  demo list and helper code. you don't need this stuff if you're just copying the single demo. -->
		<script src="../demo-list.js"></script>
		<script src="../demo-helper-yui.js"></script>
		
	</body>
</html>
