if (!window.WhirlyThing)
	window.WhirlyThing = {};

WhirlyThing.Scene = function() 
{
}

WhirlyThing.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) 
	{
		this.plugIn = plugIn;
		
        this.rootElement = rootElement;
        
        this.wheel1 = this.rootElement.findName("wheel1");
        this.wheel2 = this.rootElement.findName("wheel2");
        this.clickToSpin = this.rootElement.findName("clickToSpin");
        this.clickToSpin2 = this.rootElement.findName("clickToSpin2");
        this.urlButton1 = this.rootElement.findName("urlButton1");
        this.urlButton2 = this.rootElement.findName("urlButton2");
        this.innerWheel1EndRotation = this.rootElement.findName("innerWheel1EndRotation");
        this.innerWheel2EndRotation = this.rootElement.findName("innerWheel2EndRotation");
        this.tabWheel1EndRotation = this.rootElement.findName("tabWheel1EndRotation");
        this.tabWheel2EndRotation = this.rootElement.findName("tabWheel2EndRotation");
        this.spinInnerWheel1SB = this.rootElement.findName("spinInnerWheel1SB");
        this.spinInnerWheel2SB = this.rootElement.findName("spinInnerWheel2SB");
        this.miniWheel1 = this.rootElement.findName("miniWheel1");
        this.miniWheel2 = this.rootElement.findName("miniWheel2");
        this.flipToWheel1SB = this.rootElement.findName("flipToWheel1SB");
        this.flipToWheel2SB = this.rootElement.findName("flipToWheel2SB");
        this.miniWheel = this.rootElement.findName("miniWheel");
        this.mainCanvas = this.rootElement.findName("mainCanvas");
        this.mainCanvasScale = this.rootElement.findName("mainCanvasScale");
        this.fadeInBoxesSB = this.rootElement.findName("fadeInBoxesSB");
        this.fadeOutBoxesSB = this.rootElement.findName("fadeOutBoxesSB");
        this.ExtrasText = this.rootElement.findName("ExtrasText");
        this.AboutTitle = this.rootElement.findName("AboutTitle");
        this.AboutText = this.rootElement.findName("AboutText");
        this.magGlass1 = this.rootElement.findName("magGlass1");
        this.magGlass2 = this.rootElement.findName("magGlass2");
        this.description = this.rootElement.findName("description");
        this.fadeInDescriptionSB = this.rootElement.findName("fadeInDescriptionSB");
        this.fadeOutDescriptionSB = this.rootElement.findName("fadeOutDescriptionSB");
        this.DescriptionText = this.rootElement.findName("DescriptionText");
        this.pageBrowserControl = this.rootElement.findName("pageBrowserControl");
        this.pageBrowserWindow = this.pageBrowserControl.findName("pageBrowserWindow");
        this.pageBrowser = this.pageBrowserControl.findName("pageBrowser");
        this.pageBrowserSB = this.rootElement.findName("pageBrowserSB");
        this.pageBrowserSBtranslate  = this.rootElement.findName("pageBrowserSBtranslate");
        this.imgleft = this.rootElement.findName("imgleft");
        this.imgright = this.rootElement.findName("imgright");
        this.LoadingSB = this.rootElement.findName("LoadingSB");
        this.loadingprogress = this.rootElement.findName("loadingprogress");
        this.image1 = this.rootElement.findName("image1");
        this.zoomImageSB = this.rootElement.findName("zoomImageSB");
        this.tbtitle = this.rootElement.findName("tbtitle");
        this.tbtitlecanvas = this.rootElement.findName("tbtitlecanvas");

		//Features Side
        for(i=1; i<=6; i++) 
            eval("this.wheel2Tab"+i+" = this.rootElement.findName(\"wheel2Tab"+i+"\");");
        for(i=1; i<=6; i++) 
            eval("this.wheel2Tab"+i+".addEventListener(\"MouseLeftButtonUp\", Silverlight.createDelegate(this, this.tabUp));");
            
        this.fadeOutBoxesSB.addEventListener("Completed", Silverlight.createDelegate(this, this.fadeOutBoxesComplete));
			
        //this.makeImageButton(this.flipCover,"flipWheel");
        //this.makeImageButton(this.clickToSpin,"nextTab");
        //this.makeImageButton(this.clickToSpin2,"prevTab");
		this.clickToSpin.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.nextTab));
		this.clickToSpin2.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.prevTab));
		this.miniWheel.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.flipWheel));
		
        this.magGlass2.addEventListener("mouseEnter", Silverlight.createDelegate(this, this.showLargeDescription));
        this.magGlass2.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.hideLargeDescription));
        this.magGlass1.addEventListener("mouseEnter", Silverlight.createDelegate(this, this.zoomImage));
        this.magGlass1.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.unzoomImage));
            
        //Screenshots side 
        //this.pageBrowserWindow.addEventListener("mouseMove", Silverlight.createDelegate(this, this.onPageBrowserWindowMouseMove));
        this.isPageBrowserScrolling = true;
        
        for (var i=0; i<screenshot.length; i++)
        {
            var _currThumb = new Thumbnail(this.plugIn, screenshot[i], i);
            _currThumb.xamlElement["Canvas.Left"] = i * 110 + 130;
            this.pageBrowser.children.add(_currThumb.xamlElement);
        }
        
        //this.pageBrowserWindow.isHitTestVisible = true;   
        this.imgleft.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.clickleft));  
        this.imgright.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.clickright));   
        this.pageBrowserSB.addEventListener("Completed", Silverlight.createDelegate(this, this.pageBrowserSBComplete));
            
            
        //Final
        this.selectedWheel = StartingWheel;
        this.selectTab(StartingTab);
        
		this.loaded = true;
		this.mainCanvas.Opacity = 0;
		
		this.hideLargeDescription();
		this.pageBrowserSB.begin();
		SilverlightOK();
	},
    /**************************************************
        WHEEL INTERACTIONS
    **************************************************/

	tabUp: function(sender, eventArgs) 
	{
	    var numTab = Number(sender.Name.substring(9,sender.Name.length));
        this.selectTab(numTab);
	},	
	flipWheel: function(sender, mouseEventArgs)
	{
        this.selectWheel(3-this.selectedWheel);
    },
    selectWheel: function(numwheel)
    {
        this.selectedWheel = numwheel;
		//this.closeBoxes();
		//this.populateBoxes();
        eval("this.flipToWheel"+numwheel+"SB.begin()");
    },
    selectTab: function(numTab) 
    {
        this.selectedTab = numTab;
        var newRotation = -360 * (numTab-1)/6 - 360/6*3;
        
        //this.innerWheel1EndRotation.Value = newRotation;
        //this.tabWheel1EndRotation.Value = newRotation;
        this.innerWheel2EndRotation.Value = newRotation;
        this.tabWheel2EndRotation.Value = newRotation;
        //this.spinInnerWheel1SB.begin();
        this.spinInnerWheel2SB.begin();
		//this.closeBoxes();
		//this.populateBoxes();
    },
	showLargeDescription: function() 
    {
		eval("this.DescriptionText.Text = \"\"+descList"+this.selectedWheel+"[this.selectedTab-1]+\"\";");
        this.fadeInDescriptionSB.begin();
    },  
	hideLargeDescription: function() 
    {
        this.fadeOutDescriptionSB.begin();
    },
    nextTab: function() 
    {
        var newTab = this.selectedTab+1;
		if(newTab>6)
		{
			newTab = 1;
		}
		this.selectTab(newTab);
    },  
    prevTab: function() 
    {
        var newTab = this.selectedTab-1;
		if(newTab<1)
		{
			newTab = 6;
		}
		this.selectTab(newTab);
    },  
    closeBoxes: function() 
    {
		this.fadeOutBoxesSB.begin();
	},
    openBoxes: function() 
    {
		//window.alert("B");
		this.fadeInBoxesSB.begin();
	},
	fadeOutBoxesComplete: function()
	{
		this.populateBoxes();
		this.openBoxes();
	},
	populateBoxes: function()
	{
		//eval("this.AboutTitle.Text = \"About \"+aboutTitlesList"+this.selectedWheel+"[this.selectedTab-1]+\"\";");
		//eval("this.AboutText.Text = \"\"+aboutContentList"+this.selectedWheel+"[this.selectedTab-1]+\"\";");
		eval("var title = \"About \"+aboutTitlesList"+this.selectedWheel+"[this.selectedTab-1]+\"\";");
		eval("var content = \"\"+aboutContentList"+this.selectedWheel+"[this.selectedTab-1]+\"\";");
		//eval("var links = \"\"+moreLinksList"+this.selectedWheel+"[this.selectedTab-1]+\"\";");
		populateAboutBox(title, content);
		//populateLinkBox(links);
	},
    /**************************************************
        GLOBAL INTERACTIONS
    **************************************************/  
    onResized: function(e)
    {
		if (this.loaded) {
			var wpfeXRatio = this.plugIn.content.actualWidth/this.mainCanvas.Width;
			var wpfeYRatio = this.plugIn.content.actualHeight/this.mainCanvas.Height;
			var wpfeRatio = Math.min(wpfeXRatio, wpfeYRatio);
	
			this.mainCanvasScale.ScaleX = wpfeRatio;
			this.mainCanvasScale.ScaleY = wpfeRatio;
			this.mainCanvas["Canvas.Left"] = (this.plugIn.content.actualWidth - this.mainCanvas.Width*wpfeRatio)/2;
			this.mainCanvas["Canvas.Top"] = (this.plugIn.content.actualHeight - this.mainCanvas.Height*wpfeRatio)/2;
			this.mainCanvas.Opacity = 1;
		} else {
			window.setTimeout("myWhirlyThing.onResized()", 1);
		}
    },
    /**************************************************
        IMAGE BUTTONS
    **************************************************/
    makeImageButton: function(object, action) {
        eval("this."+object.Name+".addEventListener(\"mouseEnter\", Silverlight.createDelegate(this, this.imgButtonOver));");
        eval("this."+object.Name+".addEventListener(\"mouseLeave\", Silverlight.createDelegate(this, this.imgButtonOut));");
		if(action!="")
		{
	        eval("this."+object.Name+".addEventListener(\"mouseLeftButtonUp\", Silverlight.createDelegate(this, this."+action+"));");
		}
        object.Cursor = "Hand";
    },
    imgButtonOver: function(s,e)
    {
        var image = s.Source;
        image = image.substr(0, image.length-4) + "_f2.png";
        s.Source = image;
    },
    imgButtonOut: function(s,e)
    {
        var image = s.Source;
        image = image.substr(0, image.length-7) + ".png";
        s.Source = image;
    },
    clickleft: function()
    {
      if (selectedimage == 0) return;
      this.pageBrowser.children.getItem(selectedimage).Opacity = "0.3";
      selectedimage--;
      
      this.pageBrowserSBtranslate.Value=this.pageBrowserSBtranslate.Value+110;
      this.pageBrowserSB.begin();
    },
    clickright: function()
    {
      if (selectedimage == screenshot.length - 1) return;
      this.pageBrowser.children.getItem(selectedimage).Opacity = "0.3";
      selectedimage++;
      
      this.pageBrowserSBtranslate.Value=this.pageBrowserSBtranslate.Value-110;
      this.pageBrowserSB.begin();
    },
    pageBrowserSBComplete: function()
	{
	    this.pageBrowser.children.getItem(selectedimage).Opacity = "1";
	    this.tbtitle.Text = this.pageBrowser.children.getItem(selectedimage).findName("txtdesc").Text;
        //text alignment center
        this.tbtitle["Canvas.Left"] = (this.tbtitlecanvas.Width - this.tbtitle.ActualWidth) / 2;
 
	    this.image1.Source = "";
	
		var downloader = this.plugIn.createObject("downloader");
        downloader.addEventListener("downloadProgressChanged", Silverlight.createDelegate(this, this.onDownloadProgressChanged));
        downloader.addEventListener("completed", Silverlight.createDelegate(this, this.onCompleted));
        downloader.open("GET", this.pageBrowser.children.getItem(selectedimage).Tag);
        downloader.send();
	},
	onDownloadProgressChanged: function(sender, eventArgs)
    {
        this.loadingprogress["Visibility"] = "Visible";
        this.LoadingSB.begin();
    },
    onCompleted: function(sender, eventArgs)
    {
        this.LoadingSB.stop();
        this.loadingprogress["Visibility"] = "Collapsed";

        // Set the Source property to the contents of the downloaded object,
        this.image1.setSource(sender,null);
    },
    zoomImage: function() 
    {
        this.mainCanvas["Canvas.ZIndex"]=1;
        this.zoomImageSB.begin();
    },  
    unzoomImage: function() 
    {
        this.mainCanvas["Canvas.ZIndex"]=0;
        this.zoomImageSB.stop();
    }
}

