@include('fondmemory.partials.header1')

<style>
.tom-new-highlight {
  background-color: #FFE700 !important;
  box-shadow: 0 0 10px #737373 !important;
  animation: tomPulseHighlight 1.2s ease-in-out 3;
}
@keyframes tomPulseHighlight {
  0%, 100% { box-shadow: 0 0 10px #737373; }
  50% { box-shadow: 0 0 18px #1C875F; }
}
.share-section .share-box {
  background-color: #fff;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
#latest-memory {
  flex: 0 0 auto;
  overflow: visible;
  max-height: none;
}
#latest-memory #disappear {
  overflow: visible;
}
#latest-memory .share-box,
#latest-memory .ajx_scroll_latest {
  border-radius: 10px;
  margin: 0.5rem 0.75rem 0.75rem !important;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}
#latest-memory .share-user-row {
  overflow: visible;
}
#latest-memory .share-user-avatar img {
  display: block;
}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		count_all_Memory();
		fondMemoryImg();
	});
	setInterval(function() {
		count_all_Memory();
	  	fondMemoryImg();
		fondMemory();
	}, 2000);

	function fondMemory(){
		var f_id = $('#funeral_id').val();
		var last_s_id = $('#last_s_id').val() || 0;
		$.ajax({
            url:"{{ url('Fondmemory') }}/fondmemory_list1",
            type:'POST',
            data: {'f_id':f_id, last_s_id:last_s_id},
            success: function(response) {
    			if(response && response != 0 && $.trim(response) !== ''){
        			var $wrap = $('<div>').html(response);
        			var newLast = $wrap.find('#last_s_id').last().val();
        			$wrap.find('#last_s_id').remove();
        			$wrap.find('.ajx_scroll, .share-box').each(function(){
        				var sid = $(this).data('s-id');
        				if (sid && $('#scroll-track [data-s-id="'+sid+'"]').length) {
        					$(this).remove();
        				}
        			});
        			if (!$wrap.find('.ajx_scroll, .share-box[data-s-id]').length) {
        				if (newLast) { $('#last_s_id').val(newLast); }
        				return;
        			}
        			$('#nomemory').remove();
	            	$('#scroll-box').append($wrap.html());
	            	if (newLast) {
	            		$('#last_s_id').val(newLast);
	            	}
	            	if (typeof window.refreshMemoryScroll === 'function') {
	            		window.refreshMemoryScroll();
	            	}
            	}
            }
        });
	}

	function clearMessageHighlight(sid) {
		var selector = sid
			? '#scroll-box [data-s-id="'+sid+'"], .tom-scroll-clone [data-s-id="'+sid+'"]'
			: '#scroll-box .tom-new-highlight, .tom-scroll-clone .tom-new-highlight, #latest-memory .tom-new-highlight';
		$(selector).each(function () {
			$(this)
				.removeClass('tom-new-highlight ajx_scroll_latest')
				.css({
					'background-color': '#fff',
					'box-shadow': 'none'
				});
		});
	}

	function latestfondMemory(last_memory_id, all_memory_cnt){
		var f_id = $('#funeral_id').val();
		var last_s_id = $('#last_lat_s_id').val() || 0;
		$.ajax({
            url:"{{ url('Fondmemory') }}/latest_fondmemory_list1",
            type:'POST',
            data: {'f_id':f_id, last_s_id:last_s_id},
            success: function(response) {
        		if(response && response != 0 && $.trim(response) !== ''){
        			$('#last_lat_s_id').val(last_memory_id);
        			$('#cnt_all_rec').val(all_memory_cnt);

        			// Old messages always white — clear any leftover yellow first
        			clearMessageHighlight();
        			// Hide top flash slot — show the new message only once in the list
        			$('#latest-memory').removeClass('is-visible').hide().empty();

        			var $wrap = $('<div>').html(response);
        			var $permanent = $wrap.find('.ajx_scroll_latest').clone();
        			if (!$permanent.length) {
        				$permanent = $wrap.find('.share-box').clone();
        			}
        			var newSids = [];
        			$permanent.each(function(){
        				var sid = $(this).data('s-id');
        				if (sid) {
        					newSids.push(String(sid));
        					// Remove any existing copy (list + scroll clones) so it never doubles
        					$('#scroll-track [data-s-id="'+sid+'"]').remove();
        				}
        			});
        			$permanent
        				.removeClass('ajx_scroll_latest')
        				.addClass('share-box ajx_scroll tom-new-highlight')
        				.css({
        					'background-color': '#FFE700',
        					'box-shadow': '0 0 10px #737373'
        				});
        			$('#nomemory').remove();
        			$('#scroll-box').prepend($permanent);

        			if (parseInt(last_memory_id, 10) > parseInt($('#last_s_id').val() || 0, 10)) {
        				$('#last_s_id').val(last_memory_id);
        			}

        			if (typeof window.pinMemoryScrollTop === 'function') {
        				window.pinMemoryScrollTop();
        			} else if (typeof window.refreshMemoryScroll === 'function') {
        				window.refreshMemoryScroll(true);
        			}

        			fondMemoryImg();

        			// After a few seconds: yellow → white (same as old messages)
	            	setTimeout(function() {
						newSids.forEach(function (sid) {
							clearMessageHighlight(sid);
						});
						if (!newSids.length) {
							clearMessageHighlight();
						}
						if (typeof window.refreshMemoryScroll === 'function') {
							window.refreshMemoryScroll();
						}
					}, 8000);
            	}
            }
        });
	}

	function count_all_Memory(){
		var f_id = $('#funeral_id').val();
		$.ajax({
            url:"{{ url('Fondmemory') }}/countAllMemory",
            type:'POST',
            dataType:'json',
            data: {'f_id':f_id},
            success: function(response) {
            	if (!response) { return; }
            	$('#cnt_all_latest_rec').val(response['count_fond']);
            	var cnt_all_memory = parseInt($('#cnt_all_rec').val() || 0, 10);
            	var newCount = parseInt(response['count_fond'] || 0, 10);
            	if(newCount > cnt_all_memory){
					latestfondMemory(response['last_mem_id'], response['count_fond']);
				}
            }
		});
	}

	function fondMemoryImg(){
		var f_id = $('#funeral_id').val();
		var page = $('#pageimg').val() || 0;
		var checkfiimg = $('#checkfiimg').val();
		var last_rec_id = $('#last_r_id').val();
		if (!last_rec_id) {
			last_rec_id = $('.Imgslider #last_rec_id').last().text() || 0;
		}
		$.ajax({
            url:"{{ url('Fondmemory') }}/fondmemoryImg_list",
            type:'POST',
            data: {'f_id':f_id, 'page':page, 'chkfiimg1':checkfiimg, 'lastrecid':last_rec_id},
            success: function(response) {
            	if(response && response != 0 && $.trim(response) !== ''){
					var $wrap = $('<div>').html(response);
					var $slides = $wrap.find('.carousel-item');
					if (!$slides.length) { return; }

					$('.Imgslider #last_rec_id').remove();
					$('.Imgslider').append($slides);
					var l_val = $wrap.find('#last_rec_id').last().text();
					if (l_val) {
						$('.Imgslider').append('<div hidden id="last_rec_id">'+l_val+'</div>');
						$('#last_r_id').val($.trim(l_val));
					}
					$('#pageimg').val(parseInt(page, 10) + 1);
	            	$('#checkfiimg').val(1);

					// Show newest shared photo in the main slider
					try {
						var $carousel = $('#demo');
						var idx = $carousel.find('.carousel-item').length - 1;
						if (idx >= 0 && typeof $carousel.carousel === 'function') {
							$carousel.carousel(idx);
						} else {
							$carousel.find('.carousel-item').removeClass('active');
							$carousel.find('.carousel-item').eq(idx).addClass('active');
						}
					} catch (e) {}
            	}
            }
        });
	}

	// $(document).ready(function(){
	// 	fondMemoryImg();
	// });

	$(function()
	{
	    var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl, albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'), sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'), sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"),  i = playPauseButton.find('i'), tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = [], trackNames = [], albumArtworks = [], trackUrl = [], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1, audio = null;

		if (!Array.isArray(trackUrl)) { trackUrl = []; }
		if (!Array.isArray(trackNames)) { trackNames = []; }
		if (!Array.isArray(albumArtworks)) { albumArtworks = []; }

		function setPlayingUi(isPlaying) {
			if (isPlaying) {
				playPauseButton.attr('class', 'play-pause pause');
				if (i.length) { i.attr('class', 'fas fa-pause'); }
				playerTrack.addClass('active');
				albumArt.addClass('active');
			} else {
				playPauseButton.attr('class', 'play-pause play');
				if (i.length) { i.attr('class', 'fas fa-play'); }
				playerTrack.removeClass('active');
				albumArt.removeClass('active buffering');
			}
		}

		function startPlayback() {
			if (!audio || !trackUrl.length) { return; }
			if (!audio.getAttribute('src') && !audio.src) {
				currIndex = -1;
				selectTrack(1);
				return;
			}
			var p = audio.play();
			if (p && typeof p.then === 'function') {
				p.then(function () {
					setPlayingUi(true);
					clearInterval(buffInterval);
					checkBuffering();
				}).catch(function () {
					setPlayingUi(false);
				});
			} else {
				setPlayingUi(true);
			}
		}

	  	function playPause()
	    {
	    	if (!audio || !trackUrl.length) { return; }
	        if (audio.paused) {
	        	if (!audio.src) {
	        		currIndex = -1;
	        		selectTrack(1);
	        		return;
	        	}
	            startPlayback();
	        } else {
	            clearInterval(buffInterval);
	            audio.pause();
	            setPlayingUi(false);
	        }
	    }

		function showHover(event)
		{
			if (!sArea.length || !sArea.offset()) { return; }
			seekBarPos = sArea.offset();
			seekT = event.clientX - seekBarPos.left;
			seekLoc = audio.duration * (seekT / sArea.outerWidth());
			sHover.width(seekT);
			cM = seekLoc / 60;
			ctMinutes = Math.floor(cM);
			ctSeconds = Math.floor(seekLoc - ctMinutes * 60);
			if( (ctMinutes < 0) || (ctSeconds < 0) )
				return;
			if(ctMinutes < 10)
				ctMinutes = '0'+ctMinutes;
			if(ctSeconds < 10)
				ctSeconds = '0'+ctSeconds;
	        if( isNaN(ctMinutes) || isNaN(ctSeconds) )
	            insTime.text('--:--');
	        else
			    insTime.text(ctMinutes+':'+ctSeconds);
	    	insTime.css({'left':seekT,'margin-left':'-21px'}).fadeIn(0);
		}

	    function hideHover()
		{
	        sHover.width(0);
	        insTime.text('00:00').css({'left':'0px','margin-left':'0px'}).fadeOut(0);
	    }

	    function playFromClickedPos()
	    {
	    	if (!audio || !isFinite(seekLoc)) { return; }
	        audio.currentTime = seekLoc;
			seekBar.width(seekT);
			hideHover();
	    }

	    function updateCurrTime()
		{
			if (!audio || !isFinite(audio.duration) || audio.duration <= 0) { return; }
	        nTime = new Date();
	        nTime = nTime.getTime();
	        if( !tFlag )
	        {
	            tFlag = true;
	            trackTime.addClass('active');
	        }

			curMinutes = Math.floor(audio.currentTime / 60);
			curSeconds = Math.floor(audio.currentTime - curMinutes * 60);
			durMinutes = Math.floor(audio.duration / 60);
			durSeconds = Math.floor(audio.duration - durMinutes * 60);
			playProgress = (audio.currentTime / audio.duration) * 100;

			if(curMinutes < 10) curMinutes = '0'+curMinutes;
			if(curSeconds < 10) curSeconds = '0'+curSeconds;
			if(durMinutes < 10) durMinutes = '0'+durMinutes;
			if(durSeconds < 10) durSeconds = '0'+durSeconds;

	        if( isNaN(curMinutes) || isNaN(curSeconds) )
	            tProgress.text('00:00');
	        else
			    tProgress.text(curMinutes+':'+curSeconds);

	        if( isNaN(durMinutes) || isNaN(durSeconds) )
	            tTime.text('00:00');
	        else
			    tTime.text(durMinutes+':'+durSeconds);

	        if( isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds) )
	            trackTime.removeClass('active');
	        else
	            trackTime.addClass('active');

			seekBar.width((isNaN(playProgress) ? 0 : playProgress)+'%');
	    }

	    function checkBuffering()
	    {
	        clearInterval(buffInterval);
	        buffInterval = setInterval(function()
	        {
	            if( (nTime == 0) || (bTime - nTime) > 1000  )
	                albumArt.addClass('buffering');
	            else
	                albumArt.removeClass('buffering');
	            bTime = new Date();
	            bTime = bTime.getTime();
	        },100);
	    }

	    function selectTrack(flag)
	    {
	    	if (!trackUrl.length) {
	    		setPlayingUi(false);
	    		return;
	    	}

	        if( flag == 0 || flag == 1 )
	            ++currIndex;
	        else
	            --currIndex;

	        if( (currIndex > -1) && (currIndex < trackUrl.length) )
	        {
	            seekBar.width(0);
	            trackTime.removeClass('active');
	            tProgress.text('00:00');
	            tTime.text('00:00');

	            currAlbum = albums[currIndex] || '';
	            currTrackName = trackNames[currIndex] || '';
	            currArtwork = albumArtworks[currIndex] || '';

	            audio.src = trackUrl[currIndex];
	            try { audio.load(); } catch (e) {}

	            nTime = 0;
	            bTime = new Date();
	            bTime = bTime.getTime();

	            if(flag != 0) {
	                startPlayback();
	            } else {
	            	setPlayingUi(false);
	            }

	            if (albumName.length) { albumName.text(currAlbum); }
	            if (trackName.length) { trackName.text(currTrackName); }
	            if (albumArt.length && currArtwork) {
	            	albumArt.find('img.active').removeClass('active');
	            	$('#'+currArtwork).addClass('active');
	            	bgArtworkUrl = $('#'+currArtwork).attr('src');
	            	if (bgArtwork.length) {
	            		bgArtwork.css({'background-image':'url('+bgArtworkUrl+')'});
	            	}
	            }
	        }
	        else
	        {
	            if( flag == 0 || flag == 1 )
	                --currIndex;
	            else
	                ++currIndex;
	        }
	    }

	    function initPlayer()
		{
			if (!trackUrl.length) {
				playPauseButton.hide();
				return;
			}

	        audio = new Audio();
	        audio.preload = 'auto';
	        setPlayingUi(false);
			selectTrack(0);
			startPlayback();

			playPauseButton.off('click').on('click', playPause);
			if (sArea.length) {
				sArea.mousemove(function(event){ showHover(event); });
		        sArea.mouseout(hideHover);
		        sArea.on('click',playFromClickedPos);
			}
	        $(audio).on('timeupdate',updateCurrTime);

	    	audio.addEventListener("ended", function() {
				if ((currIndex + 1) < trackUrl.length){
		    		selectTrack(1);
	        	} else {
	        		currIndex = -1;
	        		selectTrack(1);
	        	}
			});
			if (playNextTrackButton.length) {
				playNextTrackButton.on('click',function(){ selectTrack(1);});
			}
	        if (playPreviousTrackButton.length) {
	        	playPreviousTrackButton.on('click',function(){ selectTrack(-1);} );
	        }
		}

		initPlayer();

	});

