var upload="<div id=\"uploader\">"+
					"<form method=\"post\" name=\"add_library\" enctype=\"multipart/form-data\" action=\"./upload\" onsubmit=\"loadPage();\"><table>"+
						"<tr>"+
							"<td class=\"formtitle\">Select your library .xml:</td>"+
							"<td class=\"cell-alt\"><input type=\"file\" name=\"library\" class=\"file\"></td>"+						
						"</tr>"+
						"<tr class=\"full\">"+
							"<td colspan='2' class=\"cell\">Size matters, the larger the file the slower the import</td>"+				
						"</tr>"+		
						"<tr>"+
							"<td class=\"formtitle\"></td>"+
							"<td><input type=\"submit\" value=\"Upload library\" class=\"submit\" /></td>"+						
						"</tr>"+
						"<input type=\"hidden\" name=\"do\" value=\"upload\" />"+					
					"</table></form>"+
				"</div>";
//scrol playing item into view functions
function getHex(rgbColorString){
	if(rgbColorString.toString().indexOf('rgb')!=-1)
			return color.init(rgbColorString.toString().substring(4,rgbColorString.toString().indexOf(')')).split(", ")).hex;
	return rgbColorString;
}
var menuHoverColorAltering = 40;
var buttonsBgColorAltering = 30;
function findPos(obj) {
       var curleft = curtop = 0;
       if (obj.offsetParent) {
                do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
                } while (obj = obj.offsetParent);

        }
        return curtop;
    };
function getItemId(whereFrom){
        var flexRow = $('.dblClicked').get(0);
		if(!flexRow) return null;
        var id = (whereFrom.className!='')?whereFrom.className:whereFrom.id;
        if(id.indexOf('view')!=-1)  return 'grid'+flexRow.id.substr(3);
        return flexRow.id;
}
function scrollIntoView(holder) {
		var itemId = getItemId(holder);
		if(!itemId) return false;
        var holderPos = findPos(holder);
        var holderTopEdge = holder.scrollTop + holderPos;
        var holderBtmEdge = holderTopEdge + parseInt(holder.style.height);        
        var itemPos = findPos($('#'+itemId ).get(0));
        if(itemPos<holderTopEdge || itemPos>holderBtmEdge )
            holder.scrollTop = itemPos-holderPos ;
}
//start draw functons
var theme;
function saveTheme(){
	$.get("save.html", function(data){
		osx_create(data);
	});
}
var color = new (function(){
    this.rgb = [0,0,0];
    this.hex = "#000000";
    this.init = function(color){
        if(typeof(color)!='object'){
            this.hex = color;
            this.toRGB(this.hex);
        }
        else{
            this.rgb = color;
            this.toHex(parseInt(this.rgb[0]),parseInt(this.rgb[1]),parseInt(this.rgb[2]));
        }
     return this;
    };
    this.toHex = function(r,g,b){
		var rStr = r.toString(16);
		if (rStr.length == 1)
		  rStr = '0' + rStr;
		var gStr = g.toString(16);
		if (gStr.length == 1)
		  gStr = '0' + gStr;
		var bStr = b.toString(16);
		if (bStr.length == 1)
		  bStr = '0' + bStr;
		this.hex = ('#' + rStr + gStr + bStr).toUpperCase();
           return this;
    };
    this.toRGB = function(hexString){
		if (hexString.substr(0, 1) == '#')
		  hexString = hexString.substr(1);      
		this.rgb[0] = parseInt(hexString.substr(0, 2), 16);
		this.rgb[1] = parseInt(hexString.substr(2, 2), 16);
		this.rgb[2] = parseInt(hexString.substr(4, 2), 16); 
	   return this; 
    };
    this.alter = function(r,g,b){
        args = arguments;
        if(args[1]==undefined){
            this.rgb[0]=(r+this.rgb[0]>255)?255:(r+this.rgb[0]<0)?0:r+this.rgb[0];
            this.rgb[1]=(r+this.rgb[1]>255)?255:(r+this.rgb[1]<0)?0:r+this.rgb[1];
            this.rgb[2]=(r+this.rgb[2]>255)?255:(r+this.rgb[2]<0)?0:r+this.rgb[2];
        }
        else{
            this.rgb[0]=(r+this.rgb[0]>255)?255:(r+this.rgb[0]<0)?0:r+this.rgb[0];
            this.rgb[1]=(g+this.rgb[1]>255)?255:(g+this.rgb[1]<0)?0:g+this.rgb[1];
            this.rgb[2]=(b+this.rgb[2]>255)?255:(b+this.rgb[2]<0)?0:b+this.rgb[2];
        }
        this.toHex(this.rgb[0],this.rgb[1],this.rgb[2]);
        return this;
    };
    this.complement = function(){
        this.rgb[0] = 255-this.rgb[0];
        this.rgb[1] = 255-this.rgb[1]
        this.rgb[2] = 255-this.rgb[2]
        this.normalize();
        this.toHex(this.rgb[0],this.rgb[1],this.rgb[2]);
    return this;
    }
    this.normalize = function(){
        for(var i=0;i<=2;i++){
            if(this.rgb[i]>255){
                this.rgb[i]-=255;
            }
            if(this.rgb[i]<0){
                this.rgb[i]+=255;
            }
        }
    }
})();

