/*#############################################################
Name: b_RoundCurve Css圓角框組件--冰極峰
Version: 1.0
Author: biny
Email:szbiny@163.com
冰極峰博客地址：http://www.cnblogs.com/binyong
你可以免費使用和修改代碼，但請保留完整的版權信息。

有如下五種調用方法：
	b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圓角框
	b_RoundCurve("left1","#AE0474","#FB7D3F",3,"h3","","image/bg5.gif");//標題用背景圖片
	b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//標題只用純色背景
	b_RoundCurve("right2","orange","",3,"h3","");//標題不帶背景色
	b_RoundCurve("top","#4C7C9B","",4);//圓角背景圖片
	b_RoundCurve("img","#999","#FFF5FA",2);//圓角IMG圖片
#################################################################*/

/*
  圓角函數--Author: biny
  傳遞7個參數
  1.class類名
  2.邊框色
  3.主體內容區背景色
  4.風格切換方式，從1-5，5種圓角框樣式，針對不同環境使用。
  5.標題的html結構標籤名
  6.標題背景色
  7.標題背景圖片路徑（和6是相斥的，兩個選擇一個）
*/
function b_RoundCurve(classname,b_c,bg_c,state,tagname,titlebg,titleimg){	
	var divs=getElementsByClassName(classname);
	for(var i=0;i<divs.length;i++){
		var obj=divs[i];
		var path=window.location.href;//當前頁面的路徑
		path=path.substring(0,path.lastIndexOf('/')+1);
		//b標籤的通用樣式
		var comstyle="height:1px; font-size:1px;overflow:hidden; display:block;";
		//b標籤的結構樣式
		var b1="margin:0 5px;";//和b8相同
		var b2="margin:0 3px;border-right:2px solid; border-left:2px solid;";//和b7相同
		var b3="margin:0 2px;border-right:1px solid; border-left:1px solid;";//和b6相同
		var b4="margin:0 1px;border-right:1px solid; border-left:1px solid;height:2px;";//和b5相同
		var content="border-right:1px solid;border-left:1px solid;overflow:hidden;"; //position:relative;
		var bgColor="background:"+bg_c+";";//背景色
		
		//img圖片的背景定位
		var imgPos2="background-position:-4px top;";
		var imgPos3="background-position:-2px -1px;";
		var imgPos4="background-position:-1px -2px;";
		var conPos="background-position:left -4px;";
		var imgPos5="background-position:-1px bottom;";
		var imgPos6="background-position:-2px bottom;";
		var imgPos7="background-position:-4px bottom;";
		
		//定義一些變量，這些變量包含不同的樣式，在各種風格中拼合組裝
		var imgBgStr,imgPos3,imgPos4,conPos,imgPos5,imgPos6,imgPos7;
		var b_img2,b_img3,b_img4,b_img5,b_img6,b_img7,c_img,imgurl;
		
		//五種不同的風格切換
		if(state==1){//最通常使用的線框
		    //組裝樣式
			b_img2=bgColor;
			b_img3=bgColor;
			b_img4=bgColor;
			c_img=bgColor;
			b_img5=bgColor;
			b_img6=bgColor;
			b_img7=bgColor;
	    }
		if(state==2){//如果是img圖片方式，則用背景模擬圓角,注意IMG標籤必須顯式指定寬高，否則在safari中顯示不出來。
			var imgObj=divs[i].getElementsByTagName('img')[0];
			var imgheight=imgObj.height;//圖片高度
			var contentheight=imgheight-10;//中間圖片的高度
			var imgweight=imgObj.width;//圖片寬度
			obj.style.width=(imgweight+2)+"px";
			var imgsrc=imgObj.src.replace(path,'');//圖片文件的相當路徑
			var imgBgStr="background:url("+imgsrc+") no-repeat;";
			//組裝樣式
			conPos="height:"+contentheight+"px;width:"+imgweight+"px;overflow:hidden;";	
			
			b_img2=imgBgStr+imgPos2;
			b_img3=imgBgStr+imgPos3;
			b_img4=imgBgStr+imgPos4;
			c_img=conPos;
			b_img5=imgBgStr+"background-position:-1px -"+ (imgheight-4)+"px;";
			b_img6=imgBgStr+"background-position:-2px -"+ (imgheight-2)+"px;";
			b_img7=imgBgStr+"background-position:-4px -"+ (imgheight-1)+"px;";
			imgurl=imgsrc;
		}
		if(state==3){//如果是帶標題方式，又可分為兩種情況，一種直接用背景色，一種是用背景圖片方式
		    var objh3=obj.getElementsByTagName(tagname)[0];
			if(titleimg!=null){//標題帶水平平鋪的背景圖片
				var bgimg="background:url("+titleimg+") repeat-x;";
				b_img2=bgimg+imgPos2;
				b_img3=bgimg+imgPos3;
				b_img4=bgimg+imgPos4;
				//標題欄樣式
				objh3.style.background="url("+titleimg+") repeat-x left -4px";
				objh3.style.borderBottomColor=b_c;
			}
			else{//標題不帶水平平鋪的背景圖片
				var bg_c="background:"+titlebg+";";//背景色
				b_img2=bg_c;
				b_img3=bg_c;
				b_img4=bg_c;
				//標題欄樣式
				objh3.style.background=titlebg;
				objh3.style.borderBottomColor=b_c;
			}
			//組裝樣式
			c_img=bgColor;
			b_img5=bgColor;
			b_img6=bgColor;
			b_img7=bgColor;

		}
		if(state==4){//如果是背景圖片方式，則。。。
			//先從樣式表中獲取背景圖片的樣式,要求加入圖片的容器明確定義寬度和高度，和背景圖片，這是用在JS用來搜尋的依據。
			var bgimg=getStyle(obj,"backgroundImage");
			var bgWidth=getStyle(obj,"width");
			bgimg=bgimg.replace(path,"");
			bgimg=bgimg.substring(4,bgimg.length);
			bgimg=bgimg.substring(0,bgimg.length-1);
			var bgimgheight=getStyle(obj,"height");//圖片的高度
			
			bgimgheight=bgimgheight.replace("px","");
			var contentheight=bgimgheight-10;//中間圖片的高度,包含上下邊框2px寬度
			bgWidth=bgWidth.replace("px","");
			bgWidth=bgWidth-2;
			
			bgimg=bgimg.replace("url(\"","");
			bgimg=bgimg.replace("\")","");//獲得背景圖片的全部徑。
			path=path.substring(0,(path.lastIndexOf('/')+1));//頁面地址
			bgimg=bgimg.replace(path,"");
			imgBgStr="background:url("+bgimg+") no-repeat;";
			obj.style.background="none";//將原始的背景圖片隱藏
			//組裝樣式
			b_img2=imgBgStr+imgPos2;
			b_img3=imgBgStr+imgPos3;
			b_img4=imgBgStr+imgPos4;
			c_img=imgBgStr+conPos+"height:"+contentheight+"px;width:"+bgWidth+"px;";
			
			//關鍵代碼，特別是對圖片的定位，需要知道圖片的高度。
			b_img5=imgBgStr+"background-position:-1px -"+ (bgimgheight-4)+"px;";
			b_img6=imgBgStr+"background-position:-2px -"+ (bgimgheight-2)+"px;";
			b_img7=imgBgStr+"background-position:-4px -"+ (bgimgheight-1)+"px;";
		}
		if(state==2 || state==4){
			conDivHeight="";
	    }
		else{
			var H=getStyle(obj,"height");//獲到容器的高度
			H=H.replace("px","");//去掉單位
			conDivHeight="height:"+(H-8)+"px";//容器的高度偽裝成css中的設置的一樣
		}
		/*創建一個容器結構體*/
		var rDivStr="<b style='"+ comstyle+b1+"background:"+b_c+"'></b>";
		rDivStr+="<b style='"+ comstyle+b2+"border-color:"+b_c+";"+b_img2+"'></b>";
		rDivStr+="<b style='"+ comstyle+b3+"border-color:"+b_c+";"+b_img3+"'></b>";
		rDivStr+="<b style='"+ comstyle+b4+"border-color:"+b_c+";"+b_img4+"'></b>";
		rDivStr+="<div style='"+content+"border-color:"+b_c+";"+c_img+"'>";
		rDivStr+="@d_P";
		rDivStr+="</div>";
		rDivStr+="<b style='"+ comstyle+b4+"border-color:"+b_c+";"+b_img5+"'></b>";
		rDivStr+="<b style='"+ comstyle+b3+"border-color:"+b_c+";"+b_img6+"'></b>";
		rDivStr+="<b style='"+ comstyle+b2+"border-color:"+b_c+";"+b_img7+"'></b>";
		rDivStr+="<b style='"+ comstyle+"margin:0 5px;background:"+b_c+"'></b>";
		
		var htmlText=divs[i].innerHTML;
		if(state==2){
			var str1=htmlText.replace("src=\"","src=\"*");
			var strsplit1=str1.split('*')[0];
			var strsplit2=str1.split('*')[1];
			var url=strsplit2.substring(0,strsplit2.indexOf('\"'));
			htmlText=strsplit1+imgurl+"\" style='border:0px;position:absolute;top:-4px;left:0px;'/>";
		}
		rDivStr=rDivStr.replace('@d_P',htmlText);
		divs[i].innerHTML=rDivStr;//替換結構
	}
}