function Thumbnail (plugIn, thumbpath, index) {

        // this is the template for all thumbnails, given the following variables
        // $2: UIElement corresponding to the left page of this thumbnail
        // $3: UIElement corresponding to the right page of this thumbnail
        var _str =    "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Canvas.Top='0' x:Name='thumb' Opacity='0.3'" + " Tag='" + thumbpath.split("|")[1] + "'>";
        _str = _str + "  <Canvas.Resources>";
        _str = _str + "        <Storyboard BeginTime='0' Duration='Forever' FillBehavior='Stop' x:Name='storyZoomIn'>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='ScaleX' Storyboard.TargetName='scale'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='1.5' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='ScaleY' Storyboard.TargetName='scale'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='1.5' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='X' Storyboard.TargetName='pos'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='-30' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='Opacity' Storyboard.TargetName='thumb'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='1' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='Opacity' Storyboard.TargetName='txtdesc'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='1' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "        </Storyboard>";
        _str = _str + "  </Canvas.Resources>";
        _str = _str + "  <Rectangle x:Name='thumbBackground' Height='90' Width='120' Fill='#37CCCCCC' Opacity='1' Canvas.Left='0' Canvas.Top='-42'/>";
        _str = _str + "  <Canvas>";
        _str = _str + "    <Canvas.RenderTransform>";
        _str = _str + "      <TransformGroup>";
        _str = _str + "        <ScaleTransform x:Name='scale' ScaleX='1' ScaleY='1'/>";
        _str = _str + "        <TranslateTransform x:Name='pos' X='0' Y='0'/>";
        _str = _str + "      </TransformGroup>";
        _str = _str + "    </Canvas.RenderTransform>";
        _str = _str + "    <Rectangle x:Name='thumbOver' Height='90' Width='120' Fill='#66000000' Opacity='0' Canvas.Top='-600' Canvas.Left='0'/>";
        _str = _str + "    <Canvas Canvas.Top='-37' Canvas.Left='5'>";
        _str = _str + "      $3";
        _str = _str + "    </Canvas>";
        _str = _str + "  </Canvas>";
        _str = _str + "  <TextBlock x:Name='txtdesc' Width='119' Height='33' Canvas.Left='" + "" +"0' Canvas.Top='70'  Canvas.ZIndex='100' Text='" + thumbpath.split("|")[0] + "' TextWrapping='Wrap' FontSize='12' FontFamily='Arial' Foreground='#FF090955' Opacity='0'/>";
        _str = _str + "</Canvas>";

        var _str2 = "<Canvas>";
        _str2 += "  <Image Height='64' Width='88' Source='" + thumbpath.split("|")[2] + "' Stretch='Fill'/>";
        _str2 += "  <Rectangle Height='64' Width='88' Stroke='#FF9C9C9C' StrokeThickness='2'/>";
        _str2 += "</Canvas>";

        var thumbStr = _str.replace(/\$3/g, _str2);

        // create XAML thumbnail using createFromXaml
        this.xamlElement = plugIn.content.createFromXaml(thumbStr, true);
        
        // attach event handlers for the thumbnail
        /*this.xamlElement.addEventListener("mouseEnter", Silverlight.createDelegate(this, this.handleMouseEnter));
        this.xamlElement.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave));
        this.xamlElement.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
        this.xamlElement.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseUp));*/
   
        // initialize mouse state
        this.isMouseOver = false;
        this.isMouseDown = false;
}

