var imf = function () {
	var lf = 0;
	var instances = [];
	function getElementsByClass (object, tag, className) {
		var o = object.getElementsByTagName(tag);
		for ( var i = 0, n = o.length, ret = []; i < n; i++)
			if (o[i].className == className) ret.push(o[i]);
		if (ret.length == 1) ret = ret[0];
		return ret;
	}
	function addEvent (o, e, f) {
		if (window.addEventListener) o.addEventListener(e, f, false);
		else if (window.attachEvent) r = o.attachEvent('on' + e, f);
	}
	function createReflexion (cont, img) {
		var flx = false;
		if (document.createElement("canvas").getContext) {
			flx = document.createElement("canvas");
			flx.width = img.width;
			flx.height = img.height;
			var context = flx.getContext("2d");
			context.translate(0, img.height);
			context.scale(1, -1);
			context.drawImage(img, 0, 0, img.width, img.height);
			context.globalCompositeOperation = "destination-out";
			var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
			gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
			gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
			context.fillStyle = gradient;
			context.fillRect(0, 0, img.width, img.height * 2);
		} else {
			/* ---- DXImageTransform ---- */
			flx     = document.createElement('img');
			flx.src = img.src;
			flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
							   (img.height * .25) + ')';
		}
		/* ---- insert Reflexion ---- */
		flx.style.position = 'absolute';
		flx.style.left     = '-1000px';
		cont.appendChild(flx);
		return flx;
	}
	/* //////////// ==== ImageFlow Constructor ==== //////////// */
	function ImageFlow(oCont, size, zoom, border) {
		this.diapos     = [];
		this.scr        = false;
		this.size       = size;
		this.zoom       = zoom;
		this.bdw        = border;
		this.oCont      = oCont;
		this.oc         = document.getElementById(oCont);
		this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
		this.text       = getElementsByClass(this.oc,   'div', 'text');
		this.title      = getElementsByClass(this.text, 'div', 'title');
		this.legend     = getElementsByClass(this.text, 'div', 'legend');
		this.bar        = getElementsByClass(this.oc,   'img', 'bar');
		this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
		this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
		this.arL2       = getElementsByClass(this.oc,   'img', 'arrow-left2');
		this.arR2       = getElementsByClass(this.oc,   'img', 'arrow-right2');
		this.bw         = this.bar.width;
		this.alw        = this.arL.width - 5;
		this.arw        = this.arR.width - 5;
		this.bar.parent = this.oc.parent  = this;
		this.arL.parent = this.arR.parent = this;
		this.arL2.parent = this.arR2.parent = this;
		//this.view       = this.back       = -1;
		this.resize();
		this.oc.onselectstart = function () { return false; }
		/* ---- create images ---- */
		var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
		this.NF = img.length;

		//图片初始位置定位
		this.view       = this.back       = parseInt(this.NF/2);
		InitGroupIdUsed=0
		for (var i = 0, o; o = img[i]; i++) {
			this.diapos[i] = new Diapo(this, i,
										o.rel,
										o.title || '- ' + i + ' -',
										o.innerHTML || o.rel,
										o.href || '',
										o.target || '_self',
										o.getAttribute("gi"),
										o.getAttribute("ai"),
										o.getAttribute("gid")
			);
			//if(parseInt(o.getAttribute("gid"))==parseInt(getUrlArg("groupid"))){this.view= this.back = i}
			if(parseInt(o.getAttribute("gid"))==InitGroupId && InitGroupIdUsed!=1){this.view= this.back = i;InitGroupIdUsed=1;}
		}
		while(this.diapos[this.view].title=="divphoto"){
			this.view       = this.back       = this.view+1
		}
		this.diapos[this.view].img.className = 'diapo useing';
		this.diapos[this.view].listen=1

		//mp3播放器列表初始化
		albumclick(this.diapos[this.view].url,this.diapos[this.view].gi,this.diapos[this.view].ai)

		/* ==== add mouse wheel events ==== 
		if (window.addEventListener)
			this.oc.addEventListener('DOMMouseScroll', function(e) {
				this.parent.scroll(-e.detail);
			}, false);
		else this.oc.onmousewheel = function () {
			this.parent.scroll(event.wheelDelta);
		}
		*/

		/* ==== scrollbar drag N drop ==== */
		this.bar.onmousedown = function (e) {
			if (!e) e = window.event;
			var scl = e.screenX - this.offsetLeft;
			var self = this.parent;
			/* ---- move bar ---- */
			this.parent.oc.onmousemove = function (e) {
				if (!e) e = window.event;
				self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
				self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
				if (self.view != self.back) self.calc();
				return false;
			}
			/* ---- release scrollbar ---- */
			this.parent.oc.onmouseup = function (e) {
				self.oc.onmousemove = null;
				return false;
			}
			return false;
		}
		/* ==== right arrow ==== */
		this.arR2.onclick = this.arR2.ondblclick = function () {
			if (this.parent.view < this.parent.NF - 1)
				if(IsClick==0){
					if(this.parent.diapos[this.parent.view+1].title=="divphoto")this.parent.view++
					this.parent.calc(1);
					var i = this.parent.diapos.length;
					while (i--){
						if (this.parent.diapos[i].N == this.parent.view){
							if(this.parent.diapos[i].title=="divphoto")i++
							for(di=0;di<this.parent.diapos.length;di++){
								this.parent.diapos[di].listen=0
								this.parent.diapos[di].img.className="diapo"
							}
							this.parent.diapos[i].img.className="diapo useing"
							this.parent.diapos[i].listen=1
							albumclick(this.parent.diapos[i].url,this.parent.diapos[i].gi,this.parent.diapos[i].ai);
						}
					}
					IsClick=1
				}
			}
		/* ==== Left arrow ==== */
		this.arL2.onclick = this.arL2.ondblclick = function () {
			if (this.parent.view > 0)
				if(IsClick==0){
					if(this.parent.diapos[this.parent.view-1].title=="divphoto")this.parent.view--
					this.parent.calc(-1);
					var i = this.parent.diapos.length;
					while (i--){
						if (this.parent.diapos[i].N == this.parent.view){
							if(this.parent.diapos[i].title=="divphoto")i--
							for(di=0;di<this.parent.diapos.length;di++){
								this.parent.diapos[di].listen=0
								this.parent.diapos[di].img.className="diapo"
							}
							this.parent.diapos[i].img.className="diapo useing"
							this.parent.diapos[i].listen=1
							albumclick(this.parent.diapos[i].url,this.parent.diapos[i].gi,this.parent.diapos[i].ai);
						}
					}
					IsClick=1
				}
		}
		/* ==== right arrow2 ==== */
		this.arR.onclick = this.arR.ondblclick = function () {
			if (this.parent.view < this.parent.NF - 1)
					this.parent.calc(1);
			}
		/* ==== Left arrow2 ==== */
		this.arL.onclick = this.arL.ondblclick = function () {
			if (this.parent.view > 0)
					this.parent.calc(-1);
		}
	}
	/* //////////// ==== ImageFlow prototype ==== //////////// */
	ImageFlow.prototype = {
		/* ==== targets ==== */
		calc : function (inc) {
			if (inc) this.view += inc;
			var tw = 0;
			var lw = 0;
			var o = this.diapos[this.view];
			if (o && o.loaded) {
				/* ---- reset ---- */
				var ob = this.diapos[this.back];
				if (ob && ob != o) {
					if(ob.listen!=1){
						ob.img.className = 'diapo';
					}
					//alert(ob.listen)
					ob.z1 = 1;
				}
				/* ---- update legend ---- */
				this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
				this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
				/* ---- update hyperlink ---- */
				if (o.url) {
					//o.img.className = 'diapo link';
					window.status = 'hyperlink: ' + o.url;
				} else {
					o.img.className = 'diapo';
					window.status = '';
				}
				/* ---- calculate target sizes & positions ---- */
				o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
				var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
				var x = x0 + o.w1 + this.bdw;
				for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
					if (o.loaded) {
						o.x1 = x;
						o.w1 = (this.ht / o.r) * this.size;
						x   += o.w1 + this.bdw;
						tw  += o.w1 + this.bdw;
					}
				}
				x = x0 - this.bdw;
				for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
					if (o.loaded) {
						o.w1 = (this.ht / o.r) * this.size;
						o.x1 = x - o.w1;
						x   -= o.w1 + this.bdw;
						tw  += o.w1 + this.bdw;
						lw  += o.w1 + this.bdw;
					}
				}
				/* ---- move scrollbar ---- */
				if (!this.scr && tw) {
					var r = (this.ws - this.alw - this.arw - this.bw) / tw;
					this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
				}
				/* ---- save preview view ---- */
				this.back = this.view;
			}
		},
		/* ==== mousewheel scrolling ==== */
		scroll : function (sc) {
			if (sc < 0) {
				if (this.view < this.NF - 1) this.calc(1);
			} else {
				if (this.view > 0) this.calc(-1);
			}
		},
		/* ==== resize  ==== */
		resize : function () {
			this.wh = this.oc.clientWidth;
			this.ht = this.oc.clientHeight;
			this.ws = this.scrollbar.offsetWidth;
			this.calc();
			this.run(true);
		},
		/* ==== move all images  ==== */
		run : function (res) {
			var i = this.NF;
			while (i--) this.diapos[i].move(res);
		}
	}
	/* //////////// ==== Diapo Constructor ==== //////////// */
	Diapo = function (parent, N, src, title, text, url, target, gi, ai, gid) {
		this.id            = "diapo"+N;
		this.parent        = parent;
		this.loaded        = false;
		this.title         = title;
		this.text          = text;
		this.url           = url;
		this.target        = target;
		this.N             = N;
		this.gi            = gi;
		this.ai            = ai;
		this.gid            = gid;
		this.img           = document.createElement('img');
		this.img.src       = src;
		this.img.parent    = this;
		this.img.className = 'diapo';
		this.x0            = 0//this.parent.oc.clientWidth;
		this.x1            = this.x0;
		this.w0            = 0;
		this.w1            = 0;
		this.z1            = 1;
		this.listen        = 0;
		this.img.parent    = this;
		//alert(this.img.width)
		if(this.title!="divphoto"){
			this.img.onclick   = function() { this.parent.click();}
			this.img.ondblclick   = function() { this.parent.dbclick();}
		}else{
			this.img.className = 'nodiapo';
		}
		this.parent.oc.appendChild(this.img);
		/* ---- display external link ---- */
		if (url) {
			this.img.onmouseover = function (event) {
				getMusicList(event,gi,ai)
				//this.className = 'diapo link';
			}
			this.img.onmouseout  = function () {
				//this.className = 'diapo';
				albumdetail.style.display='none'
	
			}
		}
	}
	/* //////////// ==== Diapo prototype ==== //////////// */
	Diapo.prototype = {
		/* ==== HTML rendering ==== */
		move : function (res) {
			if (this.loaded) {

				var sx = this.x1 - this.x0;
				var sw = this.w1 - this.w0;
				if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
					/* ---- paint only when moving ---- */
					this.x0 += sx * .1;
					this.w0 += sw * .1;
					if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
						/* ---- paint only visible images ---- */
						this.visible = true;
						this.img.style.display = ''
						var o = this.img.style;
						var h = this.w0 * this.r;
						/* ---- diapo ---- */
						o.left   = Math.round(this.x0) + 'px';
						o.bottom = Math.floor(this.parent.ht * .25) + 'px';
						o.width  = Math.round(this.w0) + 'px';
						o.height = Math.round(h) + 'px';
						/* ---- reflexion ---- */
						if (this.flx) {
							var o = this.flx.style;
							o.left   = Math.round(this.x0) + 'px';
							o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
							o.width  = Math.round(this.w0) + 'px';
							o.height = Math.round(h) + 'px';
						}
					} else {
						/* ---- disable invisible images ---- */
						if (this.visible) {
							this.visible = false;
							this.img.style.width = '0px';
							this.img.style.display = 'none'
							if (this.flx) this.flx.style.width = '0px';
						}
					}
				}
			} else {
				/* ==== image onload ==== */
				if (this.img.complete && this.img.width) {
					/* ---- 取得图像大小 get size image ---- */
					if(this.title!="divphoto"){
						this.iw     = 115//this.img.width;
						this.ih     = 115//this.img.height;
					}else{
						this.iw     = 8//this.img.width;
						this.ih     = 135//this.img.height;
					}
					this.r      = this.ih / this.iw;
					this.loaded = true;
					/* ---- create reflexion ---- */
					this.flx    = createReflexion(this.parent.oc, this.img);
					if (this.parent.view < 0) this.parent.view = this.N;
					this.parent.calc();
				}
			}
		},
		/* ==== diapo onclick ==== */
		click : function () {
			if (this.parent.view == this.N) {
				/* ---- click on zoomed diapo ---- */
				if (this.url) {
					/* ---- 打开图片链接 open hyperlink ---- */
					//window.open(this.url, this.target);
					if(IsClick==0){
						albumclick(this.url,this.gi,this.ai);
						for(i=0;i<this.parent.diapos.length;i++){
							this.parent.diapos[i].listen=0
							this.parent.diapos[i].img.className="diapo"
						}
						this.img.className="diapo useing"
						this.listen=1
						IsClick=1
					}
				} else {
					/* ---- zoom in/out ---- */
					this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
					this.parent.calc();
				}
			} else {
				/* ---- select diapo ---- */
				this.parent.view = this.N;
				this.parent.calc();
			}
			return false;
		},
		/* ==== diapo dbonclick ==== */
		dbclick : function () {
			if(IsClick==1){
				albumclick(this.url,this.gi,this.ai);
				for(i=0;i<this.parent.diapos.length;i++){
					this.parent.diapos[i].listen=0
					this.parent.diapos[i].img.className="diapo"
				}
				this.img.className="diapo useing"
				this.listen=1
			}
		}
	}
	/* //////////// ==== public methods ==== //////////// */
	return {
		/* ==== initialize script ==== */
		create : function (div, size, zoom, border) {
			/* ---- instanciate imageFlow ---- */
			 load = function () {
			 if(xmlDocLoaded){
			 //alert("ok")
				var i = instances.length;
				while (i--) if (instances[i].oCont == div) loaded = true;
				var loaded = false;

				if (!loaded) {
					/* ---- push new imageFlow instance ---- */
					instances.push(
						new ImageFlow(div, size, zoom, border)
					);
					/* ---- init script (once) ---- */
					if (!imf.initialized) {
						imf.initialized = true;
						/* ---- window resize event ---- */
						addEvent(window, 'resize', function () {
							var i = instances.length;
							while (i--) instances[i].resize();
						});
						/* ---- stop drag N drop ---- */
						addEvent(document.getElementById(div), 'mouseout', function (e) {
							if (!e) e = window.event;
							var tg = e.relatedTarget || e.toElement;
							if (tg && tg.tagName == 'HTML') {
								var i = instances.length;
								while (i--) instances[i].oc.onmousemove = null;
							}
							return false;
						});
						/* ---- set interval loop ---- */
						setInterval(function () {
							var i = instances.length;
							while (i--) instances[i].run();
						}, 16);
					}

				}
			}else{
				setTimeout(load,100);
			 //alert(xmlDocLoaded)
			}
			}
			/* ---- window onload event ---- */
			//addEvent(window, 'load', function () {load()});
			setTimeout(load,100);//由于firefox的xml读取不同步，所以window.onload完之后，xml读取前已经生成列表，列表没更新
		}
	}
}();

/* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.45, 1.5, 10);

//alert(window.onload)
//专辑列表xml显示
//var url = "http://i.52qpg.com/zone/songlist.jsp?m=getgrouplist&paratype=1&value={datatype:1,offset:1,rownum:100,groupid:1873157}"; 
//var url = "musiclist1.xml"
var url=""
String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); }

var xmlDoc;
var xmlDocLoaded=false;
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');
var ie = (typeof window.ActiveXObject != 'undefined'); 
var Agi=0;
var Aai=0;
var IsInited=0;
var flashObject;
var IsClick=0;
function importXML(file) {
url=file
 if (moz) {
  xmlDoc = document.implementation.createDocument("", "", null);
  //xmldoc.async=false;
  xmlDoc.load(file);
  xmlDoc.onload = createList;

 } else if (ie) {
  xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
  xmlDoc.async = false;
  //while(xmlDoc.readyState != 4) {};
  xmlDoc.onreadystatechange = function(){if(xmlDoc.readyState==4){createList()}}
  xmlDoc.load(file);
 }
}
//importXML("musiclist1.xml");


function createList(){
	var group = xmlDoc.getElementsByTagName('grouplist');
	var groupnum=group.length
	//if(groupnum==0){importXML(file);return false;}
	//alert(groupnum)
	var albumhtml=""
	for(gi=0;gi<groupnum;gi++){
		var album=group[gi].getElementsByTagName("album")
		var albumnum=album.length
		for(ai=0;ai<albumnum;ai++){
			//专辑信息
			var id=album[ai].getAttribute("id")
			var title=album[ai].getAttribute("title")
			var photo=album[ai].getAttribute("photo")
			var url=album[ai].getAttribute("url")
			var good=album[ai].getAttribute("good")
			var bad=album[ai].getAttribute("bad")
			//url=url.replace("&amp;","&")
			albumhtml+='<a rel="'+photo+'" title="'+title+'" href="'+url+'" gi='+gi+' ai='+ai+' gid='+id+'></a>'
			//albumhtml+='<img src="'+photo+'">'
		}
		if(gi<groupnum-1){
			albumhtml+='<a rel="images/albumDiv.gif" title="divphoto"></a>'
		}
	}	
	document.getElementById("xmldata").innerHTML=albumhtml
	xmlDocLoaded=true;
	//alert(albumhtml)
}

function handle_btn_click(evt)
{
    if(evt==null)evt=window.event;//IE
    //处理事件.
    	var tempx=event.clientX
    	alert(tempx)

}
//handle_btn_click();
function getMusicList(event,gi,ai){
	event = event ? event :(window.event ? window.event : null);
	var tempx=event.clientX
	var tempy=event.clientY
	var albumlist=""
	var item=xmlDoc.getElementsByTagName("grouplist")[gi].getElementsByTagName("album")[ai].getElementsByTagName("item")
	var itemnum=item.length
	for(ii=0;ii<itemnum;ii++){
		var id=item[ii].getAttribute("id")
		var artist=item[ii].getAttribute("artist")
		var music=item[ii].getAttribute("music")
		var album=item[ii].getAttribute("album")
			albumlist+="<li><div class='music'>"+(ii+1)+"."+music+"</div><div class='artist'>"+artist+"</div></li>"
	}
	albumlist+="<div style='clear:both'></div>"
	
	//专辑列表信息
	var album=xmlDoc.getElementsByTagName("grouplist")[gi].getElementsByTagName("album")[ai]
	var userid=album.getAttribute("userid")
	var nickname=album.getAttribute("nickname")
	var logo=album.getAttribute("logo")
	var detail=album.getAttribute("detail")
	var listen=album.getAttribute("listen")
	var title=album.getAttribute("title")
	var good=album.getAttribute("good")
	var total=album.getAttribute("total")
	//alert(document.getElementById("albumdetail").style.top)
	document.getElementById("albumcontent").innerHTML=albumlist;
	document.getElementById("DJtitle").innerHTML=title;
	document.getElementById("DJscore").innerHTML=total;
	document.getElementById("albumdetail").style.left=(tempx-100)
	var albumdetailHight=120//parseInt(document.getElementById("albumdetail").clientHeight)
	document.getElementById("albumdetail").style.top=(tempy-albumdetailHight+window.document.body.scrollTop-25)+"px"
	document.getElementById("albumdetail").style.display=""
	//alert(albumdetailHight)
	//alert(document.getElementById("albumdetail").style.top+" : "+tempy+" : "+document.getElementById("albumdetail").clientHeight+" : "+window.document.body.scrollTop)
}

function albumclick(url,gi,ai){
	//flashObject.changealbum("http://58.83.162.137:8181/zone/songlist.jsp?m=getgrouplist&paratype=1&value={datatype:1,offset:1,rownum:100,groupid:1932846}","xxxxxxxxxx",999,111,222,99999)
	if(url && gi>=0 && ai>=0){
		//KingPlayer.changealbum("bcastr2.xml","playlist2.xml")
		var album=xmlDoc.getElementsByTagName("grouplist")[gi].getElementsByTagName("album")[ai]
		var title=album.getAttribute("title")
		var listen=album.getAttribute("listen")
		var good=album.getAttribute("good")
		var bad=album.getAttribute("bad")
		var userid=album.getAttribute("userid")
		var nickname=album.getAttribute("nickname")
		var logo=album.getAttribute("logo")
		var detail=album.getAttribute("detail")
		var listen=album.getAttribute("listen")
		var groupid=album.getAttribute("id")
  	
		Agi=gi
		Aai=ai
		getcommendbygroupid(groupid);
		userActionRecorde();
		//document.getElementById("DJlogoPic").src=logo
		//document.getElementById("DJintro").innerHTML=nickname
		//document.getElementById("DJdetail").innerHTML=detail
  	
		if(IsInited){
			flashObject.changealbum(url,title,listen,good,bad,groupid)
		}else{
			//flashObject.InitLoad(url,title,listen,good,bad,groupid)
			//cmd="flashObject.changealbum('"+url+"','"+title+"',"+listen+","+good+","+bad+","+groupid+")"
			cmd="firstAblum('"+url+"','"+title+"',"+listen+","+good+","+bad+","+groupid+")"
			setTimeout(cmd,1000);
			IsInited=1;
		}
		//alert(url+":"+title+":"+listen+":"+good+":"+bad+":"+groupid)
	}
	setTimeout("IsClick=0",2000)
}

function firstAblum(url,title,listen,good,bad,groupid){
	try {
		flashObject.changealbum(url,title,listen,good,bad,groupid)
	} catch (e) {
		cmd="firstAblum('"+url+"','"+title+"',"+listen+","+good+","+bad+","+groupid+")"
		setTimeout(cmd,1000);
		//alert(11)
	}
}

//取url参数
function getUrlArg(seekArg) { 
	var url= location.href; 
	if (reMatch = url.match(/\?([^#]+)#?/)){ 
		var querystring = reMatch[1]; 
		var args = querystring.split(/&|=/); 
		var arg={}; 
		for(i=0;i<args.length;i+=2) { 
			arg[args[i]]=args[i+1]; 
		} 
		return arg[seekArg]; 
	} 
}


//取得flash的ID，在onload处加此函数
function getFlashObject() {
	if(document.all){
		flashObject=document.getElementById("KingPlayer")
	}else{
		flashObject=document.getElementById("KingPlayer_ff")
	}
}


function arrowClick(btn){
	if(document.all){
		document.getElementById(btn).click();
	}
	else{
		var event = document.createEvent("MouseEvents");
		event.initEvent("click",true,true);  
		document.getElementById(btn).dispatchEvent(event);
	}   
}