function addCorner(el,f,rad,baseColor){
	el.backgroundCanvas(); 
	el.backgroundCanvasPaint(f,rad,baseColor);
}
function cssCorner(el,rad){
	if(!$.browser.msie){
		if(typeof(rad)=='number'){
			el.css("-webkit-border-radius",rad+"px");
			el.css("-moz-border-radius",rad+"px");
			el.css("border-radius",rad+"px");
		}
		else if(typeof(rad)=='object'){
					rad={
						tl:(rad.tl)?rad.tl:0,
						tr:(rad.tr)?rad.tr:0,
						bl:(rad.bl)?rad.bl:0,
						br:(rad.br)?rad.br:0
					}
		el.css("border-top-left-radius",rad.tl+"px");
		el.css("-moz-border-radius-topleft",rad.tl+"px");
		el.css("-webkit-border-top-left-radius",rad.tl+"px");
		
		el.css("border-top-right-radius",rad.tr+"px");
		el.css("-moz-border-radius-topright",rad.tr+"px");
		el.css("-webkit-border-top-right-radius",rad.tr+"px");
		
		el.css("border-bottom-left-radius",rad.bl+"px");
		el.css("-moz-border-radius-bottomleft",rad.bl+"px");
		el.css("-webkit-border-bottom-left-radius",rad.bl+"px");
		
		el.css("border-bottom-right-radius",rad.br+"px");
		el.css("-moz-border-radius-bottomright",rad.br+"px");
		el.css("-webkit-border-bottom-right-radius",rad.br+"px");
		}
	}
}
function addCssRule(/* string */ selector, /* string */ rule) {
  if (document.styleSheets) {
    if (!document.styleSheets.length) {
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(bc.createEl('style'));
    }

    var i = document.styleSheets.length-1;
    var ss = document.styleSheets[i];

    var l=0;
    if (ss.cssRules) {
      l = ss.cssRules.length;
    } else if (ss.rules) {
      // IE
      l = ss.rules.length;
    }

    if (ss.insertRule) {
      ss.insertRule(selector + ' {' + rule + '}', l);
    } else if (ss.addRule) {
      // IE
      ss.addRule(selector, rule, l);
    }
  }
};
var img = new Image();
img.src = "../images/loupe.png";
var _gradient_btn_op = "0.2";
function paintSearch(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width, radius:uRad, border: 0 };
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0,	0, height);
			backgroundGradient.addColorStop(0 ,baseColor);//'#DFE2E9'
			backgroundGradient.addColorStop(1, 'rgba(255,255,255,0.5)');//'#D6DAE3'
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
			context.drawImage(img,4,6);
	}
function paintTrack(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width, radius:uRad, border: 0 };
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0,	0, height);
			backgroundGradient.addColorStop(0 ,"rgba(255,255,255,0.3)");//'#E2E5ED'
			backgroundGradient.addColorStop(0.45 ,"rgba(255,255,255,0.2)");//'#D8DCE7'
			backgroundGradient.addColorStop(0.45, baseColor);//'#CBD1DF'
			backgroundGradient.addColorStop(0.7, baseColor);//'#CBD1DF'
			backgroundGradient.addColorStop(1, "rgba(255,255,255,0.35)");//'#E8EBF1'
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintBtn(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width,radius:uRad, border: 0 };
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).alter(buttonsBgColorAltering).hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,'rgba(255,255,255,'+_gradient_btn_op+')');//#303030
			backgroundGradient.addColorStop(1, baseColor);//#1C1C1C
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintBtnHover(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width,radius:uRad, border: 0 };
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).complement().hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,'rgba(255,255,255,'+_gradient_btn_op+')');//was#303030
			backgroundGradient.addColorStop(1, baseColor);//was#1C1C1C
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintBtnDown(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width,radius:uRad, border: 0 };
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).complement().hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,baseColor);//was#1C1C1C
			backgroundGradient.addColorStop(1, 'rgba(255,255,255,'+_gradient_btn_op+')');//was#303030
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintNavBtm(context, width, height, elementInfo, uRad, baseColor)
		{
				var options = {x:0, height: height, width: width, radiusBL:uRad,radiusBR:uRad, border: 0 };
				context.fillStyle ="rgba("+ baseColor[0]+", "+baseColor[1]+", "+baseColor[2]+", 0.999)";
				$.canvasPaint.roundedRect(context,options);
		}
function paintNavTr(context, width, height, elementInfo, uRad, baseColor)
		{
				var options = {x:0, height: height, width: width,radiusTR:uRad, border: 0 };
				context.fillStyle ="rgba("+ baseColor[0]+", "+baseColor[1]+", "+baseColor[2]+", 0.999)";
				$.canvasPaint.roundedRect(context,options);
		}