Thumbnail.prototype.handleMouseEnter = function(sender, eventArgs)
{
    if (this.isMouseDown == false)
    {
        // ensure current thumbnail is on top
        this.xamlElement["Canvas.ZIndex"] = 1;      

        // zoom in thumbnail
        this.xamlElement.findName("storyZoomIn").begin();
        this.xamlElement.findName("thumbOver").opacity = 1;
    }
    else
    {
        // go back to pressed down state
        this.xamlElement.findName("thumbOver").fill = "#6623A3E0";
        this.xamlElement.findName("thumbBackground").fill = "#3723A3E0";
    }
    
    this.isMouseOver = true;
}

Thumbnail.prototype.handleMouseLeave = function(sender, eventArgs)
{
    if (this.isMouseDown == false)
    {
        // ensure current thumbnail is not on top
        this.xamlElement["Canvas.ZIndex"] = 0;  
        
        // stop storyboard and minimize thumbnail
        this.xamlElement.findName("storyZoomIn").stop();
        this.xamlElement.findName("thumbOver").opacity = 0;
    }
    else
    {
        // if we were highlighted, go back to mouse over state since we have mouse capture
        this.xamlElement.findName("thumbOver").fill = "#66000000";
        this.xamlElement.findName("thumbBackground").fill = "#37FFFFFF";
    }
    this.isMouseOver = false;
}

Thumbnail.prototype.handleMouseDown = function(sender, eventArgs)
{
    this.xamlElement.findName("thumbOver").fill = "#6623A3E0";
    this.xamlElement.findName("thumbBackground").fill = "#3723A3E0";
    
    sender.captureMouse();
    this.isMouseDown = true;
    isPageBrowserScrolling = false;
}

Thumbnail.prototype.handleMouseUp = function(sender, eventArgs)
{
    if (this.isMouseOver == true)
    {
        /*if (this.clickHandler) {
            this.clickHandler(this);
        }*/
        window.open( sender.tag, '_blank', "location=yes,menubar=yes,toolbar=yes,resizable=yes,scrollbars=yes" );
    }

    // ensure current thumbnail is not on top
    this.xamlElement["Canvas.ZIndex"] = 0;  
        
    // minimize this thumbnail
    this.xamlElement.findName("storyZoomIn").stop();
    this.xamlElement.findName("thumbOver").fill = "#66000000";
    this.xamlElement.findName("thumbOver").opacity = 0;
    this.xamlElement.findName("thumbBackground").fill = "#37FFFFFF";

    sender.releaseMouseCapture();
    this.isMouseDown = false;
}