JavaScript - Jingle To Play Once Per Visit Only.

Hi! First post here!

Would really appreciate some help on a javascript that would display the time elapsed since a particular visitor last visited my webpage, using cookies.

So basically it should show something like: "You last visited my page 2 days & 12 mins ago!"

I've a little background in java but none in javascript...

Thanks so much!

<script type='text/javascript'>
$(window).load(function () {
$('area').each(function (e) {
var area = $(this),
alt = area.attr('id');
if (alt != null) {
area.mouseenter(function () {
var newImage = $('<img />');
newImage.attr('src', 'ReadImage.ashx?id=' + alt); // call handler with id
$('.display').append(newImage);

};
}
e.preventDefault();
});
});
</script>
<div class="display">
</div>
<img src="3rd_Floor_screen-size.jpg" width="1372" height="906" border="0" alt="" usemap="#Map" /></div>

<map name="Map" id="Map">
<area id="1" alt="1" class="tooltip" shape="rect" coords="28, 87, 93, 181" href="#"/>
<area id="2" alt="2" class="tooltip" shape="rect" coords="95, 91, 172, 158" href="#"/>
<area id="3" alt="3" class="tooltip" shape="rect" coords="175, 90, 225, 157" href="#"/>
</map>


I am gettting image on mouseover, if i over the mouse on area id =1.
That id 1 will be passed to the ashx page through the script.
The ashx page returns my image from the database.
I am loading that image in the div display.

Now what i need is i have to display the image as a tooltip not in a div........


For example: Visit this following website.
http://visitmix.com/labs/glimmer/samples/tooltip.html

Can anybody suggest me a solution to do this?
I know there is an easy way to do this...... i have brought 60 percent. Now what i need is i have to get this image as a tooltip when i move the mouse over the area id =1..

Thanks

Hi everyone.

New to javascript here....

I have a problem here. I know how to store a cookie and check a cookie... but i don't know how to calculate the time between current visit and previous visit...

Example.

I logged in @ 1pm and logged in again @ 3pm... It should a msg like "your last visit was 2 hours ago"

Can any one enlighten me ? Thank you!

Can a random page be loaded without a prior visit to a site?

I have a list of 15 people with a photo and contact information in a table with 3 columns and 5 rows. The issue is that the people near the bottom want a chance to be at the top the first time the page is viewed. It is unlikely that a second visit would happen.
Is this possible to load a random page for a site without it being viewed or logged into before, therefore no cookies will be used.

My knowledge of Java script code is limited so any help would be great.

Thanks

Motty

I can't seem to play MP3s with jPlayer, only OGG.
Any ideas? My custom code is below:

Code:

<script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){

    Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        jQuery.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        jQuery(this.cssSelector.jPlayer).jPlayer(this.options);

        jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            jQuery(this).blur();
            return false;
        });

        jQuery(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            jQuery(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            jQuery(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Create links to free media
                if(this.playlist[i].free) {
                    var first = true;
                    listItem += "<div class='jp-free-media'>(";
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            if(first) {
                                first = false;
                            } else {
                                listItem += " | ";
                            }
                            listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                        }
                    });
                    listItem += ")</span>";
                }

                listItem += "</li>";

                // Associate playlist items with their media
                jQuery(this.cssSelector.playlist + " ul").append(listItem);
                jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = jQuery(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        jQuery(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $(this).blur();
                    return false;
                });

                // Disable free media links to force access via right click
                if(this.playlist[i].free) {
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                var index = $(this).data("index");
                                jQuery(self.cssSelector.playlist + "_item_" + index).click();
                                jQuery(this).blur();
                                return false;
                            });
                        }
                    });
                }
            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            jQuery(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index);
        },
        supplied: "mp3",
        addMedia: function(media){
            this.playlist.push(media);
            this.playlistNext();
        }
    };

});

var last_el='';
jQuery('.track .wrap .play').click(function(){
    var cur_img = jQuery(this).css('backgroundImage');
    if(cur_img.substring(cur_img.length-10)=='play.png")'){
        if(last_el!=''){
            last_el.css('background-image','url("img/play.png")');
        }
        var el = jQuery(this);
        last_el = el;
        parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
        el.css('background-image','url("img/pause.png")');
    }else{
        parent.frames[1].pauseSong();
    }
});
jQuery('.jp-interface .jp-pause').click(function(){
    last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
    var el = jQuery(this);
    var href = el.attr('href');
    if(href.substring(0,1)=='/'){
        parent.location.href = parent.location.href + href.substring(1,href.length);
    }    
});

//]]>
</script>

hey there, i am making a slideshow site, a user can add effects to pictures using a drop down menu and choose a sound to accompany picture when the slideshow runs.