function paintNavTl(context, width, height, elementInfo, uRad, baseColor)
		{
				var options = {x:0, height: height, width: width,radiusTR:0,radiusTL:uRad, border: 0 };
				context.fillStyle ="rgba("+ baseColor[0]+", "+baseColor[1]+", "+baseColor[2]+", 0.999)";
				$.canvasPaint.roundedRect(context,options);
		}
function paintSmallBtnLeft(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width,radiusTL:uRad,radiusBL:uRad, border: 0 };
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).alter(buttonsBgColorAltering).hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,'rgba(255,255,255,'+_gradient_btn_op+')');//#303030
			backgroundGradient.addColorStop(1, baseColor);//#1C1C1C
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintSmallBtnLeftHover(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width,radiusTL:uRad,radiusBL:uRad, border: 0 };
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).complement().hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,'rgba(255,255,255,'+_gradient_btn_op+')');//was#303030
			backgroundGradient.addColorStop(1, baseColor);//was#1C1C1C
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintSmallBtnLeftDown(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width,radiusTL:uRad,radiusBL:uRad, border: 0 };
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).complement().hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,baseColor);//was#1C1C1C
			backgroundGradient.addColorStop(1, 'rgba(255,255,255,'+_gradient_btn_op+')');//was#303030
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintSmallBtnRight(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width,radiusTR:uRad,radiusBR:uRad, border: 0 };
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).alter(buttonsBgColorAltering).hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,'rgba(255,255,255,'+_gradient_btn_op+')');//#303030
			backgroundGradient.addColorStop(1, baseColor);//#1C1C1C
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintSmallBtnRightHover(context, width, height, elementInfo, uRad, baseColor)
	{
			var options = {x:0, height: height, width: width,radiusTL:uRad,radiusBL:uRad, border: 0 };
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).complement().hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,'rgba(255,255,255,'+_gradient_btn_op+')');//was#303030
			backgroundGradient.addColorStop(1, baseColor);//was#1C1C1C
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintSmallBtnRightDown(context, width, height, elementInfo, uRad, baseColor)
	{
			// Draw the border rectangle
			context.fillStyle = color.init(theme._buttons).complement().hex;
			$.canvasPaint.roundedRect(context,options);
			// Draw the inner rectangle
			options.border = 1;
			context.fillStyle = baseColor;
			$.canvasPaint.roundedRect(context,options);
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height);
			backgroundGradient.addColorStop(0 ,baseColor);//was#1C1C1C
			backgroundGradient.addColorStop(1, 'rgba(255,255,255,'+_gradient_btn_op+')');//was#303030
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
	}
function paintSmallBtnBg(context, width, height, elementInfo, uRad, baseColor)
		{
				var options = {x:0, height: height, width: width, radius:uRad, border: 0 };
				context.fillStyle = baseColor;
				$.canvasPaint.roundedRect(context,options);
		}
