var bIsDragged, iDx, iDy, iPx;

var PackPart=function(){
	
}

PackPart.bInit=false;

PackPart.Init=function(){
	if(this.bInit)
		return;
		
	this.oPtr=document.getElementById('PackPart');
	this.h=this.oPtr.offsetHeight;
	this.dh=108 - this.h;
	this.min_x=this.oPtr.offsetLeft;
	this.max_x=135;
	this.dx=this.max_x - this.min_x;
	this.y=this.oPtr.offsetTop;
	this.dy=-108 - this.y;
	
	this.iTanA=Math.tan(.091);
	this.iTanB=Math.tan(.17);
	
	//~ this.aCornerPos=[0,1,2,3,3,4,5,7,8,9,10,11,12,12,13,14,15,18,19,20,21,22,23,25,26,27,29,30,31,33,35,36,38,40,41,43,45,46,48,50,52,55,59,64];
	this.aCornerPos=[0,1,2,3,3,4,5,7,8,9,10,11,12,12,13,14,15,18,19,20,21,22,23,25,26,27,29];
	
	this.aImages=this.oPtr.getElementsByTagName('img');
	
	this.CreateCorner();
	this.RoundCorner(this.h);
	this.bInit=true;
}

PackPart.CreateCorner=function(){
	var oParent=this.oPtr;
	var _div, _img;
	for(var i=0; i<this.aCornerPos.length; i++){
		_div=document.createElement('div');
		_div.style.clip='rect('+i+'px,67px,'+(i+1)+'px,'+this.aCornerPos[i]+'px)';
		
		_img=document.createElement('img');
		_img.src='./i/e.gif';
		
		_div.appendChild(_img);
		oParent.appendChild(_div);
	}
}

PackPart.RoundCorner=function(iHeight){
	iHeight=Math.round(iHeight);
	var l=this.aImages.length-1;
	do{
		this.aImages[l].style.top=(-iHeight)+'px';
	}while(--l)
}

PackPart.Rag=function(iDelta){
	var _part_dx=Math.min(iDelta, 55);
	var _prc=_part_dx/55;
	
	var _dh=_prc*this.dh + this.h;
	
	this.oPtr.style.left=Math.min(iDelta + this.min_x -9 + _dh*this.iTanB, this.max_x)+'px';
	this.oPtr.style.height=_dh+'px';
	this.oPtr.style.top=((_prc*this.dy + this.y)*(1 - this.iTanA) - 4)+'px';
	
	this.RoundCorner(_dh);
}

var PackTop=function(){
	
}

PackTop.bInit=false;

PackTop.Init=function(){
	if(this.bInit)
		return;
		
	this.oPtr=document.getElementById('PackTop');
	this.width=this.oPtr.offsetWidth;
	this.left=55;
	this.cx=this.left;
	this.cw=this.width;
	this.bInit=true;
}

PackTop.Rag=function(iDelta){
	if((this.cx + iDelta).between(this.left, 187)){
		this.oPtr.style.clip='rect(0px, 141px, 44px, '+(this.cx + iDelta)+'px)';
		PackPart.Rag(this.cx + iDelta - this.left);
	}
}

function _rag(evt){
	if(bIsDragged && (evt=checkEvent(evt))){
		PackTop.Rag(evt.clientX - iDx - iPx);
	}
}

function StartDrag(evt){
	if((evt = checkEvent(evt))){
		var oItem=evt.target;
		do{
			if(oItem.id && oItem.id == 'PackPart')
				break;
		}while(oItem=oItem.parentNode);
		
		var _pos=getAbsolutePos(oItem.parentNode);
		iPx=_pos.x;
		iDx=evt.clientX - _pos.x;
		iDy=evt.clientY - _pos.y;
		PackTop.cx=PackTop.oPtr.offsetLeft;
		PackTop.cw=PackTop.oPtr.offsetWidth;
		bIsDragged=true;
	}
}

function StopDrag(evt){
	bIsDragged=false;
}

addEvent(document, 'mousemove', _rag);
addEvent(document, 'mouseup', StopDrag);
document.ondragenter=document.ondragstart=document.onselect=document.onselectstart=function(){ return !(bIsDragged); }