</script>

<style type="text/css">
	a:hover{
		color: #ffffff;
	}
	/* Match original sidebar slot; messages stack with natural height (no forced empty gap) */
	#scroll-box,
	#scroll-box.tom-scroll-set,
	.tom-scroll-clone {
  		height: auto !important;
  		min-height: 0 !important;
  		max-height: none !important;
  		overflow: visible !important;
  		margin: 0 !important;
  		padding: 0 !important;
  	}
	#latest-memory.container {
		width: 100%;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0 !important;
		min-height: 0;
		flex: 0 0 auto;
		overflow: visible;
	}
	#latest-memory.is-visible {
		margin-bottom: 0.5rem !important;
	}
	.share-section .share-box {
		margin: 1.25rem 0.75rem;
		overflow: hidden;
	}
	.share-section > #latest-memory .share-box {
		overflow: visible !important;
	}
	.share-section .share-box:first-child {
		margin-top: 0.5rem;
	}
	.share-section > img,
	.share-section > h5,
	.share-section > #latest-memory {
		flex: 0 0 auto;
	}
	.share-box .share-user-row {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		margin-left: 0;
		margin-right: 0;
	}
	.share-box .share-user-avatar {
		flex: 0 0 35px;
		width: 35px;
		max-width: 35px;
		padding: 0;
	}
	.share-box .share-user-name-wrap {
		flex: 1 1 auto;
		min-width: 0;
		padding-left: 8px;
	}
	.share-box .share-user-name {
		font-weight: 700;
		margin: 0.2rem 0 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}
	.share-section {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	#contain.scrollmain {
		flex: 1 1 auto;
		height: auto !important;
		min-height: 0;
		max-height: none;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	#contain.scrollmain::-webkit-scrollbar {
		display: none;
	}
    .center-img{
		background-color: transparent!important;
		width: 100%;
		height: 637px;
		max-height: 637px;
	}
	.user-section p {
    	margin: 1.05rem 0;
	}
	* {
  		box-sizing: border-box;
	}
	.lg-container {
    	box-shadow: 1px 1px 18px 8px #33333363;
    	border-radius: 20px;
    	background: #fff;
    	padding: 2rem;
	}
	.carousel-control-next, .carousel-control-prev{
		display: none;
	}
	@media (min-width: 1400px){
    	.lg-container{max-width: 2000px;width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}    
		.user-profile{left: 8rem;margin-top:1rem;width: 150px;height: 150px;top: 15rem;}.col-md-3{-ms-flex: 0 0 20%;flex: 0 0 20%;max-width: 20%;}.col-md-6{-ms-flex: 0 0 60%;flex: 0 0 60%;max-width: 60%;}.logo{width: 200px!important;}.user-section{padding-top:13rem;}.f-numb{
		padding: 1rem 0 3rem 0!important;font-size:2rem!important}.center-img{height: 862px;max-height: 862px;object-fit:contain!important;background-color: #000 !important;}.share-section{height: 862px!important;display:flex;flex-direction:column;}#contain.scrollmain{flex:1 1 auto;height:auto!important;min-height:0;}#scroll-box,#scroll-box.tom-scroll-set,.tom-scroll-clone{height:auto!important;min-height:0!important;}.user-section p{font-size:1.2rem;}.bar-code{width: 120px!important;}
	}
	.center {
		margin: 0;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 100%;
	}
	body {
    	background-image: url({{ asset('site1/images/bg.png') }});
    	background-repeat: no-repeat;
    	background-size: 100%;
	}
	.scrollmain{
		padding-right: 15px;
		padding-left: 15px;
		overflow-y: hidden !important;
		overflow-x: hidden !important;
		position: relative;
	}
	#scroll-viewport {
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	#scroll-track {
		display: block;
		width: 100%;
		height: fit-content;
		will-change: transform;
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
	}
	#scroll-track .tom-scroll-clone {
		pointer-events: none;
	}

    .carousel-item-next, .carousel-item-prev, .carousel-item.active{
      /* background-image: url(images/Group-26502@2x.png);background-size: 100%;background-repeat: no-repeat;backdrop-filter: blur(10px);} */
      background: linear-gradient(rgb(53 52 52 / 45%), rgb(6 6 6 / 45%)),url(images/Group-26502@2x.png);background-size: 100%;background-repeat: no-repeat;
      background:#000!important;}
    /* .carousel-item img{width:500px;margin:auto;display:block;} */


    #player-container {
    	position: absolute;
	    margin-top: 10px;
	    margin-left: 10px;
    	z-index: 999999;
    }

    #player-container .play-pause {
	  cursor: pointer;
	  text-indent: -999999px;
	  height:35px;
	  width: 35px;
	  border-radius: 50%;
	  background: #5e8f4e;
	  background-image: url('{{ asset('site1/images/play.png') }}');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-size: 13px;
    }
	#player-container .play {
		background-position-x: 13px!important;	
	}
	#player-container .pause {
		background-position-x: 11px!important;	
	}
	.play {
	  background-image: url('{{ asset('site1/images/play.png') }}');
	}
	.pause {
	   background-image: url('{{ asset('site1/images/pause.png') }}')!important;
	}
