<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<base href="http://demo.acylo.com/index.php" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Acylo demo</title>
<link href="/templates/rhuk_milkyway/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/plugins/system/cdscriptegrator/libraries/highslide/css/highslide.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_cd_login/tmpl/css/mod_cd_login.css" type="text/css" />
<script type="text/javascript" src="/plugins/system/cdscriptegrator/libraries/highslide/js/highslide-full.min.js"></script>
<script type="text/javascript" src="/plugins/system/cdscriptegrator/libraries/jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/plugins/system/cdscriptegrator/libraries/jquery/js/jquery-noconflict.js"></script>
<script type="text/javascript" src="/plugins/system/cdscriptegrator/libraries/jquery/js/ui/ui.core.js"></script>
<script type="text/javascript">
<!--
var cdhs = hs;
hs.graphicsDir = '/plugins/system/cdscriptegrator/libraries/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
hs.showCredits = false;
hs.expandDuration = 250;
hs.anchor = 'auto';
hs.align = 'center';
hs.transitions = ["expand"];
hs.dimmingOpacity = 0;
hs.lang = {
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
focusTitle : 'Click to bring to front',
fullExpandTitle : 'Expand to actual size',
fullExpandText : 'Full size',
creditsText : 'Powered by Highslide JS',
creditsTitle : 'Go to the Highslide JS homepage',
previousText : 'Previous',
previousTitle : 'Previous (arrow left)',
nextText : 'Next',
nextTitle : 'Next (arrow right)',
moveTitle : 'Move',
moveText : 'Move',
closeText : 'Close',
closeTitle : 'Close (esc)',
resizeTitle : 'Resize',
playText : 'Play',
playTitle : 'Play slideshow (spacebar)',
pauseText : 'Pause',
pauseTitle : 'Pause slideshow (spacebar)',
number : 'Image %1 of %2',
restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.'
};
//-->
hs.Expander.prototype.onAfterExpand = function () {
document.getElementById('modlgn_username').focus();
};
</script>
<script type='text/javascript'>
/*<![CDATA[*/
var jax_live_site = 'http://demo.acylo.com/index.php';
var jax_site_type = '1.5';
/*]]>*/
</script><script type="text/javascript" src="http://demo.acylo.com/plugins/system/pc_includes/ajax_1.3.js"></script>
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/blue.css" type="text/css" />
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/blue_bg.css" type="text/css" />
<!--[if lte IE 6]>
<link href="/templates/rhuk_milkyway/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body id="page_bg" class="color_blue bg_blue width_fmax">
<a name="up" id="up"></a>
<div class="center" align="center">
<div id="wrapper">
<div id="wrapper_r">
<div id="header">
<div id="header_l">
<div id="header_r">
<div id="logo"></div>
<div class="cd_moduletitle_logo"><a href="#"
onclick="return hs.htmlExpand(this, { contentId: 'highslide-html-loginform', wrapperClassName: 'mod_cd_login', outlineType: 'rounded-white', align: 'auto', anchor: 'auto', dimmingOpacity: 0, slideshowGroup: 'mod_cd_login_loginform' } )"
title="Login">Login</a></div>
<div class="highslide-html-content" id="highslide-html-loginform">
<div class="highslide-html-content-header">
<div class="highslide-move"
title="Move"><a href="#"
onclick="return hs.close(this)" class="control"
title="Close">Close</a>
</div>
</div>
<div class="highslide-body">
<form action="/index.php?"
method="post" name="cd_login_form_login" id="cd_login_form_login">
<fieldset class="input">
<div>
<p id="form-login-username"><label for="modlgn_username">Username</label><br />
<input id="modlgn_username" type="text" name="username" class="inputbox"
title="Username"
alt="username" size="18" /></p>
<p id="form-login-password"><label for="modlgn_passwd">Password</label><br />
<input id="modlgn_passwd" type="password" name="passwd" class="inputbox"
size="18"
title="Password"
alt="password" /></p>
<p id="form-login-remember"><input id="modlgn_remember" type="checkbox"
name="remember" class="inputbox" value="yes"
title="Remember Me"
alt="Remember Me" /> <label
for="modlgn_remember">Remember Me</label></p>
<p id="form-login-submit"><input type="submit"
name="Submit" id="cd_login_loginbutton"
title="Login"
value="" /></p>
</div>
</fieldset>
<ul>
<li><a href="/lost-password.html"
title="Forgot your password?"> Forgot your password?</a>
</li>
<li><a href="/lost-user-name.html"
title="Forgot your username?"> Forgot your username?</a>
</li>
<li><a href="/index.php?option=com_user&lang=en&view=register"
title="Create an account"> Create an account</a>
</li>
</ul>
<input type="hidden" name="option" value="com_user" /> <input
type="hidden" name="task" value="login" /> <input type="hidden"
name="return" value="L2luZGV4LnBocD9vcHRpb249Y29tX2F5bm90ZXMmdmlldz1ub3RlcyZ1c2VyaWQ9NjMmSXRlbWlkPTE2" /> <input type="hidden" name="fce6bd0dd4b0d568c1a23b45552d75a9" value="1" /></form>
</div>
</div>
<br>Username: demo<br>
Password: demo
</div>
</div>
</div>
<div id="tabarea">
<div id="tabarea_l">
<div id="tabarea_r">
<div id="tabmenu">
<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_l"> </td>
<td class="pill_m">
<div id="pillmenu">
<ul class="menu"><li class="item16"><a href="/index.php?option=com_aynotes&view=notes&userid=63&Itemid=16"><span>AyNotes || beta</span></a></li><li class="item17"><a href="/index.php?option=com_aysortandvote&view=polls&Itemid=17"><span>Sort & Vote || beta</span></a></li><li class="item3"><a href="http://demo.acylo.com/"><span>Music</span></a></li><li class="item5"><a href="/music/playlists.html"><span>Playlists</span></a></li><li class="item9"><a href="/community.html"><span>Community</span></a></li><li class="item12"><a href="/music/artists.html"><span>Artists</span></a></li><li class="item14"><a href="/music/genres.html"><span>Genres</span></a></li><li class="item18"><a href="/music/in-the-dark.html"><span>In the dark</span></a></li></ul>
</div>
</td>
<td class="pill_r"> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="search">
</div>
<div id="pathway">
</div>
<div class="clr"></div>
<div id="whitebox">
<div id="whitebox_t">
<div id="whitebox_tl">
<div id="whitebox_tr"></div>
</div>
</div>
<div id="whitebox_m">
<div id="area">
<div id="leftcolumn">
</div>
<div id="maincolumn_full">
<table class="nopad">
<tr valign="top">
<td>
<link rel="stylesheet" href="http://demo.acylo.com/components/com_aynotes/css/main.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://demo.acylo.com/components/com_aynotes/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="http://demo.acylo.com/components/com_aynotes/js/jquery.tipsy.js"></script>
<input type="hidden" name="userid" class="userid" id="userid" value="63">
<input type="hidden" name="user_id" class="user_id" id="user_id" value="0">
<script type="text/javascript">
$(document).ready(function(){
$(".add_note").colorbox({width:"680px", height:"400px", inline:true, href:"#add_note_box"});
$(".notloggedin").colorbox({width:"400px", height:"150px", inline:true, href:"#notloggedin_box"});
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
});
$(function() {
$('#yellow_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#blue_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#green_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#violet_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#pink_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#orange_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#peru_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#wheat_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#thistle_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
$('#silver_aynotes').tipsy({gravity: 'sw', fade: true, html: true});
});
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var tmp;
$('.note_aynotes').each(function(){
/* Finding the biggest z-index value of the notes */
tmp = $(this).css('z-index');
if(tmp>zIndex) zIndex = tmp;
})
/* A helper function for converting a set of elements to draggables: */
make_draggable($('.note_aynotes'));
/* Listening for keyup events on fields of the "Add a note" form: */
$('.pr-body_aynotes').live('keyup',function(e){
if(!this.preview)
this.preview=$('.note1_aynotes');
/* character count */
var box=$(this).val();
var main = box.length *100;
var value= (main / 200);
var count= 200 - box.length;
if(box.length <= 200)
{
$('#count_aynotes').html(count);
}
else
{
// do nothing
}
/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));
});
/* Changing the color of the preview note: */
$('.color_aynotes').live('click',function(){
$('.note1_aynotes').removeClass('yellow_aynotes green_aynotes blue_aynotes violet_aynotes pink_aynotes orange_aynotes peru_aynotes wheat_aynotes thistle_aynotes silver_aynotes').addClass($(this).attr('class').replace('color_aynotes',''));
});
/* The submit button: */
$('#note-submit_aynotes').live('click',function(e){
if($('.pr-body_aynotes').val().length<4)
{
alert("The note text is too short!")
return false;
}
$(this).replaceWith('<img src="http://demo.acylo.com//components/com_aynotes/images/ajax_load.gif" style="margin:30px auto;display:block" />');
var data = {
'zindex' : ++zIndex,
'body' : $('.pr-body_aynotes').val(),
'userid' : $('.userid').val(),
'user_id' : $('.user_id').val(),
'color' : $.trim($('.note1_aynotes').attr('class').replace('note1_aynotes',''))
};
/* Sending an AJAX POST request: */
$.post('http://demo.acylo.com//index.php?option=com_aynotes&view=notes&format=raw',data,function(msg){
if(parseInt(msg))
{
/* msg contains the ID of the note, assigned by MySQL's auto increment: */
var tmp = $('.note1_aynotes').clone();
tmp.find('span.data_aynotes').text(msg).end().css({'z-index':zIndex,top:0,left:0});
tmp.appendTo($('#main_aynotes'));
make_draggable(tmp)
}
$("#addButton_aynotes").colorbox.close();
});
e.preventDefault();
})
$('.note-form_aynotes').live('submit',function(e){e.preventDefault();});
});
var zIndex = 0;
function make_draggable(elements)
{
/* Elements is a jquery object: */
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
});
}
</script>
<div id="info_aynotes">
<a href="/bogdan/" id="small_button_aynotes">bogdan`s profile</a>
<a id="small_button_aynotes" style="cursor:pointer" onclick="return false;" class="notloggedin">Add a note</a>
</div>
<div id="main_aynotes">
<div class="note_aynotes green_aynotes" id="note_aynotes10" style="left:292px;top:237px;z-index:9">
hey <img src="http://demo.acylo.com/components/com_aynotes/images/emoticons/1.gif" alt="happy" />\ni am demo from turkey <img src="http://demo.acylo.com/components/com_aynotes/images/emoticons/3.gif" alt="winking" />
<div class="author_aynotes"><a href=index.php?option=com_aynotes&view=notes&userid=64>demo</a></div>
<div class="added_aynotes">one week ago</div>
<span class="data_aynotes">10</span>
</div>
<div class="note_aynotes blue_aynotes" id="note_aynotes6" style="left:609px;top:176px;z-index:7">
Blue note
<div class="author_aynotes">bogdan</div>
<div class="added_aynotes">2 weeks ago</div>
<span class="data_aynotes">6</span>
</div>
<div class="note_aynotes violet_aynotes" id="note_aynotes5" style="left:368px;top:5px;z-index:10">
Hello World!
<div class="author_aynotes">bogdan</div>
<div class="added_aynotes">2 weeks ago</div>
<span class="data_aynotes">5</span>
</div>
</div>
<!-- This contains the hidden content for add a new note box-->
<div style='display:none'>
<div id='add_note_box' style='padding:10px; background:#fff;'>
<h3 class="popupTitle_aynotes">Add a new note</h3>
<!-- The preview: -->
<div id="previewNote_aynotes" class="note1_aynotes yellow_aynotes" style="left:0;top:65px;z-index:1">
<div class="body_aynotes"></div>
<div class="author_aynotes"></div>
<div class="added_aynotes">just now</div>
<span class="data_aynotes"></span>
</div>
<div id="noteData_aynotes"> <!-- Holds the form -->
<form action="" method="post" class="note-form_aynotes">
<label for="note-body_aynotes">Text of the note</label>
<textarea name="note-body_aynotes" id="note-body_aynotes" class="pr-body_aynotes" cols="50" rows="5" maxlength="200"></textarea>
<div id="count_aynotes">250</div>
<label>Color</label> <!-- Clicking one of the divs changes the color of the preview -->
<div class="color_aynotes yellow_aynotes" id='yellow_aynotes' title='<strong>Yellow</strong>'></div>
<div class="color_aynotes blue_aynotes" id='blue_aynotes' title='<strong>Blue</strong>'></div>
<div class="color_aynotes green_aynotes" id='green_aynotes' title='<strong>Green</strong>'></div>
<div class="color_aynotes violet_aynotes" id='violet_aynotes' title='<strong>Violet</strong>'></div>
<div class="color_aynotes pink_aynotes" id='pink_aynotes' title='<strong>Pink</strong>'></div>
<div class="color_aynotes orange_aynotes" id='orange_aynotes' title='<strong>Orange</strong>'></div>
<div class="color_aynotes peru_aynotes" id='peru_aynotes' title='<strong>Peru</strong>'></div>
<div class="color_aynotes wheat_aynotes" id='wheat_aynotes' title='<strong>Wheat</strong>'></div>
<div class="color_aynotes thistle_aynotes" id='thistle_aynotes' title='<strong>Thistle</strong>'></div>
<div class="color_aynotes silver_aynotes" id='silver_aynotes' title='<strong>Silver</strong>'></div>
<!-- The green submit button: -->
<a id="note-submit_aynotes" style="cursor:pointer;" class="green-button">Submit</a>
</form>
</div>
</div>
</div>
<!-- This contains the hidden content for add a new note box-->
<div style='display:none'>
<div id='notloggedin_box' style='padding:10px; background:#fff;'>
<h3 class="popupTitle">Login to add notes</h3>
</div>
</div>
<script type="text/javascript" src="http://benalman.com/code/projects/javascript-emotify/ba-emotify.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
var smilies = { /*
smiley image_url title_text alt_smilies */
":)": [ "1.gif", "happy", ],
":(": [ "2.gif", "sad", ],
";)": [ "3.gif", "winking", ],
":D": [ "4.gif", "big grin", ],
";;)": [ "5.gif", "batting eyelashes" ],
">:D<": [ "6.gif", "big hug" ],
":-/": [ "7.gif", "confused", ],
":x": [ "8.gif", "love struck", ],
":\">": [ "9.gif", "blushing" ],
":P": [ "10.gif", "tongue", ],
":-*": [ "11.gif", "kiss", ],
"=((": [ "12.gif", "broken heart" ],
":-O": [ "13.gif", "surprise", ],
"X(": [ "14.gif", "angry" ],
":>": [ "15.gif", "smug" ],
"B-)": [ "16.gif", "cool" ],
":-S": [ "17.gif", "worried" ],
"#:-S": [ "18.gif", "whew!", ],
">:)": [ "19.gif", "devil", ],
":((": [ "20.gif", "crying", ],
":))": [ "21.gif", "laughing", ],
":|": [ "22.gif", "straight face", ],
"/:)": [ "23.gif", "raised eyebrow", ],
"=))": [ "24.gif", "rolling on the floor" ],
"O:-)": [ "25.gif", "angel", ],
":-B": [ "26.gif", "nerd" ],
"=;": [ "27.gif", "talk to the hand" ],
"I-)": [ "28.gif", "sleepy" ],
"8-|": [ "29.gif", "rolling eyes" ],
"L-)": [ "30.gif", "loser" ],
":-&": [ "31.gif", "sick" ],
":-$": [ "32.gif", "don't tell anyone" ],
"[-(": [ "33.gif", "not talking" ],
":O)": [ "34.gif", "clown" ],
"8-}": [ "35.gif", "silly" ],
"<:-P": [ "36.gif", "party", ],
"(:|": [ "37.gif", "yawn" ],
"=P~": [ "38.gif", "drooling" ],
":-?": [ "39.gif", "thinking" ],
"#-o": [ "40.gif", "d'oh", ],
"=D>": [ "41.gif", "applause" ],
":-SS": [ "42.gif", "nailbiting", ],
"@-)": [ "43.gif", "hypnotized" ],
":^o": [ "44.gif", "liar" ],
":-w": [ "45.gif", "waiting", ],
":-<": [ "46.gif", "sigh" ],
">:P": [ "47.gif", "phbbbbt", ],
"<):)": [ "48.gif", "cowboy" ],
":@)": [ "49.gif", "pig" ],
"3:-O": [ "50.gif", "cow", ],
":(|)": [ "51.gif", "monkey" ],
"~:>": [ "52.gif", "chicken" ],
"@};-": [ "53.gif", "rose" ],
"%%-": [ "54.gif", "good luck" ],
"**==": [ "55.gif", "flag" ],
"(~~)": [ "56.gif", "pumpkin" ],
"~O)": [ "57.gif", "coffee" ],
"*-:)": [ "58.gif", "idea" ],
"8-X": [ "59.gif", "skull" ],
"=:)": [ "60.gif", "bug" ],
">-)": [ "61.gif", "alien" ],
":-L": [ "62.gif", "frustrated", ],
"[-O<": [ "63.gif", "praying" ],
"$-)": [ "64.gif", "money eyes" ],
":-\"": [ "65.gif", "whistling" ],
"b-(": [ "66.gif", "feeling beat up" ],
":)>-": [ "67.gif", "peace sign" ],
"[-X": [ "68.gif", "shame on you" ],
"\\:D/": [ "69.gif", "dancing" ],
">:/": [ "70.gif", "bring it on" ],
";))": [ "71.gif", "hee hee" ],
"o->": [ "72.gif", "hiro" ],
"o=>": [ "73.gif", "billy" ],
"o-+": [ "74.gif", "april" ],
"(%)": [ "75.gif", "yin yang" ],
":-@": [ "76.gif", "chatterbox" ],
"^:)^": [ "77.gif", "not worthy" ],
":-j": [ "78.gif", "oh go on" ],
"(*)": [ "79.gif", "star" ],
":)]": [ "100.gif", "on the phone" ],
":-c": [ "101.gif", "call me" ],
"~X(": [ "102.gif", "at wits' end" ],
":-h": [ "103.gif", "wave" ],
":-t": [ "104.gif", "time out" ],
"8->": [ "105.gif", "daydreaming" ],
":-??": [ "106.gif", "I don't know" ],
"%-(": [ "107.gif", "not listening" ],
":o3": [ "108.gif", "puppy dog eyes" ],
"X_X": [ "109.gif", "I don't want to see", ],
":!!": [ "110.gif", "hurry up!" ],
"\\m/": [ "111.gif", "rock on!" ],
":-q": [ "112.gif", "thumbs down" ],
":-bd": [ "113.gif", "thumbs up" ],
"^#(^": [ "114.gif", "it wasn't me" ],
":bz": [ "115.gif", "bee" ],
":ar!": [ "pirate.gif", "pirate" ],
"[..]": [ "transformer.gif", "transformer" ]
};
// Add the above smilies, setting the appropirate base_url.
emotify.emoticons( 'http://demo.acylo.com/components/com_aynotes/images/emoticons/', smilies );
// When the textarea changes, update the output!
$('#note-body_aynotes').keyup(function(){
var text = $(this).val(),
HTML = emotify( text );
$('#previewNote_aynotes').html( HTML.replace( /\n/g, "<br/>" ) );
}).keyup();
});
</script>
<style type="text/css" title="text/css">
img.smiley {
vertical-align: -20%;
}
</style>
</td>
</tr>
</table>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div id="whitebox_b">
<div id="whitebox_bl">
<div id="whitebox_br"></div>
</div>
</div>
</div>
<div id="footerspacer"></div>
</div>
<div id="footer">
<div id="footer_l">
<div id="footer_r">
<p id="syndicate">
</p>
<p id="power_by">
Powered by <a href="http://www.joomla.org">Joomla!</a>.
valid <a href="http://validator.w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>