// export interface IImage {
//     url: string | null;
//     href?: string;
//     clickAction?: Function;
//     caption?: string;
//     title?: string;
//     backgroundSize?: string;
//     backgroundPosition?: string;
//     backgroundRepeat?: string;
// }
// import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';
import { CONFIG } from '../../app/config';
declare var $:any;

export class ImageClass{
    constructor( ){
        // this.http = http;
        
    }
    loaded(){
        $.getScript("assets/js/jquery.threesixty.js")
        var  hotspotList=[];
        setTimeout(() => {
        var $threeSixty = $('.threesixty');
        var wid = 806/100;
		var hei = 520/100;
		var img_arr = [];
       
        var newx,newY,contentTitle,contentDescription,contentFile;
        for(var i=0;i<CONFIG.image360Sources.length;i++){
            img_arr.push(CONFIG.image360Sources[i].image_url)
            hotspotList[i] = []
            for(var j=0;j<CONFIG.image360Sources[i].hotspot.length;j++){
                
                // hotspotList[i].push(CONFIG.image360Sources[i].hotspot[j].point_arr)
                newx = wid*((CONFIG.image360Sources[i].hotspot[j].point_arr.x / 1024)*100);
                newY = hei*((CONFIG.image360Sources[i].hotspot[j].point_arr.y / 660)*100);
                var obj={
                    x:newx,y:newY,contentTitle:CONFIG.image360Sources[i].hotspot[j].title,contentDescription:CONFIG.image360Sources[i].hotspot[j].description,contentFile:CONFIG.image360Sources[i].hotspot[j].thumb_image_url
                };
                hotspotList[i].push(obj)
            }
        }
        
        $threeSixty.threeSixty({
            dragDirection: 'horizontal',
            useKeys: true,
            draggable: false,
            imagearray: img_arr,
            hotspotArray:hotspotList,
            speed:100
        });
         $('.next').click(function () {
            $threeSixty.nextFrame();
        });
      
        $('.prev').click(function () {
            $threeSixty.prevFrame();
        });
       
        $threeSixty.on('down', function () {
            $('.ui, h1, h2, .label, .examples').stop().animate({ opacity: 0 }, 300);
        });

        $threeSixty.on('up', function () {
            
            $('.ui, h1, h2, .label, .examples').stop().animate({ opacity: 1 }, 500);
        });
        
            $('.threesixty').on('move', function(){
            
            })
   
        
    }, 500);
 
}
}