</style>
<style type="text/css">
	
	#app-cover
	{
	    position: absolute;
	    /*top: 50%;
	    right: 0;
	    left: 0;
	    width: 430px;
	    height: 100px;
	    margin: -4px auto;*/
	}

	#player
	{
	    position: relative;
	    height: 100%;
	    z-index: 3;
	}

	#player-track
	{
	    position: absolute;
	    top: 0;
	    right: 15px;
	    left: 15px;
	    padding: 13px 22px 10px 184px;
	    background-color: #fff7f7;
	    border-radius: 15px 15px 0 0;
	    transition: 0.3s ease top;
	    z-index: 1;
	}

	#player-track.active
	{
	    top: -92px;
	}

	#album-name
	{
	    color: #54576f;
	    font-size: 17px;
	    font-weight: bold;
	}

	#track-name
	{
	    color: #acaebd;
	    font-size: 13px;
	    margin: 2px 0 13px 0;
	}

	#track-time
	{
	    height: 12px;
	    margin-bottom: 3px;
	    overflow: hidden;
	}

	#current-time
	{
	    float: left;
	}

	#track-length
	{
	    float: right;
	}

	#current-time, #track-length
	{
	    color: transparent;
	    font-size: 11px;
	    background-color: #ffe8ee;
	    border-radius: 10px;
	    transition: 0.3s ease all;
	}

	#track-time.active #current-time, #track-time.active #track-length
	{
	    color: #f86d92;
	    background-color: transparent;
	}

	#s-area, #seek-bar
	{
	    position: relative;
	    height: 4px;
	    border-radius: 4px;
	}

	#s-area
	{
	    background-color:#ffe8ee;
	    cursor: pointer;
	}

	#ins-time
	{
	    position: absolute;
	    top: -29px;
	    color: #fff;
	    font-size: 12px;
	    white-space: pre;
	    padding: 5px 6px;
	    border-radius: 4px;
		display:none;
	}

	#s-hover
	{
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    opacity: 0.2;
	    z-index: 2;
	}

	#ins-time, #s-hover
	{
	    background-color: #3b3d50;
	}

	#seek-bar
	{
	    content: '';
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    width: 0;
	    background-color: #fd6d94;
	    transition: 0.2s ease width;
	    z-index: 1;
	}

	#player-content
	{
	    position: relative;
	    height: 100%;
	    background-color: #fff;
	    box-shadow: 0 30px 80px #656565;
	    border-radius: 15px;
	    z-index: 2;
	}

	#album-art
	{
	    position: absolute;
	    top: -40px;
	    width: 115px;
	    height: 115px;
	    margin-left: 40px;
	    transform: rotateZ(0);
	    transition: 0.3s ease all;
	    box-shadow: 0 0 0 10px #fff;
	    border-radius: 50%;
	    overflow: hidden;
	}

	#album-art.active
	{
	    top: -60px;
	    box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
	}

	#album-art:before
	{
	    content: '';
	    position: absolute;
	    top: 50%;
	    right: 0;
	    left: 0;
	    width: 20px;
	    height: 20px;
	    margin: -10px auto 0 auto;
	    background-color: #d6dee7;
	    border-radius: 50%;
	    box-shadow: inset 0 0 0 2px #fff;
	    z-index: 2;
	}

	#album-art img
	{
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    z-index: -1;
	}

	#album-art img.active
	{
	    opacity: 1;
	    z-index: 1;
	}

	#album-art.active img.active
	{
	    z-index: 1;
	    animation: rotateAlbumArt 3s linear 0s infinite forwards;
	}

	@keyframes rotateAlbumArt
	{
	    0%{ transform: rotateZ(0); }
	    100%{ transform: rotateZ(360deg); }
	}

	#buffer-box
	{
	    position: absolute;
	    top: 50%;
	    right: 0;
	    left: 0;
	    height: 13px;
	    color: #1f1f1f;
	    font-size: 13px;
	    font-family: Helvetica;
	    text-align: center;
	    font-weight: bold;
	    line-height: 1;
	    padding: 6px;
	    margin: -12px auto 0 auto;
	    background-color: rgba(255, 255, 255, 0.19);
	    opacity: 0;
	    z-index: 2;
	}

	#album-art img, #buffer-box
	{
	    transition: 0.1s linear all;
	}

	#album-art.buffering img
	{
	    opacity: 0.25;
	}

	#album-art.buffering img.active
	{
	    opacity: 0.8;
	    filter: blur(2px);
	    -webkit-filter: blur(2px);
	}

	#album-art.buffering #buffer-box
	{
	    opacity: 1;
	}

	/*#player-controls
	{
	    width: 250px;
	    height: 100%;
	    margin: 0 5px 0 141px;
	    float: right;
	    overflow: hidden;
	}*/

	#player-controls {
		position: absolute;
	    margin-top: 10px;
	    margin-left: 10px;
		z-index: 999999;
	}

	#player-controls .play-pause {
	  cursor: pointer;
	  text-indent: -999999px;
	  height:35px;
	  width: 35px;
	  border-radius: 20%;
	  background: #5e8f4e;
	  background-image: url('{{ asset('site1/images/play.png') }}');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-size: 13px;
	}
	#player-controls .play {
		background-position-x: 13px!important;	
	}
	#player-controls .pause {
		background-position-x: 11px!important;	
	}

	.control
	{
	    width: 33.333%;
	    float: left;
	    padding: 12px 0;
	}

	.button
	{
	    width: 26px;
	    height: 26px;
	    padding: 25px;
	    background-color: #fff;
	    border-radius: 6px;
	    cursor: pointer;
	}

	.button i
	{
	    display: block;
	    color: #d6dee7;
	    font-size: 26px;
	    text-align: center;
	    line-height: 1;
	}

	.button, .button i
	{
	    transition: 0.2s ease all;
	}

	.button:hover
	{
	    background-color: #d6d6de;
	}

	.button:hover i
	{
	    color: #fff;
	}

	#ytd-url {
	  display: block;
	  position: fixed;
	  right: 0;
	  bottom: 0;
	  padding: 10px 14px;
	  margin: 20px;
	  color: #fff;
	  font-size: 14px;
	  text-decoration: none;
	  background-color: #ae5f87;
	  border-radius: 4px;
	  box-shadow: 0 10px 20px -5px rgba(174, 95, 135, 0.86);
	  z-index: 125;
	}
</style>
<style type="text/css">
	.marqueeElement {
	    /*height:58px;*/
	    /*width:58px;*/
	    /*color: #ccc;*/
	    /*border: 1px solid #666;*/
	    position:absolute;
	}
	#mholder {
	    height: 513px;
	    /*width:60px;*/
	    /*border: solid 1px black;*/
	    /*position: absolute;*/
	    overflow: hidden;
	}
</style>
    </body>
</html>