//move images and rectangles up 70 pixels

//top image needs to go to bottom

//any with a canvas.top>200 are not visible

var topRow=0;
var aniDone=1;
var dtRowIndex=0;
var firstMove=1;
var dbImageCount=0;
var dbCallSender;
var MaxImageVal;

function CacheImagesfromDB(sender)
{
dbCallSender=sender;
GetImagesfromDB(); //webservice call
}

function GetXAML(sender)
{
var imageid=sender.Name.substring(5);
GetInkXAMLfromDB(imageid,"inkPresenterElement");
}
function SetDBImageCount(count)
{
dbImageCount=count * 1; //multiply by one to force to a numeric value
BuildFiveRows(dbCallSender);
}

//-------------------------------------------------------------------------

function BuildFiveRows(sender)
{
//dtRowIndex is datarows. There are 4 datarows in each row of images to be displayed

var XAMLString='<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >';
var i=dtRowIndex;
var lastImage=false;
var calcMax=dbImageCount-1
//I need to determine the last image using FULL rows. If there are 23 images, I need to round it up to 24 (divisible by 4)
maxImageVal=calcMax + (1-((calcMax/4) - Math.floor(calcMax/4)))*4;

//maxRows is needed if there are less than 4 rows worth of images total
maxRowsVal=maxImageVal/4
if (maxRowsVal>4)
  maxRowsVal=5




//GET PREVIOUS ROW FOR scrolling back

//     XAMLString+='<Canvas Opacity="0" x:Name="ImagesRow0" Canvas.Top="-70" Height="70">';

//   for (idtRow = 0; idtRow <=3; idtRow++)
//   {
//     if ((maxImageVal-3+idtRow)<dbImageCount)
//     {
//		XAMLString+='<Rectangle Fill="#BFBFCFE8" Stroke="#FF000000" RadiusX="10" RadiusY="10" Width="60" Height="60" Canvas.Left="' + ((70*idtRow)+10) + '" Canvas.Top="0" StrokeThickness="0" />';
//		XAMLString+='<Image x:Name="image' + i + '" Width="50" Height="50" Canvas.Top="5" Source="http://localhost:53315/Handler1.ashx?imagePosition=' + (maxImageVal-3+idtRow) + '" Stretch="Fill" Canvas.Left="' + ((70*idtRow)+15) + '" MouseLeftButtonDown="GetXAML"/>';
//     }
//     i+=1;
//   }
//	XAMLString+='</Canvas>';
//  

//GET FOUR DIPLAY ROWS PLUS ROW to scroll forward
 for (var iviewerRow = 0; iviewerRow<maxRowsVal; iviewerRow++)
 {
   if (iviewerRow<4)
     XAMLString+='<Canvas  x:Name="ImagesRow' + iviewerRow + '" Canvas.Top="' + (10 + (70*(iviewerRow))) + '" Height="70">';
   else //needs to be NOT visible
     XAMLString+='<Canvas Opacity="0" x:Name="ImagesRow' + iviewerRow + '" Canvas.Top="' + (10 + (70*(iviewerRow))) + '" Height="70">';

   for (idtRow = 0; idtRow <=3; idtRow++)
   {
     if (i<dbImageCount)
     {
		XAMLString+='<Rectangle Fill="#BFBFCFE8" Stroke="#FF000000" RadiusX="10" RadiusY="10" Width="60" Height="60" Canvas.Left="' + ((70*idtRow)+10) + '" Canvas.Top="0" StrokeThickness="0" />';
		XAMLString+='<Image x:Name="image' + i + '" Width="50" Height="50" Canvas.Top="5" Source="Handler1.ashx?imagePosition=' + i + '" Stretch="Fill" Canvas.Left="' + ((70*idtRow)+15) + '" MouseLeftButtonDown="GetXAML"/>';
     }
     i+=1;
   }
	XAMLString+='</Canvas>';
  if (i>=maxImageVal)
   i=0;
  }

 
XAMLString+='</Canvas>';
		
		var imageRow= wpf.content.createFromXaml(XAMLString);
		var viewer=sender.findname("MiniViewerCanvas");
		viewer.Children.Clear();
		viewer.Children.Add(imageRow);
		
//if there are more than 16 images, show the MORE arrow		
		
		if (dbImageCount>16)
		sender.findname("morebutton").Visibility="Visible";
		else
		sender.findname("morebutton").Visibility="Collapsed";

}
//-------------------------------------------------------------------------




