var timer =false;
var interval=13;
var move=13;
$(window).resize(function() {
resizeShadow();
});
$(document).ready(function() {
showScrollPanel();
InitDragDrop();
shadowContent();

//////////////////////
$('#CListOpen').click(function() {

if($('#clistContainer').height()>300){
$(".shadowCL").animate({
height:'13px',
top: '162px'
  }, 150, function() {
$(".shadowCL").remove();
$('#CListOpen').removeClass('rotateArrow');
 });
$('#clistContainer').animate({
height:'11px',
    top: '163px'
  }, 250, function() {
 });

}else{
$('#CListOpen').addClass('rotateArrow');
$('#clistContainer').animate({
height:'379px',
    top: '-205px'
  }, 250, function() {
var pos=$('#clistContainer').offset();
var cssO = {
'left':pos.left,
'top':(pos.top+13)+'px',
 }
$('body').append('<div class="shadowCL"></div>');
$(".shadowCL").css(cssO);
 });
}

});
/////////////////////

$("#bottomNavi").css("display","none");
$("#Ccont").css("display","none");
$("#bottomNavi").fadeIn("slow");
$("#Ccont").fadeIn("slow");

$("#ref").css("left","110%");
$("#ref").animate({
    left: '5%'
  }, 1000, 'swing',function() {
showArrow();
 });


rotate = window.setInterval('rotatePic()', '10000');
$('#picture').mouseover(function() {
rotate = window.setInterval('rotatePic()', '10');
 });
$('#arrowLeft').mousedown(function() {
timer = window.setInterval('moveRefC('+move+',"left")', interval);
 });
$('#arrowLeft').mouseup(function() {
window.clearInterval(timer);
});
$('#arrowRight').mousedown(function() {
timer = window.setInterval('moveRefC('+move+',"right")', interval);
});
$('#arrowRight').mouseup(function() {
window.clearInterval(timer);
});
$(document).mousemove(function() {
window.clearInterval(timer);
});
/*shizzlemynizzle*/
$('.toogler').mouseover(function(e) {
checkToogler(e);
});
});
function shadowContent(){
$('body').append('<div id="shadowTop" class="shadowContent"></div><div id="shadowLeft" class="shadowContent"></div><div id="shadowRight" class="shadowContent"></div><div id="shadowBottom" class="shadowContent"></div>');

if($.browser.msie!=true || $.browser.msie==true && $.browser.version>=7){
$('.shadowContent').show();
resizeShadow();
}
}

function resizeShadow(){
/*$('#shadowTop').width($(window).width());
$('#shadowBottom').width($(document).width());
*/
var posNB=$('#bottomNavi').offset();
var posP=$('p').offset();

var checkHeight=(posNB.top+$('#bottomNavi').height());
var checkHeightTagP=(posP.top);
var checkScreen=$('body').height()+'<'+checkHeight+'####'+checkHeightTagP;

if(($('body').height()-10) < checkHeight || checkHeight < checkHeightTagP){
checkHeight=(checkHeight < checkHeightTagP)? checkHeightTagP: checkHeight;
$('#shadowLeft').height(checkHeight+20+'px');
$('#shadowRight').height(checkHeight+20+'px');
$('#container').height(checkHeight+20+'px');

$('#shadowBottom').css('top',(checkHeight-197)+20+'px');
}
//wID(checkScreen);
}
function rotatePic(){
var cssObj = {
'position':'relative',
'left':'-2px',
'top':'0px',
'-moz-transform': 'rotate(4deg)',
'-o-transform': 'rotate(4deg)',
'-ms-transform': 'rotate(4deg)',
'-webkit-transform': 'rotate(4deg)',
'transform': 'rotate(4deg)',
 }
 var cssHObj = {
 'position':'relative',
'left':'0px',
'top':'1px',
 '-moz-transform': 'rotate(4deg)',
 '-o-transform': 'rotate(4deg)',
'-ms-transform': 'rotate(4deg)',
'-webkit-transform': 'rotate(4deg)',
'transform': 'rotate(4deg)'
 }
$("#picture").css(cssObj);
$("#hook").css(cssHObj);
window.clearInterval(rotate);
}
function showArrow(){
var posRef=$('#ref').offset();
var posArrowLeft=$('#arrowLeft').offset();
var posArrowRight=$('#arrowRight').offset();

//alert(posArrowLeft.left+'>'+posRef.left);
if(posArrowLeft.left+51>posRef.left){
$("#arrowLeft").fadeIn("slow");
}else{
$("#arrowLeft").fadeOut("slow");
}
//right
var refContainer=$('#refContainer').width();

var checkRight=posRef.left+$('#ref').width();
//alert(posArrowRight.left+'#'+checkRight);
if(posArrowRight.left < checkRight && refContainer+50<checkRight){
$("#arrowRight").fadeIn("slow");
}else{
$("#arrowRight").fadeOut("slow");
//alert($("#arrowRight").css('display'));
}
}
$(window).resize(function() {
showArrow();
});