i have hit a snag, my function is taking in the choice from the user for both sounds, but playing them over one another, i think its something silly im missing out. here is the function where i think im going wrong:

Code:

function EvalSound()
	{
    var sound1 = document.getElementById("sound1");
		var choice = sound1.options[sound1.selectedIndex].value; 
		 var sound2 = document.getElementById("sound2");
		var choice2 = sound2.options[sound2.selectedIndex].value;
		var pic1 =   document.getElementById("first_pic");
		var pic2 =   document.getElementById("second_pic");
	
		soundManager.play(choice);
    soundManager.play(choice2);
	}

Thanks for any help

I have an HTML document with an <embed> tag in order to play a video.

<code>
<embed src="someMovie.mpeg" autostart="false"</embed>
</code>

I want to be able to click on an image that is also in the document, and play the video that is associated with that image with an onclick action. In other words I want to load a different video than "someMovie.mpeg".

I tried simply setting the src and autostart attributes of the embed tag to the new movie and true, but this does not play the new video.

Is there a way I can do this?

I have a self project I am exploring. I would like to play a simple sound file each time a function is run. The function runs every second, so, basically, I am just trying to get an audible click sound file to run every time the function runs. I do not know how to play a sound file thru javascript. Any ideas?

Here is the code file thus far...

Code:

<html>

<head>

   <title>Timer</title>
   <link href="timer.css" rel="stylesheet" type="text/css" />
   <embed src="click.wav" autostart=false hidden=true name="sound1" enablejavascript="true">
   <script type="text/javascript">
       var seconds = 0;
       var clockId;
       var running = false;

       function runClock() { 
           seconds++;
           document.timer.timerClock.value = seconds; 
       }

       function startClock() {
           if (!running) {
           clockId = setInterval('runClock()',1000);
           running = true;
           }
       }

       function stopClock() {
            if (running) {
           clearInterval(clockId); 
           running = false;   
           }       
       }
       
       function resetClock() {
           document.timer.timerClock.value = 0;
           seconds = 0;
       }
   </script>
</head>
<body>
<form id="timer" name="timer" action="">
<div id="header">  
   <p>
   <span>Timer<br />   
   </p>
</div>
<div id="intro">
   <p>Click to begin timer</p>
   <p id="buttons">
      <input onclick="startClock()" type="button" value="Begin Seconds Counter" />
      <br />
      <input name="timerClock" id="timerClock" value="0" />      
      <br />
      <input onclick="stopClock()" type="button" value="Stop Timer" />
      <br />
      <input onclick="resetClock()" type="button" value="Reset Timer" />
   </p>
</div>
</form>
</body>
</html>

Hello Friends,
I have an <img> Tab to play a video(of type .wmv). The image tag is as follows:
<img border="0" dynsrc="Test1.wmv" start="fileopen" loop="1" width=1081 height=838>

Everything works fine, but now I need to play a video list (up to 5 videos). As soon as one video stops another video should start playing (at the same position automatically, without any user input) and as soon as the last video is stopped, it should start the first video again. So it will be like a loop.

How can I achieve the above requirement?

Thanks.

Been given a task to edit a simple javascript slide show to have form buttons

This what i have so far.. I have the next and back buttons working but i have no idea where to begin with play and stop. It should basically repeatedtly cycle.

Quote:
<script type="text/javascript">

var hol_pics = new Array(); // Create Array Object
for (var i=0;i<9;i=i+1) {
hol_pics[i]=new Image(); // Make 0 -> 8 array elements into Image Objects
hol_pics[i].src="harbour"+i+".jpg"; // Preload Images
}