//-------------------------------------------------------------------------

function AdvanceImagesUp(sender,args)
{
   //build current rows here
  BuildFiveRows(sender);
  AdvanceImages(sender,args,true) ;
if (dtRowIndex+4> maxImageVal)
  dtRowIndex=0;
  else
  dtRowIndex+=4;
   }    
function AdvanceImagesDown(sender,args)
{
   AdvanceImages(sender,args,false) 
   dtRowIndex-=4;
}    
//-------------------------------------------------------------------------

function AdvanceImages(sender,args,forward)
{
  var dir;
 if (aniDone==1)
 {
    aniDone=0;        

    if (forward==true)
    {
      dir="_UP";
      sender.findname("MoveImageStoryboardUP").stop();
    }        
    else
    {
      dir="_DOWN";
      sender.findname("MoveImageStoryboardDOWN").stop();
    }
    var imageCount=20;
    var lastRowCanvasTop=(Math.abs(imageCount/4)-1)*70;
    var totalRows=Math.abs(imageCount/4);
    var ani0=sender.findname("MoveTopRow" + dir);
    var ani0Fade=sender.findname("MoveTopRowFade"+ dir);
    var ani1=sender.findname("MoveFirstRow"+ dir);
    var ani2=sender.findname("MoveSecondRow"+ dir);
    var ani3=sender.findname("MoveThirdRow"+ dir);
    var ani4=sender.findname("MoveFourthRow"+ dir);
    var ani4Fade=sender.findname("MoveFourthRowFade"+ dir);
    //move top row to end
    var MoveToEnd=sender.findname("ImagesRow" + topRow);

    //move next four rows up or down

    //defaults
    if (forward==true)
    {var newFirst= topRow+1;
    var newSecond = topRow+2;
    var newThird = topRow+3;
    var newFourth = topRow+4;
    }
    else
    {var newFirst= topRow;
    var newSecond = topRow+1;
    var newThird = topRow+2;
    var newFourth = topRow+3;
    }


    if (firstMove==1)
    {
    var Row5=sender.findname("ImagesRow4");
    Row5.Opacity=1;
    firstMove=0;
    }
    

    if (forward==true)
    {ani0["Storyboard.TargetName"]="ImagesRow" + topRow;
    ani0Fade["Storyboard.TargetName"]="ImagesRow" + topRow;}
    else
    {ani0["Storyboard.TargetName"]="ImagesRow" + (topRow + 4);
    ani0Fade["Storyboard.TargetName"]="ImagesRow" + (topRow+4);}
    

    ani1["Storyboard.TargetName"]="ImagesRow" + newFirst;
    ani2["Storyboard.TargetName"]="ImagesRow" + newSecond;  //make sure it's not > totalRows
    ani3["Storyboard.TargetName"]="ImagesRow" + newThird;
    if (totalRows>4)
    {
    ani4["Storyboard.TargetName"]="ImagesRow" + newFourth;
    ani4Fade["Storyboard.TargetName"]="ImagesRow" + newFourth;
    }
    else
    {
    ani4["Storyboard.TargetName"]="ImagesRow" + topRow;
    ani4Fade["Storyboard.TargetName"]="ImagesRow" + newFourth;
    }
    if (forward==true)
        sender.findname("MoveImageStoryboardUP").begin();
    else
        sender.findname("MoveImageStoryboardDOWN").begin();


    }
}
//-------------------------------------------------------------------------


//-------------------------------------------------------------------------
function GetInkData(imageRowID)
{
//pass rowid to webservice
//it will find the imageid for that row and then get that image from the database
}
//-------------------------------------------------------------------------


//-------------------------------------------------------------------------
function StoryBoardStop(sender,args)
{
 //sender.findname("MoveImageStoryboard").stop();
aniDone=1;
}
//-------------------------------------------------------------------------