function checkToogler(e){
var checkLeft=$(window).width()/5;
var checkRight=$(window).width() - checkLeft;
var mousePos=e.pageX;

var p=45;

$('.arrowToogler').animate({
    left:p+'%',
  }, 10, function() {
  //alert(pos.left);
});
}

function moveRefC(move,direction){
var pos=$('#ref').offset();

if(direction=="right"){
var moveD='-='+move+'';
}else{
var moveD='+='+move+'';
}
$('#ref').animate({
    left:moveD,
  }, 10, function() {
  //alert(pos.left);
  showArrow();

});
}
var scrollPnew;
var prz;
function showScrollPanel(){
var hContainerCList=$('#contentCList').height();
var hCList=$('#custList').height();
prz=Math.round(hCList*100/hContainerCList);
var scrollP=hContainerCList-76;
scrollPnew=Math.round(scrollP*prz/100)-scrollP;
//$('#spMiddle').height(hContainerCList-76);
$('#spMiddle').animate({
    height: scrollPnew
  }, 300, function() {
    // Animation complete.
var cssObj = {
      'height':(scrollPnew+10),
      'top': -(scrollPnew+11)
    }

$('.drag').css(cssObj);

  });

//alert('#');


}



//drag ScrollPane
// this is simply a shortcut for the eyes and fingers
function wID(txt)
{
$('#line').text(txt);
}

var _startY = 0;
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var checkBegin=32;
var checkEnd;
var checkEndF;
var pos=0;
var moveSP=true;

function InitDragDrop()
{
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;

//wID(checkBegin);
}

function OnMouseDown(e)
{
 pos=$('#scrollPanel').position();

	// IE is retarded and doesn't pass the event object
	if (e == null) 
		e = window.event; 
	
	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;
	
	//wID(target.className == 'drag' 
	//	? 'draggable element clicked' 
		//: 'NON-draggable element clicked');

	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null || 
		e.button == 0) && 
		target.className == 'drag')
	{
		// grab the mouse position
		//_startX = e.clientX;
		_startY = e.clientY;
		
		// grab the clicked element's position
		//_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);

		// bring the clicked element to the front while it is being dragged
		//_oldZIndex = target.style.zIndex;
		//target.style.zIndex = 10000;
		
		// we need to access the element in OnMouseMove
		_dragElement = target;
	//wID('(' + _dragElement.style.top + ')'+checkBegin+'>'+pos.top+'#######'+moveSP+'#'+checkEndF+'>='+ (checkEnd-10));

if(moveSP == true){
// tell our code to start moving the element with the mouse
document.onmousemove = OnMouseMove;
}else{
moveSP=false;
document.onmousemove =checkSPpos;
}
//wID('#######'+moveSP+'#');
	
// cancel out any text selections
		document.body.focus();
		
		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };
		
		// prevent text selection (except IE)
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}
function checkSPpos()
{
//var m;
//wID(moveSP+'#'+checkEndF+'>='+ (checkEnd-10));

if(checkEndF >= (checkEnd)){
m=checkEnd-$('#scrollPanel').height();


_dragElement.style.top = (m-scrollPnew-44) + 'px';
$('#scrollPanel').css("top",m-33+'px');
}else{
m=checkBegin-scrollPnew-42;
_dragElement.style.top = m + 'px';
$('#scrollPanel').css("top",checkBegin-31);
}
//wID(checkBegin+' > '+pos.top+'#######'+(m-scrollPnew-44)+'#'+checkEndF+'>='+ (checkEnd));

return moveSP=true;
}
function OnMouseMove(e)
{
var m,p,src;
pos=$('#scrollPanel').position();
checkEnd=$('#containerScrollPanel').height()-31;
checkEndF=pos.top+$('#scrollPanel').height();
//wID(check.top+'>'+(checkBegin.top-5));
if (e == null) 
var e = window.event;
if(checkBegin <= pos.top && moveSP==true && checkEndF < checkEnd){
m=(_offsetY + e.clientY - _startY);
p=m+$('#scrollPanel').height();
_dragElement.style.top = m + 'px';
$('#scrollPanel').css("top",p);
scr=Math.round((p*100/prz)+p);
//wID(p);
$("#contentCList").animate({scrollTop:scr},23);
}
//alert(checkEndF+'>--='+ (checkEnd));


if(checkBegin > pos.top || checkEndF >= checkEnd){   
moveSP=false;	
document.onmousemove =checkSPpos;
}
//wID(checkBegin+' > '+pos.top+'#######'+moveSP+'#'+checkEndF+'>='+ (checkEnd));

//wID('(' + pos.top + '<'+($('#containerScrollPanel').height()-35)+', ' + _dragElement.style.top + ')'+_startY+'#'+checkBegin+' >'+ pos.top);	
}

function OnMouseUp(e)
{
if (_dragElement != null)
{
// we're done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
_dragElement = null;
//wID('mouse up');
}
}