i=0; // 'Remember' original image displayed by img tag
function next_photo() {
i=i+1;
if(i>8) i=0; // Increment image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i+1)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}

function back_photo() {
i=i-1;
if(i<0) i=8; // Decrement image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i-1+9)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}


//]]>
</script>
</head>

<body>
<h1>Basic Slide Show</h1>
<p>

<img src="harbour0.jpg" width="324" height="432" alt=></a>

<form action="">
<input type="button" value="Previous" name="button" onclick="back_photo()" />
<input type="button" value="Next" name="button" onclick="next_photo()" />
</form>

Just so you know: this is not my idea, the person whose site this is wants a short blip sound played whenever you roll over the links in the sidebar. I know it's not advised, but she insists.

So can anybody tell me how this is done? I've tried implementing a few scripts but no luck in Firefox or Chrome.

Thanks.

Please help, I have a page with 3 images. I want my visitors to hear an mp3 audio once they hover their mouse on each image.
image1 = audio1.mp3
image2 = audio2.mp3
image3 = audio3.mp3

But here are the challenges.
1- I want the audio files to play on the same page where the images are, without opening a new page.
2- I don't want the users to be asked to accept any kind of plugins (such as Windows Media Player). Which means everything needed to run the script should already exist on that page.
3- I want it to be played on the 3 major browsers (IE, Firefox, Chrome)

Is this possible? I'm not good at Javascript, but I will understand to do my best to understand your instructions.

I spent a long time looking online, but most of what I found is only compatible in one browser or the other. Any help would be appreciated.

Hi, I'm having a problem with 2 scripts in the same page. One's a rollover function and the other is for a dynamic image gallery. Either one separately works fine, but when together, the rollover is preventing the gallery from functioning. My javascript skills are limited. Any help is appreciated.

Page can be seen he test site

Code for page:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Script-Content-Type" content="text/javascript" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height: 100%;
	font-family: Arial, sans-serif;
	background: url(images/bg.gif) #FFF;
}
* {
	margin: 0;
	padding: 0;
}
#wrapper {
	width:950px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
	background:#fff;
	border-left:1px solid #036;
	border-right:1px solid #036;
}
#footer, #push {
	clear:both;
	width:950px;
	height: 30px;
	margin:0 auto;
	background:#036;
	font-size:11px;
	text-align:center;
	color:#FFF;
}
#push {
	background:none;
}
/*  Navigation  */
#nav ul, #nav li {
	display:inline;
	list-style-type:none;
}
#nav li {
	height:55px;
	width:119px;
	background:url(button.jpg);
	display:block;
}
#nav a {
	height:32px;
	width:119px;
	display:block;
	text-decoration:none;
	background:url(button.jpg);
}
#nav a:hover {
	background:url(button.jpg);
	background-position:0px 55px;
}
#nav span {
	display:block;
	padding-top:10px;
	color:#000;
	font-weight:bold;
	text-align:center;
}
/*  Picture Gallery  */
#right {
	width:400px;
	height:100%;
	position: absolute;
	top: 0px;
	left:500px;
}
#filler {
	background:url(fish9.jpg) top center no-repeat;
	border-bottom:1px solid #333;
	display:inline;
	width:400px;
	height:300px;
	text-align:center;
	position: absolute;
	top:0;
	left:0;
}
#thumbs {
	width:400px;
	position: absolute;
	top: 330px;
	left:0;
}
#thumbs ul {
	display:inline;
	list-style-type:none;
}
#thumbs ul li {
	width:92px;
	height:69px;
	float:left;
	display:inline;
	padding-left:6px;
	padding-bottom:6px;
}
#thumbs ul li a {
	text-decoration:none;
}
#thumbs a img {
	border: none;
}
#thumbs ul li.extrapixels {
	padding-left:7px;
}
#message {
	width:400px;
	float:left;
	height:70px;
	text-align:center;
	position: absolute;
	top: 300px;
	left:0;
	color:#333;
}
#bigDynPic {
	width:400px;
	height:300px;
	text-align:center;
	position: absolute;
	top: 0px;
	left:0;
}
#bigDynPic img {
	border-bottom:1px solid #333;
	display:block;
}
#bigDynPic p {
	font-family:Verdana, Sans-serif;
	font-weight:bold;
	font-size:80%;
	background:#fff;
	color:#333;
	margin:0;
	padding:2px 2px;
}
</style>
<script type="text/javascript">
<!--
 function dyngallery()
{
	var picId='bigDynPic';
	var loadingId='loadingmessage';
	var d=document.getElementById('thumbs');
	if(!d){return;}
	if(!document.getElementById(loadingId))
	{
		var lo=document.createElement('div');
		d.parentNode.insertBefore(lo,d);
		lo.id=loadingId;
		lo.style.display='none';
	}
	var piclinks=d.getElementsByTagName('a');
	for(var i=0;i<piclinks.length;i++)
	{
		piclinks[i].onclick=function()
		{
			document.getElementById(loadingId).style.display='block';
			var oldp=document.getElementById(picId);
			if(oldp)
			{
			 oldp.parentNode.removeChild(oldp);
			}
			var nc=document.createElement('div');
			d.parentNode.insertBefore(nc,d);
			nc.style.display='none';
			nc.id=picId;
			var newpic=document.createElement('img');
			newpic.src=this.href;
			newpic.alt=this.getElementsByTagName('img')[0].alt;
			newpic.title='Click to return to images';
			newpic.onload=function()
			{
				document.getElementById(loadingId).style.display='none';
			}
			newpic.onclick=function()
			{
			 this.parentNode.parentNode.removeChild(this.parentNode);
			}
			nc.appendChild(newpic);
			np=document.createElement('p');
			np.appendChild(document.createTextNode(this.getElementsByTagName('img')[0].alt))
			nc.appendChild(np);
			nc.style.display='block';
			return false;
		}
	}		
}
window.onload=function()
{
	if(document.getElementById && document.createTextNode)
	{
		document.body.onmouseover=function()
		{
			dyngallery();	
		}																		
	}
} 
// -->
</script>
<script type="text/javascript">
<!--
 	window.onload = initMenu;