//end draw functons
$(function(){

		/* write css 2.1 */
		addCssRule('.barSelected','text-shadow:1px 1px 0px #000000;');
		addCssRule('.flexigrid tr.trSelected td','text-shadow:1px 1px 0px #000000;');
		addCssRule('#transparentOverlay','filter: alpha(opacity=30);-khtml-opacity: 0.3; -moz-opacity: 0.3;opacity: 0.3;')
		addCssRule('.flexigrid div.bDiv tr.brokenSong:hover td, .flexigrid div.bDiv tr.brokenSong:hover td.sorted, .flexigrid div.bDiv tr.trOver.brokenSong td.sorted, .flexigrid div.bDiv tr.trOver.brokenSong td, .flexigrid tr.brokenSong td.sorted, .flexigrid tr.brokenSong td ','filter: alpha(opacity=30);	-khtml-opacity: 0.3; -moz-opacity: 0.3;opacity: 0.3; ');
		addCssRule('#perma-link','text-shadow:1px 1px 1px #000000;');
		addCssRule('.context-menu-theme-osx','opacity: .93; filter: alpha(opacity=93); zoom:1.0;');
		addCssRule('.context-menu-theme-osx .context-menu-item','opacity: 1.0; filter: alpha(opacity=100);');
		addCssRule('.context-menu-theme-gloss .context-menu-item-hover','border-radius: 3px; -webkit-border-radius: 3px;-moz-border-radius: 3px; ');
		addCssRule('#osx-container','-moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;-webkit-border-bottom-right-radius:6px; -moz-box-shadow:0 0 64px #000;  -webkit-box-shadow:0 0 64px #000;');
		addCssRule('#osx-container #osx-modal-title ','text-shadow:0 1px 0 #FFFFFF;');
		addCssRule('#wrapper','opacity:0;filter: alpha(opacity=0)');
		addCssRule('#logo','text-shadow:0 0 10px #FFFFFF;');
		addCssRule('#logo span','text-shadow:none;');
		addCssRule('#search-button','opacity:0;filter: alpha(opacity=0)');
		addCssRule('#user-top p','text-shadow: #555 1px 1px 0px;');
		addCssRule('#playlist-top','text-shadow:1px 1px 0 #D6DEEA;');
		if(!$.browser.msie) addCssRule('.fplaylist tr:nth-child(even)','background-color: #e8edf3');
		addCssRule('#now_playin','text-shadow:1px 1px 0 #FFFFFF;');
		addCssRule('.sidelist h3','text-shadow:1px 1px 1px #FFFFFF;');
		/*end css 2.1*/
	$('#osx-modal-title').html("Refrain.com");
	//add keyboard shortcuts 
	$(document).bind('keydown', 'ctrl+n',function(){
		osx_create($('#playlist_add_new').html());
		//$.facebox($('#playlist_add_new').html());
		return false;
	});
	$(document).bind('keydown', 'alt+shift+u',function(){
		osx_create(upload);
		return false;
	});
	$(document).bind('keydown', 'alt+shift+e',function(){
			$(window).get(0).location.href="./edit-profile";
			return false;
		});
	$(document).bind('keydown', 'alt+shift+x',function(){
			$(window).get(0).location.href="./logout";
			return false;
		});
	$(document).bind('keydown', 'ctrl+shift+1',function(){
			$('.view1').click();
			return false;
		});
	$(document).bind('keydown', 'ctrl+shift+2',function(){
			$('.view2').click();
			return false;
		});
	$(document).bind('keydown', 'ctrl+shift+3',function(){
			$('.view3').click();
			return false;
		});
	$(document).bind('keydown', 'alt+space',function(){
			$('#play').click();
			return false;
		});
	$(document).bind('keydown', 'alt+right',function(){
			$('.next').click();
			return false;
		});
	$(document).bind('keydown', 'alt+left',function(){
			$('.previous').click();
			return false;
		});

	$(document).bind('keydown', 'ctrl+shift+s',function(){
			$('#shuffle_p').click();
			return false;
		});
	$(document).bind('keydown', 'ctrl+shift+o',function(){
			$('#repeat_o').click();
			return false;
		});
	$(document).bind('keydown', 'ctrl+shift+r',function(){
			$('#repeat_p').click();
			return false;
		});
	//begin header elements styling
	
	//nav

	cssCorner($('.subnav a:last-child'),{bl:5,br:5});
	cssCorner($('.subnav a:first-child'),{tr:5});
	cssCorner($('.subnav').eq(3).children('a:first-child'),{tl:5});
	cssCorner($('#controls a'),18);
	cssCorner($('#controls span'),18);
	cssCorner($('#views'),5);
	cssCorner($('#search'),12);
	cssCorner($('.view1'),{tl:5,bl:5});
	cssCorner($('.view3'),{tr:5,br:5});
	cssCorner($('#buttons'),5);
	cssCorner($('#add_p'),{tl:5,bl:5});
	cssCorner($('#toggle'),{tr:5,br:5});
	var currNav = null;
	var wait_a_second,t,n;
	$('#nav a.nav').each(function(i){
		$(this).attr('id',"menu"+i);
		if($(this).attr('id')=='menu0'){
			$(this).css("margin-left","10px");
			$(this).next('div').css("margin-left","10px");
			$(this).next().children().eq(0).click(function(){
				osx_create($('#playlist_add_new').html());
			});
			$(this).next().children().eq(1).click(function(){
				osx_create(upload);
			});
			if($('#menu0').children('span').text().indexOf('Guest')!=-1){
			  $('a').each(function(){
				if(this.href.indexOf('register')!=-1){
					$(this).click(function(){
						$.get("register.html", function(data){
							osx_create(data);
						});
					return false;
					});
				}
				if(this.href.indexOf('login')!=-1){
				$(this).click(function(){
					$.get("login.html", function(data){
						osx_create(data);
					});
				return false;
				});
			   }
			 
			 });
			}
		}
		if($(this).attr('id')=='menu1'){
			$(this).next().children().eq(0).click(function(){
				$('.view1').click();
			});
			$(this).next().children().eq(1).click(function(){
				$('.view2').click();
			});
			$(this).next().children().eq(2).click(function(){
				$('.view3').click();
			});
		}
		if($(this).attr('id')=='menu2'){
			$(this).next().children().eq(0).click(function(){
				 $('#play').click();
			});
			$(this).next().children().eq(1).click(function(){
				$('.next').click();
			});
			$(this).next().children().eq(2).click(function(){
				$('.previous').click();
			});
			$(this).next().children().eq(3).click(function(){
				 $('#shuffle_p').click();
			});
			$(this).next().children().eq(4).click(function(){
				$('#repeat_o').click();
			});
			$(this).next().children().eq(5).click(function(){
				$('#repeat_p').click();
			});
		}
		if($(this).attr('id')=='menu3'){
			$(this).parent('li').css("float","right");
			$(this).parent('li').css("margin-right","10px");
			$(this).next('div').children().css("width",($.browser.safari)?"67px":"65px");
			$(this).next('div').css("margin-left",($.browser.safari)?"-43px":"-41px");
			$(this).next().children().eq(0).click(function(){
				osx_create($('#faq_list').html());
			});
			$(this).next().children().eq(1).click(function(){
				osx_create($('#about_us').html());
			});
		}
		if($(this).attr('id')=='menu4'){ 
			$(this).next().children('a:last-child').click(function(){
				$.get("theme.html", function(data){
					osx_create(data);
					if(theme._buttons)	theme._buttons = getHex(theme._buttons);
					if(theme._backgrounds)	theme._backgrounds = getHex(theme._backgrounds);
					if(theme._other) theme._other = getHex(theme._other);
					var lastPkr = null;
					var opts = {
						caller:null,
						color:theme._buttons,
						eventName :'click',
						onShow:function(pkr){
							if(lastPkr) $(lastPkr).hide();
							lastPkr = pkr;
							opts.caller = this;
							$(pkr).hover(function(){},function(){$(opts.caller).ColorPickerHide()});
						},
						onChange:function(hsb, hex, rgb, el) {
							$(opts.caller).css('backgroundColor','#'+hex);
						},
						onSubmit: function(hsb, hex, rgb, el) {
							$(opts.caller).css('backgroundColor','#'+hex);
							$(opts.caller).ColorPickerHide();
						}
					}
					$('.pikr').eq(0).ColorPicker(opts);
					$('.pikr').eq(0).css('backgroundColor',opts.color);
					opts.color = theme._backgrounds;
					$('.pikr').eq(1).ColorPicker(opts);
					$('.pikr').eq(1).css('backgroundColor',opts.color);
					$('.pikr').eq(1).ColorPickerSetColor(opts.color);
					opts.color = theme._other;
					$('.pikr').eq(2).ColorPicker(opts);
					$('.pikr').eq(2).css('backgroundColor',opts.color);
					$('#apply').click(function(){
						theme.set(
							$('.pikr').eq(0).css("backgroundColor"),
							$('.pikr').eq(1).css("backgroundColor"),
							$('.pikr').eq(2).css("backgroundColor")
						);
						if ($('#saveTheme').attr('checked')) {
							setTimeout("saveTheme()",10*1000)
						}
					});
				});
			});
		}
		//pikr
		$(this).next('div').css("opacity","0.97");
	});
	var hideOverlay;
	$('#nav li a').hover(function(){
			$('#transparentOverlay').show();			
			 },
			 function(){
			 });
	$('#nav ul').hover(function(){
			 },
			 function(){
			 $('#transparentOverlay').hide();

			 });
			 
			 				
	$('#nav a.nav').hover(function(){

				clearTimeout(wait_a_second);
				if($(this).next().css("display")=="none"){
						$(this).next().slideDown("fast");
						$(this).css("background-color",color.init(getHex(theme._backgrounds)).alter(menuHoverColorAltering).hex);
						$(this).children('span').css("background","url(../images/nav_hover.gif) no-repeat top center");
				}
				if(currNav)
					if(currNav.attr('id')!=$(this).attr('id')){
						currNav.next().slideUp("fast");
						currNav.css("background","none");
						currNav.children('span').css("background","none");
					}
				currNav = $(this);
			},function(){
				n=$(this);
				function out(){
					n.next().slideUp('fast',function(){
						n.css("background","none");
						n.children('span').css("background","none");
							
					});
					
				}
				wait_a_second = window.setTimeout(out,100);
			});
	$('.subnav a ').click(function(){
		$(this).parent().slideUp('fast',function(){
						$(this).prev().css("background","none");
						$(this).prev().children('span').css("background","none");
					});
	})
	$('.subnav').hover(function(){	
				clearTimeout(wait_a_second);
				$(this).prev().css("background-color",color.init(getHex(theme._backgrounds)).alter(menuHoverColorAltering).hex);
				$(this).prev().children('span').css("background","url(../images/nav_hover.gif) no-repeat top center");
			},function(){
					s = $(this);
				 function hideTheDamnThing(){
					s.slideUp('fast',function(){
						s.prev().css("background","none");
						s.prev().children('span').css("background","none");
					});

				}
				 wait_a_second = window.setTimeout(hideTheDamnThing,150);
			});
	$('.subnav a').each(function(){
		if($(this).hasClass("hr")){
			$(this).prev('a').css("padding-bottom","5px");
			$(this).css("padding-top","7px");
		}
	});
	//grid
	
	//controls
	/*if(!$.browser.msie) $('#controls a').corner("18px");
	else $('#controls a').css("background-color","#1a1a1a");*/
	//$('#controls span').corner("18px");
	  //event dependable
	  $('#controls a').mousedown(function(){
						$(this).children().css("background-position","0px 0px");
						var a = $(this);
						if($.browser.msie){
							$(this).backgroundCanvasPaint(paintBtnDown,($(this).attr("id")=="play")?21:19,theme._buttons);
						}
						});
	  $('#controls a').mouseup(function(){
						$(this).children().css("background-position","0px -13px");
						var a = $(this);
						if($.browser.msie){
							$(this).backgroundCanvasPaint(paintBtn,($(this).attr("id")=="play")?21:19,theme._buttons);
						}
						});

	// marquee
	cssCorner($('#trackinfo'),7);
	cssCorner($('#progress'),6);
	cssCorner($('#title img'),6);
	cssCorner($('#bar_fill'),{tl:3,bl:3});
	/*$('#trackinfo').corner("7px");
	$('#progress').corner("6px");
	$('#title img').corner("5px");
	$('#bar_fill').corner("left 3px");
	//views
	$('#views').corner("5px");
	$('.view1').corner("left 5px keep");
	$('.view3').corner("right 5px keep");*/
	$('.view4').hide();
	var last=$('.view1');
	last.css("background-position","0px 0px");	
	$("#"+last.attr("class")+"_tab").css("visibility","visible");
	$("#"+last.attr("class")+"_tab").css("height","auto");	
	$('#views a').mousedown(function(){	
		if($(this).attr("class")!=last.attr("class") && $('.fplaylist tr').length!=0)
			 $(this).css("background-position","0px -15px");
				});
	var one=true;
	$('#views a').click(function(){
		if(last && $(this).attr("class")!=last.attr("class") && $('.fplaylist tr').length!=0) {
				$(this).css("background-position","0px 0px");
				$("#"+$(this).attr("class")+"_tab").css("visibility","visible");
				$("#"+$(this).attr("class")+"_tab").css("height","auto");
				$("#"+last.attr("class")+"_tab").css("visibility","hidden");
				$("#"+last.attr("class")+"_tab").css("height","0");
				last.css("background-position","0px -24px");
				if($(this).attr("class")=="view3"){
										//move to current playing index on start, but i'm tired now to search it
					if(firstLoadGrid) {
						ContentFlowGlobal.onloadInit();
						flowInited = true;
						firstLoadGrid = false;
					}
					$("#contentFlow").after( $(".flexigrid")[0] );
					scrollIntoView($('.bDiv').get(0));
				}
				if($(this).attr("class")=="view1"){
					$("#view1_tab").append( $(".flexigrid")[0] );
					scrollIntoView($('.bDiv').get(0));
				}
				if($(this).attr("class")=="view2"){
					$('#content').css("background-color","#323232");
					$("#view2_tab").css("height",content_height);
					scrollIntoView($('#view2_tab').get(0));
				}
				updateSize();
				updateSize();
				last = $(this);
				}
			});
	
	$('#buttons a').mousedown(function(){	
		$(this).css("background-position","0px -15px");
				});
	$('#buttons a').mouseup(function(){	
		$(this).css("background-position","0px -24px");
				});

    //searchbox
   /* $('#search').corner('12px');*/
   
	$(".mf a").each(function(){
		if($(this).html()=="Radio"){
			$(this).click(function(){
				$.get("radio.html", function(data){
					osx_create(data);
				});
			});
		}
		if($(this).html()=="Refrain Store"){
			$(this).click(function(){
				$.get("store.html", function(data){
					osx_create(data);
				});
			});
		}
	});
	/*$('#buttons').corner("5px");
	$('#add_p').corner("left 5px keep");
	$('#toggle').corner("right 5px keep");*/
	
	$('#add_p').mousedown(function(){
		//$(this).children().css("margin-top","3px");
		$(this).css("background-position", "0px 0px");
		});
	$('#add_p').mouseup(function(){
		//$(this).children().css("margin-top","2px");
		$(this).css("background-position", "0px -24px");
		//$('#playlist_add_new').slideDown(); 
		osx_create($('#playlist_add_new').html());
		return false;
	});
	
	//non-selectable plugin
	(function($) {
	 $.fn.unselectable = function() {
			return this.each(function() {
				$(this)
					.css('-moz-user-select', 'none')		// FF
					.css('-khtml-user-select', 'none')		// Safari, Google Chrome
					.css('user-select', 'none');			// CSS 3
				if ($.browser.msie) {						// IE
					$(this).each(function() {
						this.ondrag = function() {
							return false;
						};
					});
					$(this).each(function() {
						this.onselectstart = function() {
							return (false);
						};
					});
				} else if($.browser.opera) {
					$(this).attr('unselectable', 'on');
				}
			});
		};
	})(jQuery);

   $('.flexigrid').unselectable();
   $('.bDiv').unselectable();
   $('#footer').unselectable();
   $('#yWrapper').unselectable();
   $('#logo').unselectable();
   //themeing
   theme = {
		_buttons: "#323232",
		_backgrounds:"#111111",
		_other:"#ADD8E6",
		set : function(buttons,backgrounds,other) {
			if(buttons) this._buttons = getHex(buttons);
			if(backgrounds) this._backgrounds = getHex(backgrounds);
			if(other) this._other = getHex(other);
			var ratio=0;
			for(var i=0;i<=2;i++)
				if(color.init(theme._buttons).rgb[i]> (parseFloat(255/2))+30)
					ratio+=color.init(theme._buttons).rgb[i];
				else
					ratio-=color.init(theme._buttons).rgb[i];


			if(ratio>0){
				$('#controls img').each(function(){
					src = this.src;
					
					this.src = ((src.lastIndexOf('_')==-1)?src.substring(0,src.lastIndexOf('.')):src.substring(0,src.lastIndexOf('_')))+'_dark.png';
				});
				$('#views span').css('backgroundImage',"url(../images/views_ico_dark.png)");
				$('#buttons span').css('backgroundImage',"url(../images/btm_icons_dark.png)")
					
			}
			else {
				$('#controls img').each(function(){
					src = this.src
					this.src = ((src.lastIndexOf('_')==-1)?src.substring(0,src.lastIndexOf('.')):src.substring(0,src.lastIndexOf('_')))+'.png';
				});
				$('#views span').css('backgroundImage',"url(../images/views_ico.png)");
				$('#buttons span').css('backgroundImage',"url(../images/btm_icons.png)")
			}
			addCssRule('#controls a',"background-color:"+color.init(this._buttons).alter(buttonsBgColorAltering).hex);
			addCssRule('#controls a:hover',"background-color:"+color.init(this._buttons).complement().hex);
			$('#controls span').css("background-color",this._buttons);
			$('#views').css("background-color",color.init(this._buttons).alter(buttonsBgColorAltering).hex);
			$('#views a').css("background-color",this._buttons);
			addCssRule('#views a',"border:1px solid "+color.init(this._buttons).alter(buttonsBgColorAltering).hex);
			addCssRule('#views a:hover',"border:1px solid "+color.init(this._buttons).complement().hex);
			$('#buttons').css("background-color",color.init(this._buttons).alter(buttonsBgColorAltering).hex);
			$('#buttons a').css("background-color",this._buttons)
			addCssRule('#buttons a',"border:1px solid "+color.init(this._buttons).alter(buttonsBgColorAltering).hex);
			addCssRule('#buttons a:hover',"border:1px solid "+color.init(this._buttons).complement().hex);
			$('#heading').css("background-color",this._backgrounds)
			addCssRule('#heading ul li a',"color:"+color.init(this._backgrounds).alter(60).complement().hex);
			addCssRule('#heading ul li a:hover',"color:"+color.init(this._backgrounds).complement().hex)
			addCssRule('#logo span',"color:"+color.init(this._backgrounds).alter(60).complement().hex);
			addCssRule('#heading .subnav a',"color:"+color.init(this._backgrounds).alter(60).complement().hex);
			addCssRule('#heading .subnav a:hover',"color:"+color.init(this._backgrounds).complement().hex)
			addCssRule('#playlist-info',"color:"+color.init(this._backgrounds).alter(60).complement().hex);
			$('#heading .subnav a').css("background-color",color.init(this._backgrounds).alter(menuHoverColorAltering).hex);
			$('#footer').css("background-color",this._backgrounds);
			$('.barSelected').css("background-color",this._other);
		var flexiSelector = '.flexigrid div.bDiv tr.trSelected:hover td, .flexigrid div.bDiv tr.trSelected:hover td.sorted, .flexigrid div.bDiv tr.trOver.trSelected td.sorted, .flexigrid div.bDiv tr.trOver.trSelected td, .flexigrid tr.trSelected td.sorted, .flexigrid tr.trSelected td';
			addCssRule(flexiSelector,"background-color:"+this._other);
			$('#trackinfo').css("background-color",this._other);
			$('#search').css("background-color",this._other);
			/* -- ie canvas styling --*/		
			if($.browser.msie){
					$(".subnav").show();
					$(".subnav").children("a:last-child").backgroundCanvasPaint(paintNavBtm,12,color.init(theme._backgrounds).alter(menuHoverColorAltering).rgb); //rgb color
					$(".subnav").children("a:first-child").backgroundCanvasPaint(paintNavTr,5,color.init(theme._backgrounds).alter(menuHoverColorAltering).rgb); //rgb color
					$(".subnav").eq(3).children("a:first-child").backgroundCanvasPaint(paintNavTl,5,color.init(theme._backgrounds).alter(menuHoverColorAltering).rgb);//rgb color
					$(".subnav").hide();
					$("#trackinfo").backgroundCanvasPaint(paintTrack,7,this._other);
					$('#search').backgroundCanvasPaint(paintSearch,12,this._other)
					$('#play').backgroundCanvasPaint(paintBtn,21,this._buttons) // hex color
					$('.previous').backgroundCanvasPaint(paintBtn,19,this._buttons)// hex color
					$('.next').backgroundCanvasPaint(paintBtn,19,this._buttons);// hex color
					$("#controls span").css("background","none");
					$('.view3').backgroundCanvasPaint(paintSmallBtnRight,5,this._buttons);
					$('.view1').backgroundCanvasPaint(paintSmallBtnLeftDown,5,this._buttons);
					$('#views').backgroundCanvasPaint(paintSmallBtnBg,5,color.init(this._buttons).alter(buttonsBgColorAltering).hex);
					$('#toggle').backgroundCanvasPaint(paintSmallBtnRight,5,this._buttons);
					$('#add_p').backgroundCanvasPaint(paintSmallBtnLeft,5,this._buttons);
					$('#buttons').backgroundCanvasPaint(paintSmallBtnBg,5,color.init(this._buttons).alter(buttonsBgColorAltering).hex);
					$("#controls a").hover(function(){
						$(this).backgroundCanvasPaint(paintBtnHover,($(this).attr("id")=="play")?21:19,theme._buttons);
					},function(){
						$(this).backgroundCanvasPaint(paintBtn,($(this).attr("id")=="play")?21:19,theme._buttons);
					});
			}
			$.post(
				base_url + 'ajax.php?do=set_theme',
				{buttons: this._buttons, backgrounds: this._backgrounds, other: this._other},
				function (o) {
					if (o.success) {

					} else {

					}
				},
				'json'
			);
		}
	}   

	theme.set('#231F20','#1c1c1c','#ADD8E6');

    //sidebar
	var list;
	$('#scrollable ul li a').click(function(){
			$(this).parent().css('background','url(../images/ul_bg.png) repeat-x '+theme._other);
			if(!$(this).parent().hasClass('barSelected')) $(this).parent().addClass('barSelected');
			$.cookie("curr_list",$(this).text(),{ expires: 31 }); 
			$(this).css('color','#fff');
			if(list && list.html()!=$(this).html()){ 
				list.parent().css('background','none');
				list.css('color','#000');
				list.parent().removeClass('barSelected');
			}
			list= $(this);
		});
	if($.cookie("curr_list")) 
		$("#scrollable li a").each(function(){
			if($.cookie("curr_list")==$(this).text()){
				$(this).parent().css('background','url(../images/ul_bg.png) repeat-x '+theme._other);
				if(!$(this).parent().hasClass('barSelected')) $(this).parent().addClass('barSelected');
				$(this).css('color','#fff');
				list=$(this);
			}
		});

});
var OSX = {
		container: null,
		open: function (d) {
			var self = this;
			self.container = d.container[0];
			d.overlay.fadeIn('fast', function () {
				$("#osx-modal-content", self.container).show();
				var title = $("#osx-modal-title", self.container);
				title.show();
				d.container.slideDown('fast', function () {
					setTimeout(function () {
						var h = $("#osx-modal-data", self.container).height()
							+ title.height()
							+ 20; // padding
						d.container.animate(
							{height: h}, 
							100,
							function () {
								$("div.close", self.container).show();
								$("#osx-modal-data", self.container).show();
							}
						);
					}, 300);
				});
			})
		},
		close: function (d) {
			var self = this;
			d.container.animate(
				{top:"-" + (d.container.height() + 20)},
				300,
				function () {
					self.close(); // or $.modal.close();
				}
			);
		}
	};