// 說明：準確獲取指定元素 CSS 屬性值
// 此函數的兩個參數，elem為要獲取的對象，name為樣式屬性，如「backgroundColor」
function getStyle( elem, name )
{
	//如果該屬性存在於style[]中，則它最近被設置過(且就是當前的)
	if (elem.style[name])
	{
		return elem.style[name];
	}
	//否則，嘗試IE的方式
	else if (elem.currentStyle)
	{
		return elem.currentStyle[name];
	}
	//或者W3C的方法，如果存在的話
	else if (document.defaultView && document.defaultView.getComputedStyle)
	{
		name = name.replace(/([A-Z])/g,"-$1");
		name = name.toLowerCase();
		//獲取style對象並取得屬性的值(如果存在的話)
		var s = document.defaultView.getComputedStyle(elem,"");
		return s && s.getPropertyValue(name);
	    //否則，就是在使用其它的瀏覽器
	}
	else
	{
		return null;
	}
}

/*根據類名獲得對像
調用方法：var topicnum=getElementsByClassName("classname");
*/
function getElementsByClassName(searchClass, node,tag){  
	if(document.getElementsByClassName){return  document.getElementsByClassName(searchClass)}
	else{        
		node = node || document;        
		tag = tag || "*";        
		var classes = searchClass.split(" "),        
		elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),        
		patterns = [],         
		returnElements = [],        
		current,         
		match;        
		var i = classes.length;       
		while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));}        
		var j = elements.length;       
		while(--j >= 0){            
			current = elements[j];           
			match = false;            
			for(var k=0, kl=patterns.length; k<kl; k++){                
				match = patterns[k].test(current.className);                
				if (!match)  break;           
			} 
			if (match)  returnElements.push(current);        
		}        
		return returnElements;   
	} 
}