function initMenu() {
	var e=document.getElementById('nav');
	var links=e.getElementsByTagName('A');
    for(i=0; i < links.length; i++) { 
        var thisLink = links[i];
        if(thisLink.parentNode.tagName == "LI"){
            setActivity(thisLink);
        }
    }
}
function setActivity(thisLink){
    thisLink.onmouseover = mouseOver;
    thisLink.onmouseout = mouseOut;	
}
function mouseOver() {
    this.parentNode.style.background = 'url(button.jpg) 0px 55px';
    return this;
}
function mouseOut() {
    this.parentNode.style.background = 'url(button.jpg)';
    return this;
} 
// -->
</script>
</head>
<body>
<div id="wrapper">
  <ul id="nav">
    <li><a href="index.html"><span>Home</span></a></li>
    <li><a href="index.html"><span>Page1</span></a></li>
    <li><a href="index.html"><span>Page2</span></a></li>
    <li><a href="index.html"><span>Page3</span></a></li>
    <li><a href="index.html"><span>Page4</span></a></li>
  </ul>
  <div id="right">
    <div id="filler"> </div>
    <div id="message">Click on thumbnail for larger picture</div>
    <div id="thumbs">
      <ul>
        <li class="extrapixels"><a href="fish1.jpg"><img src="tn_fish1.jpg" alt="Sample 1" /></a></li>
        <li><a href="fish2.jpg"><img src="tn_fish2.jpg" alt="Sample 2" /></a></li>
        <li><a href="fish3.jpg"><img src="tn_fish3.jpg" alt="Sample 3" /></a></li>
        <li><a href="fish4.jpg"><img src="tn_fish4.jpg" alt="Sample 4" /></a></li>
        <li class="extrapixels"><a href="fish5.jpg"><img src="tn_fish5.jpg" alt="Sample 5" /></a></li>
        <li><a href="fish6.jpg"><img src="tn_fish6.jpg" alt="Sample 6" /></a></li>
        <li><a href="fish7.jpg"><img src="tn_fish7.jpg" alt="Sample 7" /></a></li>
        <li><a href="fish8.jpg"><img src="tn_fish8.jpg" alt="Sample 8" /></a></li>
      </ul>
    </div>
  </div>
  <div id="push"></div>
</div>
<div id="footer">
  <p>&copy; 2009</p>
</div>
</body>
</html>

Scripts would normally be external, I just put them in the page for now for simplicity.

Thanks.

Which is the best way to play sound using javascript in a controlled manner ?
I need a solution which work across all browsers.

This is for my bingo game page which is fully based on ajax.

Thanks .

I can't seem to play MP3s with jPlayer, only OGG.
Any ideas? My custom code is below:

Code:

<script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){

    Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        jQuery.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        jQuery(this.cssSelector.jPlayer).jPlayer(this.options);

        jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            jQuery(this).blur();
            return false;
        });

        jQuery(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            jQuery(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            jQuery(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Create links to free media
                if(this.playlist[i].free) {
                    var first = true;
                    listItem += "<div class='jp-free-media'>(";
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            if(first) {
                                first = false;
                            } else {
                                listItem += " | ";
                            }
                            listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                        }
                    });
                    listItem += ")</span>";
                }

                listItem += "</li>";

                // Associate playlist items with their media
                jQuery(this.cssSelector.playlist + " ul").append(listItem);
                jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = jQuery(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        jQuery(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $(this).blur();
                    return false;
                });

                // Disable free media links to force access via right click
                if(this.playlist[i].free) {
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                var index = $(this).data("index");
                                jQuery(self.cssSelector.playlist + "_item_" + index).click();
                                jQuery(this).blur();
                                return false;
                            });
                        }
                    });
                }
            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            jQuery(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index);
        },
        supplied: "mp3",
        addMedia: function(media){
            this.playlist.push(media);
            this.playlistNext();
        }
    };

});

var last_el='';
jQuery('.track .wrap .play').click(function(){
    var cur_img = jQuery(this).css('backgroundImage');
    if(cur_img.substring(cur_img.length-10)=='play.png")'){
        if(last_el!=''){
            last_el.css('background-image','url("img/play.png")');
        }
        var el = jQuery(this);
        last_el = el;
        parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
        el.css('background-image','url("img/pause.png")');
    }else{
        parent.frames[1].pauseSong();
    }
});
jQuery('.jp-interface .jp-pause').click(function(){
    last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
    var el = jQuery(this);
    var href = el.attr('href');
    if(href.substring(0,1)=='/'){
        parent.location.href = parent.location.href + href.substring(1,href.length);
    }    
});

//]]>
</script>