<file_sep># Parallel requests
	'Parallel requests' is a simple HTML/CSS/JavaScript application using recent pictures feed from Flickr API.
 By default the (on application loading) number of pictures retrieved from Flickr API is 100 and number of parallel requests is 5.
 The user can change two value by selecting values from the dropdown menus on the right side of the screen.  
 On the right side there is a active(parallel) request counter. 
 The dropdowns are are disabled whe active request counter is biiger then 0 the requests.
 The application is uploaded to https://gt-parallel-requests.herokuapp.com/
## Installation
You can download or clone the application files from Github - https://github.com/cologneto/parallel-requests.
Once downloaded you can simply run the index.html file into your browser.
## Usage 
To add the Parallel Requests module into your own project you can include parallelRequest.js from /js directory in this project.
To use it just call - ParallelRequests.create(maximumNumberOfPictures, numberOfParallelRequests, wrapSelector)
where maximumNumberOfPictures argument must be of data type 'number' smaller then 500,  null or undefined,
numberOfParallelRequests argument - must be of data type 'number' smaller then 500,  null or undefined and
wrapSelector must be of type 'string' or null or undefined and you must include element with class or id attribute into body. If there is no selector passed
the pictures will be appended to the html documents body.

	Examples
  
	 ParallelRequests.create(100, 5, '.wrapper');
	 
	 You can call it without arguments  - 
	 ParallelRequests.create()
	 
	 or ParallelRequests.create(100, 5)
	 or ParallelRequests.create(100) 
	 or ParallelRequests.create(null, 5, '');

 <file_sep>var ParallelRequests = (function(){
    var maxPicturesRequests;
    var requestsCounter = 0;
    var parallelRequests;
    var photosArray;
    var wrapperSelector;

    // This application using Flickr rest API for retrieving the recent uploaded pictures
    function getAllPicturesLinks(url) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (this.readyState == 4 ){
                if(this.status == 200){
                    photosArray = this.response.photos.photo;
                    requestsCounter = parallelRequests;
                    for (var i = 0; i < parallelRequests; i++) {
                        getSinglePicture(photosArray[i]);
                    }
                }
            }
        }
        xhr.open('GET', url);
        xhr.responseType = 'json';
        xhr.send();
    }

    // append picture to body
    function appendPictureToContainer(pic) {
        var img     = document.createElement('img');
        var wrapper = document.querySelector(wrapperSelector);
        img.src = pic;
        wrapper.appendChild(img);
    }

    // make a single get request for a picture
    function getSinglePicture(pic, con) {
        var pictureUrl = 'https://farm'+pic.farm+'.staticflickr.com/'+pic.server+'/'+pic.id+'_'+pic.secret+'.jpg'

        // setting the timeout
        setTimeout(function () {
        //     // getting image as 'blob'
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if (this.readyState == 4 && this.status == 200){
                    //
                    var url = window.URL || window.webkitURL;

                    appendPictureToContainer(url.createObjectURL(this.response));
                    if(requestsCounter < maxPicturesRequests) {
                        getSinglePicture(photosArray[requestsCounter]);
                        requestsCounter++;
                    } else {
                        return false;
                    }
                }
            };
            xhr.open('GET', pictureUrl);
            xhr.responseType = 'blob';
            xhr.send();
        }, 1);
    }

     function create(maxPicReq, parReqCount, wrapSelector) {
         maxPicturesRequests = maxPicReq || 100;
         parallelRequests    = parReqCount || 5;
         wrapperSelector     = wrapSelector || 'body';

         // Flickr URL for retrieving recently added pictures (maxPictureRequests <= 500 - API )
         var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getRecent&' +
             'api_key=<KEY>&' +
             'per_page=' + maxPicturesRequests +
             '&format=json&nojsoncallback=1';

        getAllPicturesLinks(url);
    }

    return {
        create: create
    }
})();