var activeIE=false;
function IECorners(){
	$(".subnav").show();
	addCorner($(".subnav").children("a:last-child"),paintNavBtm,12,color.init(theme._backgrounds).alter(menuHoverColorAltering).rgb); //rgb color
	addCorner($(".subnav").children("a:first-child"),paintNavTr,5,color.init(theme._backgrounds).alter(menuHoverColorAltering).rgb); //rgb color
	$(".subnav").eq(3).children("a:first-child").backgroundCanvasPaint(paintNavTl,5,color.init(theme._backgrounds).alter(menuHoverColorAltering).rgb);//rgb color
	$(".subnav").children("a:last-child").each(function(){
		$this = $(this);
		if($this.hasClass('hr'))
			$this.css("border-top","2px solid #646464");
	});
	$(".subnav").hide();
	addCorner($("#trackinfo"),paintTrack,7,theme._other);
	addCorner($('#search'),paintSearch,12,theme._other)
	addCorner($('#play'),paintBtn,21,theme._buttons) // hex color
	addCorner($('.previous'),paintBtn,19,theme._buttons)// hex color
	addCorner($('.next'),paintBtn,19,theme._buttons);// hex color
	$("#controls span").css("background","none");
	$('.view3').css({height:'25px',border:'none',width:'27px'}).children('span').css({marginTop:"9px",marginLeft:"8px"});
	$('.view1').css({height:'25px',border:'none',width:'27px'}).children('span').css({marginTop:"9px",marginLeft:"8px"});
	addCorner($('.view3'),paintSmallBtnRight,5,theme._buttons);
	addCorner($('.view1'),paintSmallBtnLeftDown,5,theme._buttons);
	addCorner($('#views'),paintSmallBtnBg,5,color.init(theme._buttons).alter(buttonsBgColorAltering).hex);
	addCorner($('#toggle'),paintSmallBtnRight,5,theme._buttons);
	addCorner($('#add_p'),paintSmallBtnLeft,5,theme._buttons);
	addCorner($('#buttons'),paintSmallBtnBg,5,color.init(theme._buttons).alter(buttonsBgColorAltering).hex);
	$("#controls a").hover(function(){
		$(this).backgroundCanvasPaint(paintBtnHover,($(this).attr("id")=="play")?21:19,theme._buttons);
	},function(){
		$(this).backgroundCanvasPaint(paintBtn,($(this).attr("id")=="play")?21:19,theme._buttons);
	});
	activeIE = true;
}

function osx_create(content) {
	$('#osx-modal-data').html(content);
	$("#osx-modal-content").modal({
	overlayId: 'osx-overlay',
	containerId: 'osx-container',
	closeHTML: '<div class="close"><a href="#" class="simplemodal-close">x</a></div>',
	minHeight:80,
	opacity:65, 
	position:['0',],
	overlayClose:false,
	onOpen:OSX.open,
	onClose:OSX.close
	});
}